(WIP) correct subpixel positioning for SVGs

Author: adroitwhiz

src/svg-renderer.js

@@ -18,7 +18,11 @@ class SvgRenderer {
         this._canvas = canvas || document.createElement('canvas');
         this._context = this._canvas.getContext('2d');
         this._measurements = {x: 0, y: 0, width: 0, height: 0};
+        this._textureSize = [0, 0];
         this._cachedImage = null;
+        this._cachedRotationCenter = null;
+
+        this.viewOffset = [0, 0];
     }
 
     /**
@@ -33,7 +37,7 @@ class SvgRenderer {
      * 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 (multiplied by `getDrawRatio()`).
+     * @param {number} [scale] - Optionally, also scale the image by this factor.
      * @param {Function} [onFinish] Optional callback for when drawing finished.
      */
     fromString (svgString, scale, onFinish) {
@@ -54,15 +58,15 @@ class SvgRenderer {
     /**
      * @return {Array<number>} the natural size, in Scratch units, of this SVG.
      */
-    get size () {
+    get measuredSize () {
         return [this._measurements.width, this._measurements.height];
     }
 
     /**
-     * @return {Array<number>} the offset (upper left corner) of the SVG's view box.
+     * @return {Array<number>} the size, in "logical" pixels, of the texture.
      */
-    get viewOffset () {
-        return [this._measurements.x, this._measurements.y];
+    get textureSize () {
+        return this._textureSize;
     }
 
     /**
@@ -111,6 +115,8 @@ class SvgRenderer {
             x: this._svgTag.viewBox.baseVal.x,
             y: this._svgTag.viewBox.baseVal.y
         };
+
+        this._svgTag.setAttribute('preserveAspectRatio', 'none');
     }
 
     /**
@@ -366,59 +372,103 @@ class SvgRenderer {
     }
 
     /**
-     * Get the drawing ratio, adjusted for HiDPI screens.
-     * @return {number} Scale ratio to draw to canvases with.
-     */
-    getDrawRatio () {
-        const devicePixelRatio = window.devicePixelRatio || 1;
-        const backingStoreRatio = this._context.webkitBackingStorePixelRatio ||
-            this._context.mozBackingStorePixelRatio ||
-            this._context.msBackingStorePixelRatio ||
-            this._context.oBackingStorePixelRatio ||
-            this._context.backingStorePixelRatio || 1;
-        return devicePixelRatio / backingStoreRatio;
-    }
-
-    /**
-     * Draw the SVG to a canvas. The canvas will automatically be scaled by the value returned by `getDrawRatio`.
-     * @param {number} [scale] - Optionally, also scale the image by this factor (multiplied by `getDrawRatio()`).
+     * Draw the 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.
+     * @param {Array<number>} [rotationCenter] - Optionally, the rotation center of the Skin this SVG is used for.
+     * @param {number} [minScale] - Optionally, the minimum scale this SVG will be rendered at
+     * with proper subpixel positioning.
      */
-    _draw (scale, onFinish) {
+    _draw (scale, onFinish, rotationCenter, minScale) {
+        const measurements = this._measurements;
+
+        // Compensate for quirks-mode SVG viewbox offset.
+        // Multiplied by the minimum drawing scale.
+        const center = [
+            (rotationCenter[0] - this._measurements.x) * minScale,
+            (rotationCenter[1] - this._measurements.y) * minScale
+        ];
+
+        // Take the fractional part of the scaled rotation center.
+        // We will translate the viewbox by this amount later for proper subpixel positioning.
+        const centerFrac = [
+            (center[0] % 1),
+            (center[1] % 1)
+        ];
+
+        // Scale the viewbox dimensions by the minimum scale, add the offset, then take the ceiling
+        // to get the rendered size (scaled by minScale).
+        const scaledSize = [
+            Math.ceil((this._measurements.width * minScale) + (1 - centerFrac[0])),
+            Math.ceil((this._measurements.height * minScale) + (1 - centerFrac[1]))
+        ];
+
+        // Scale back up to the SVG size.
+        const textureSize = [
+            scaledSize[0] / minScale,
+            scaledSize[1] / minScale
+        ];
+
+        this._textureSize = textureSize;
+        this.viewOffset = [
+            ((center[0] + (1 - centerFrac[0])) / minScale),
+            ((center[1] + (1 - centerFrac[1])) / minScale)
+        ];
+
+        // Adjust the SVG tag's viewbox to match the texture dimensions and offset.
+        // This will ensure that the SVG is rendered at the proper sub-pixel position,
+        // and with integer dimensions at power-of-two sizes down to minScale.
+        if (!this._cachedRotationCenter ||
+            this._cachedRotationCenter[0] !== rotationCenter[0] ||
+            this._cachedRotationCenter[1] !== rotationCenter[1]) {
+
+            this._svgTag.setAttribute('viewBox',
+                `${
+                    measurements.x - ((1 - centerFrac[0]) / minScale)
+                } ${
+                    measurements.y - ((1 - centerFrac[1]) / minScale)
+                } ${
+                    textureSize[0]
+                } ${
+                    textureSize[1]
+                }`);
+
+            this._svgTag.setAttribute('width', textureSize[0]);
+            this._svgTag.setAttribute('height', textureSize[1]);
+
+
+            this._cachedRotationCenter = rotationCenter;
+        }
         // Convert the SVG text to an Image, and then draw it to the canvas.
         if (this._cachedImage) {
-            this._drawFromImage(scale, onFinish);
+            this._drawFromImage(scale, rotationCenter, onFinish);
         } else {
             const img = new Image();
-            img.onload = () => {
+            img.addEventListener('load', () => {
                 this._cachedImage = img;
-                this._drawFromImage(scale, onFinish);
-            };
+                this._drawFromImage(scale, rotationCenter, onFinish);
+            });
             const svgText = this.toString(true /* shouldInjectFonts */);
             img.src = `data:image/svg+xml;utf8,${encodeURIComponent(svgText)}`;
         }
     }
 
     /**
      * Draw to the canvas from a loaded image element.
-     * @param {number} [scale] - Optionally, also scale the image by this factor (multiplied by `getDrawRatio()`).
+     * @param {number} [scale] - Optionally, also scale the image by this factor.
+     * @param {Array<number>} [rotationCenter] - Optionally, the rotation center of the Skin this SVG is used for.
      * @param {Function} [onFinish] - An optional callback to call when the draw operation is complete.
      **/
-    _drawFromImage (scale, onFinish) {
+    _drawFromImage (scale, rotationCenter, onFinish) {
         if (!this._cachedImage) return;
 
-        const ratio = this.getDrawRatio() * (Number.isFinite(scale) ? scale : 1);
-        const bbox = this._measurements;
-        this._canvas.width = bbox.width * ratio;
-        this._canvas.height = bbox.height * ratio;
+        const ratio = Number.isFinite(scale) ? scale : 1;
+        this._canvas.width = this._textureSize[0] * ratio;
+        this._canvas.height = this._textureSize[1] * ratio;
         this._context.clearRect(0, 0, this._canvas.width, this._canvas.height);
-        this._context.scale(ratio, ratio);
+        // Scale the canvas up.
+        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;
         // All finished - call the callback if provided.
         if (onFinish) {
             onFinish();