From 51147961bcae2b85cb1d203cb9148f20b832fc5e Mon Sep 17 00:00:00 2001 From: adroitwhiz Date: Wed, 29 Jan 2020 22:04:17 -0500 Subject: [PATCH 1/3] Remove _draw and fromString --- README.md | 15 ++++++++++++--- src/playground/index.html | 10 ++++++---- src/svg-renderer.js | 35 ----------------------------------- 3 files changed, 18 insertions(+), 42 deletions(-) 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..caff0bac 100644 --- a/src/svg-renderer.js +++ b/src/svg-renderer.js @@ -30,22 +30,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 +422,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. From f9ef76cc69c2361a2dfa0aec0b8721b133c4f702 Mon Sep 17 00:00:00 2001 From: adroitwhiz Date: Fri, 3 Apr 2020 13:09:51 -0400 Subject: [PATCH 2/3] Document SvgRenderer properties --- src/svg-renderer.js | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/src/svg-renderer.js b/src/svg-renderer.js index caff0bac..c67f91ba 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; } From e770e7aa942a3fa8a38e5dc9c57ba75498aad464 Mon Sep 17 00:00:00 2001 From: adroitwhiz Date: Mon, 4 May 2020 14:42:19 -0400 Subject: [PATCH 3/3] Clean up scaling in _drawFromImage --- src/svg-renderer.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/svg-renderer.js b/src/svg-renderer.js index c67f91ba..ea93ee9e 100644 --- a/src/svg-renderer.js +++ b/src/svg-renderer.js @@ -474,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; } }