fix(fabric.Object) Fix control flip and control box (#7412)

fabricjs · Oct 3, 2021 · d277016 · d277016
1 parent df7e86a
commit d277016
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 0 deletions.
diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js
@@ -1401,6 +1401,9 @@
       if (!this.group) {
         ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
       }
+      if (this.flipX) {
+        options.angle -= 180;
+      }
       ctx.rotate(degreesToRadians(options.angle));
       if (styleOverride.forActiveSelection || this.group) {
         drawBorders && this.drawBordersInGroup(ctx, options, styleOverride);

diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js
@@ -393,6 +393,8 @@
     /**
      * Return a context for measurement of text string.
      * if created it gets stored for reuse
+     * this is for internal use, please do not use it
+     * @private
      * @param {String} text Text string
      * @param {Object} [options] Options object
      * @return {fabric.Text} thisArg

diff --git a/test/visual/control_rendering.js b/test/visual/control_rendering.js
@@ -261,5 +261,28 @@
     fabricClass: 'Canvas',
   });
 
+  function controlboxFlippedX(canvas, callback) {
+    var rect = new fabric.Rect({
+      width: 90, height: 90, padding: 4, angle: 15, flipX: true,
+      cornerSize: 12, cornerColor: 'green', cornerStrokeColor: 'pink',
+      transparentCorners: true, borderScaleFactor: 3,
+      fill: 'red', top: 35, left: 35,
+    });
+    canvas.add(rect);
+    canvas.setActiveObject(rect);
+    canvas.renderAll();
+    callback(canvas.lowerCanvasEl);
+  }
+
+  tests.push({
+    test: 'controlbox with flipped X',
+    code: controlboxFlippedX,
+    golden: 'controls11.png',
+    percentage: 0.004,
+    width: 150,
+    height: 170,
+    fabricClass: 'Canvas',
+  });
+
   tests.forEach(visualTestLoop(QUnit));
 })();
diff --git a/test/visual/golden/controls11.png b/test/visual/golden/controls11.png