From a4cb8879fcbcdb09a7e4a70052136018c3d77107 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Mon, 18 May 2015 11:24:00 +0200 Subject: [PATCH] Update object_interactivity.mixin.js --- src/canvas.class.js | 18 +++++-------- src/mixins/canvas_gestures.mixin.js | 14 +++++----- src/mixins/object_geometry.mixin.js | 5 ++++ src/mixins/object_interactivity.mixin.js | 34 ++++++++++++++++++++---- src/mixins/object_origin.mixin.js | 33 ++++++++++++++--------- 5 files changed, 69 insertions(+), 35 deletions(-) diff --git a/src/canvas.class.js b/src/canvas.class.js index 6715be68..e015d3c2 100644 --- a/src/canvas.class.js +++ b/src/canvas.class.js @@ -509,13 +509,10 @@ */ _setObjectScale: function(localMouse, transform, lockScalingX, lockScalingY, by, lockScalingFlip) { var target = transform.target, forbidScalingX = false, forbidScalingY = false, - vLine = target.type === 'line' && target.width === 0, - hLine = target.type === 'line' && target.height === 0, - strokeWidthX = hLine ? 0 : target.strokeWidth, - strokeWidthY = vLine ? 0 : target.strokeWidth; + dim = target._getNonTransformedDimensions(); - transform.newScaleX = localMouse.x / (target.width + strokeWidthX); - transform.newScaleY = localMouse.y / (target.height + strokeWidthY); + transform.newScaleX = localMouse.x / dim.x; + transform.newScaleY = localMouse.y / dim.y; if (lockScalingFlip && transform.newScaleX <= 0 && transform.newScaleX < target.scaleX) { forbidScalingX = true; @@ -549,12 +546,9 @@ _scaleObjectEqually: function(localMouse, target, transform) { var dist = localMouse.y + localMouse.x, - vLine = target.type === 'line' && target.width === 0, - hLine = target.type === 'line' && target.height === 0, - strokeWidthX = hLine ? 0 : target.strokeWidth, - strokeWidthY = vLine ? 0 : target.strokeWidth, - lastDist = (target.height + strokeWidthY) * transform.original.scaleY + - (target.width + strokeWidthX) * transform.original.scaleX; + dim = target._getNonTransformedDimensions(), + lastDist = dim.y * transform.original.scaleY + + dim.x * transform.original.scaleX; // We use transform.scaleX/Y instead of target.scaleX/Y // because the object may have a min scale and we'll loose the proportions diff --git a/src/mixins/canvas_gestures.mixin.js b/src/mixins/canvas_gestures.mixin.js index 68adec08..7a79bff7 100644 --- a/src/mixins/canvas_gestures.mixin.js +++ b/src/mixins/canvas_gestures.mixin.js @@ -65,6 +65,7 @@ this.renderAll(); t.action = 'drag'; }, + /** * Method that defines actions when an Event.js drag is detected. * @@ -76,6 +77,7 @@ e: e, self: self }); }, + /** * Method that defines actions when an Event.js orientation event is detected. * @@ -87,6 +89,7 @@ e: e, self: self }); }, + /** * Method that defines actions when an Event.js shake event is detected. * @@ -98,6 +101,7 @@ e: e, self: self }); }, + /** * Method that defines actions when an Event.js longpress event is detected. * @@ -109,6 +113,7 @@ e: e, self: self }); }, + /** * Scales an object by a factor * @param {Number} s The scale factor to apply to the current scale level @@ -127,19 +132,16 @@ target._scaling = true; var constraintPosition = target.translateToOriginPoint(target.getCenterPoint(), t.originX, t.originY), - vLine = target.type === 'line' && target.width === 0, - hLine = target.type === 'line' && target.height === 0, - strokeWidthX = hLine ? 0 : target.strokeWidth, - strokeWidthY = vLine ? 0 : target.strokeWidth; + dim = target._getNonTransformedDimensions(); - this._setObjectScale(new fabric.Point((t.scaleX * s * (target.width + strokeWidthX)), - (t.scaleY * s * (target.height + strokeWidthY))), + this._setObjectScale(new fabric.Point(t.scaleX * s * dim.x, t.scaleY * s * dim.y), t, lockScalingX, lockScalingY, null, target.get('lockScalingFlip')); target.setPositionByOrigin(constraintPosition, t.originX, t.originY); this._fire('scaling', target, e); }, + /** * Rotates object by an angle * @param {Number} curAngle The angle of rotation in degrees diff --git a/src/mixins/object_geometry.mixin.js b/src/mixins/object_geometry.mixin.js index cd9164aa..0b49afea 100644 --- a/src/mixins/object_geometry.mixin.js +++ b/src/mixins/object_geometry.mixin.js @@ -371,6 +371,11 @@ this._setCornerCoords && this._setCornerCoords(); return this; + }, + + _calcDimensionsTransformMatrix: function() { + // introduce skew matrix here later + return [this.scaleX, 0, 0, this.scaleY, 0, 0]; } }); })(); diff --git a/src/mixins/object_interactivity.mixin.js b/src/mixins/object_interactivity.mixin.js index b2eb75f4..e22a0bb0 100644 --- a/src/mixins/object_interactivity.mixin.js +++ b/src/mixins/object_interactivity.mixin.js @@ -106,9 +106,12 @@ } }, - _calculateCurrentDimensions: function(shouldTransform) { - var vpt = this.getViewportTransform(), - strokeWidth = this.strokeWidth, + /* + * Calculate object dimensions from its properties + * @private + */ + _getNonTransformedDimensions: function() { + var strokeWidth = this.strokeWidth, w = this.width, h = this.height, capped = this.strokeLineCap === 'round' || this.strokeLineCap === 'square', @@ -130,9 +133,30 @@ if (strokeH) { h += (h < 0 ? -strokeWidth : strokeWidth); } + return { x: w, y: h }; + }, - w = w * this.scaleX + 2 * this.padding; - h = h * this.scaleY + 2 * this.padding; + /* + * @private + */ + _getTransformedDimensions: function(dimensions) { + if (!dimensions) { + dimensions = this._getNonTransformedDimensions(); + } + var transformMatrix = this._calcDimensionsTransformMatrix(); + return fabric.util.transformPoint(dimensions, transformMatrix, true); + }, + + /* + * private + */ + _calculateCurrentDimensions: function(shouldTransform) { + var vpt = this.getViewportTransform(), + dim = this._getTransformedDimensions(), + w = dim.x, h = dim.y; + + w += 2 * this.padding; + h += 2 * this.padding; if (shouldTransform) { return fabric.util.transformPoint(new fabric.Point(w, h), vpt, true); diff --git a/src/mixins/object_origin.mixin.js b/src/mixins/object_origin.mixin.js index 327b4c69..5e05fded 100644 --- a/src/mixins/object_origin.mixin.js +++ b/src/mixins/object_origin.mixin.js @@ -15,18 +15,21 @@ var cx = point.x, cy = point.y; + if (originX !== 'center' || originY !== 'center') { + dim = this._getTransformedDimensions(); + } if (originX === 'left') { - cx = point.x + (this.getWidth() + this.strokeWidth * this.scaleX) / 2; + cx = point.x + dim.x / 2; } else if (originX === 'right') { - cx = point.x - (this.getWidth() + this.strokeWidth * this.scaleX) / 2; + cx = point.x - dim.x / 2; } if (originY === 'top') { - cy = point.y + (this.getHeight() + this.strokeWidth * this.scaleY) / 2; + cy = point.y + dim.y / 2; } else if (originY === 'bottom') { - cy = point.y - (this.getHeight() + this.strokeWidth * this.scaleY) / 2; + cy = point.y - dim.y / 2; } // Apply the reverse rotation to the point (it's already scaled properly) @@ -44,18 +47,21 @@ var x = center.x, y = center.y; + if (originX !== 'center' || originY !== 'center') { + dim = this._getTransformedDimensions(); + } // Get the point coordinates if (originX === 'left') { - x = center.x - (this.getWidth() + this.strokeWidth * this.scaleX) / 2; + x = center.x - dim.x / 2; } else if (originX === 'right') { - x = center.x + (this.getWidth() + this.strokeWidth * this.scaleX) / 2; + x = center.x + dim.x / 2; } if (originY === 'top') { - y = center.y - (this.getHeight() + this.strokeWidth * this.scaleY) / 2; + y = center.y - dim.y / 2; } else if (originY === 'bottom') { - y = center.y + (this.getHeight() + this.strokeWidth * this.scaleY) / 2; + y = center.y + dim.y / 2; } // Apply the rotation to the point (it's already scaled properly) @@ -103,21 +109,24 @@ x, y; if (originX && originY) { + if (originX !== 'center' || originY !== 'center') { + dim = this._getTransformedDimensions(); + } if (originX === 'left') { - x = center.x - (this.getWidth() + this.strokeWidth * this.scaleX) / 2; + x = center.x - dim.x / 2; } else if (originX === 'right') { - x = center.x + (this.getWidth() + this.strokeWidth * this.scaleX) / 2; + x = center.x + dim.x / 2; } else { x = center.x; } if (originY === 'top') { - y = center.y - (this.getHeight() + this.strokeWidth * this.scaleY) / 2; + y = center.y - dim.y / 2; } else if (originY === 'bottom') { - y = center.y + (this.getHeight() + this.strokeWidth * this.scaleY) / 2; + y = center.y + dim.y / 2; } else { y = center.y;