diff --git a/README.md b/README.md
index 3fd5752b..7fd2797a 100644
--- a/README.md
+++ b/README.md
@@ -21,8 +21,17 @@ npm install
```js
import SvgRenderer from 'scratch-svg-renderer';
-var svgRenderer = new SvgRenderer();
-svgRenderer.fromString(svgData, callback);
+const svgRenderer = new SvgRenderer();
+
+const svgData = "";
+const scale = 1;
+const quirksMode = false; // If true, emulate Scratch 2.0 SVG rendering "quirks"
+function doSomethingWith(canvas) {...};
+
+svgRenderer.loadSVG(svgData, quirksMode, () => {
+ svgRenderer.draw(scale);
+ doSomethingWith(svgRenderer.canvas);
+});
```
## How to run locally as part of scratch-gui
@@ -49,4 +58,4 @@ To run scratch-svg-renderer locally as part of scratch-gui, for development:
6. In scratch-gui, follow its instructions to run it or build its code
## Donate
-We provide [Scratch](https://scratch.mit.edu) free of charge, and want to keep it that way! Please consider making a [donation](https://secure.donationpay.org/scratchfoundation/) to support our continued engineering, design, community, and resource development efforts. Donations of any size are appreciated. Thank you!
\ No newline at end of file
+We provide [Scratch](https://scratch.mit.edu) free of charge, and want to keep it that way! Please consider making a [donation](https://secure.donationpay.org/scratchfoundation/) to support our continued engineering, design, community, and resource development efforts. Donations of any size are appreciated. Thank you!
diff --git a/src/playground/index.html b/src/playground/index.html
index aed0d843..6f8fe345 100644
--- a/src/playground/index.html
+++ b/src/playground/index.html
@@ -72,9 +72,10 @@
loadSVGString();
}
- function renderSVGString(str) {
- renderer.fromString(str);
- renderer._draw(parseFloat(scaleSlider.value), ()=>{});
+ function renderSVGString() {
+ if (renderer.loaded) {
+ renderer.draw(parseFloat(scaleSlider.value));
+ }
renderedContent.value = renderer.toString(true);
}
@@ -103,11 +104,12 @@
function loadSVGString() {
readFileAsText(fileChooser.files[0]).then(str => {
loadedSVGString = str;
+ renderer.loadSVG(str, false);
})
}
function renderLoadedString() {
- renderSVGString(loadedSVGString);
+ renderSVGString();
referenceContent.value = loadedSVGString;
shouldRenderReference.checked && updateReferenceImage();
}
diff --git a/src/svg-renderer.js b/src/svg-renderer.js
index a28620a7..ea93ee9e 100644
--- a/src/svg-renderer.js
+++ b/src/svg-renderer.js
@@ -16,10 +16,41 @@ class SvgRenderer {
* @constructor
*/
constructor (canvas) {
+ /**
+ * The canvas that this SVG renderer will render to.
+ * @type {HTMLCanvasElement}
+ * @private
+ */
this._canvas = canvas || document.createElement('canvas');
this._context = this._canvas.getContext('2d');
+
+ /**
+ * A measured SVG "viewbox"
+ * @typedef {object} SvgRenderer#SvgMeasurements
+ * @property {number} x - The left edge of the SVG viewbox.
+ * @property {number} y - The top edge of the SVG viewbox.
+ * @property {number} width - The width of the SVG viewbox.
+ * @property {number} height - The height of the SVG viewbox.
+ */
+
+ /**
+ * The measurement box of the currently loaded SVG.
+ * @type {SvgRenderer#SvgMeasurements}
+ * @private
+ */
this._measurements = {x: 0, y: 0, width: 0, height: 0};
+
+ /**
+ * The `` element with the contents of the currently loaded SVG.
+ * @type {?HTMLImageElement}
+ * @private
+ */
this._cachedImage = null;
+
+ /**
+ * True if this renderer's current SVG is loaded and can be rendered to the canvas.
+ * @type {boolean}
+ */
this.loaded = false;
}
@@ -30,22 +61,6 @@ class SvgRenderer {
return this._canvas;
}
- /**
- * Load an SVG from a string and draw it.
- * This will be parsed and transformed, and finally drawn.
- * When drawing is finished, the `onFinish` callback is called.
- * @param {string} svgString String of SVG data to draw in quirks-mode.
- * @param {number} [scale] - Optionally, also scale the image by this factor.
- * @param {Function} [onFinish] Optional callback for when drawing finished.
- * @deprecated Use the `loadSVG` method and public `draw` method instead.
- */
- fromString (svgString, scale, onFinish) {
- this.loadSVG(svgString, false, () => {
- this.draw(scale);
- if (onFinish) onFinish();
- });
- }
-
/**
* Load an SVG from a string and measure it.
* @param {string} svgString String of SVG data to draw in quirks-mode.
@@ -438,25 +453,6 @@ class SvgRenderer {
this._drawFromImage(scale);
}
- /**
- * Asynchronously draw the (possibly non-loaded) SVG to a canvas.
- * @param {number} [scale] - Optionally, also scale the image by this factor.
- * @param {Function} [onFinish] - An optional callback to call when the draw operation is complete.
- * @deprecated Use the `loadSVG` and public `draw` method instead.
- */
- _draw (scale, onFinish) {
- // Convert the SVG text to an Image, and then draw it to the canvas.
- if (this._cachedImage === null) {
- this._createSVGImage(() => {
- this._drawFromImage(scale);
- onFinish();
- });
- } else {
- this._drawFromImage(scale);
- onFinish();
- }
- }
-
/**
* Draw to the canvas from a loaded image element.
* @param {number} [scale] - Optionally, also scale the image by this factor.
@@ -478,13 +474,8 @@ class SvgRenderer {
this._cachedImage.naturalHeight <= 0
) return;
this._context.clearRect(0, 0, this._canvas.width, this._canvas.height);
- this._context.scale(ratio, ratio);
+ this._context.setTransform(ratio, 0, 0, ratio, 0, 0);
this._context.drawImage(this._cachedImage, 0, 0);
- // Reset the canvas transform after drawing.
- this._context.setTransform(1, 0, 0, 1, 0, 0);
- // Set the CSS style of the canvas to the actual measurements.
- this._canvas.style.width = bbox.width;
- this._canvas.style.height = bbox.height;
}
}