diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 7db7c565077..a32641d7397 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -1384,6 +1384,7 @@ /** * Renders controls and borders for the object + * the context here is not transformed * @param {CanvasRenderingContext2D} ctx Context to render on * @param {Object} [styleOverride] properties to override the object style */ @@ -1405,7 +1406,7 @@ if (this.flipX) { options.angle -= 180; } - ctx.rotate(degreesToRadians(options.angle)); + ctx.rotate(degreesToRadians(this.group ? options.angle : this.angle)); if (styleOverride.forActiveSelection || this.group) { drawBorders && this.drawBordersInGroup(ctx, options, styleOverride); } diff --git a/test/visual/control_rendering.js b/test/visual/control_rendering.js index 2e75f890255..bc4e97fbc8f 100644 --- a/test/visual/control_rendering.js +++ b/test/visual/control_rendering.js @@ -284,5 +284,39 @@ fabricClass: 'Canvas', }); + function controlBoxes(canvas, callback) { + canvas.loadFromJSON('{"version":"4.6.0","objects":[{"type":"rect","version":"4.6.0","left":38,"top":201,"width":150,"height":150,"fill":"red","skewX":0.15,"skewY":36},{"type":"rect","version":"4.6.0","left":20,"top":2,"width":150,"height":150,"fill":"#020aed","scaleX":1.24,"scaleY":0.81,"angle":35.95,"skewX":25.46},{"type":"group","version":"4.6.0","left":60.65,"top":28,"width":320.4,"height":335.5,"objects":[{"type":"rect","version":"4.6.0","left":-29.85,"top":-167.75,"width":150,"height":150,"fill":"green","angle":30,"skewX":14.71,"skewY":36},{"type":"rect","version":"4.6.0","left":-29.85,"top":-167.75,"width":150,"height":150,"fill":"yellow","angle":45,"skewX":14.71}]}]}', + function() { + canvas.renderAll(); + canvas.getObjects().forEach(function(object) { + object.borderScaleFactor = 3; + object.transparentCorners = false; + object._renderControls(canvas.contextContainer, { + borderColor: object.fill, + cornerColor: object.fill, + }); + object._objects && object.getObjects().forEach(function(subTarget) { + subTarget.borderScaleFactor = 3; + subTarget.transparentCorners = false; + subTarget._renderControls(canvas.contextContainer, { + borderColor: subTarget.fill, + cornerColor: subTarget.fill, + }); + }); + }); + callback(canvas.lowerCanvasEl); + }); + } + + tests.push({ + test: 'controlboxes with skewY, green is wrong and needs fix', + code: controlBoxes, + golden: 'controls12.png', + percentage: 0.002, + width: 400, + height: 600, + fabricClass: 'Canvas', + }); + tests.forEach(visualTestLoop(QUnit)); })(); diff --git a/test/visual/golden/controls12.png b/test/visual/golden/controls12.png new file mode 100644 index 00000000000..8129535c745 Binary files /dev/null and b/test/visual/golden/controls12.png differ