Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Handle group transformation with skew and rotate + scale #2549

Merged
merged 3 commits into from
Oct 24, 2015
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
first changes to group transform handling
  • Loading branch information
asturur committed Oct 14, 2015
commit ff79ab1aca088a32c434c1b596c2473d37b1325e
38 changes: 31 additions & 7 deletions src/mixins/object_geometry.mixin.js
Original file line number Diff line number Diff line change
@@ -9,7 +9,8 @@
];
}

var degreesToRadians = fabric.util.degreesToRadians;
var degreesToRadians = fabric.util.degreesToRadians,
multiplyMatrices = fabric.util.multiplyTransformMatrices

fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {

@@ -346,12 +347,35 @@
return this;
},

_calcDimensionsTransformMatrix: function(skewX, skewY) {
var skewMatrixX = [1, 0, Math.tan(degreesToRadians(skewX)), 1, 0, 0],
skewMatrixY = [1, Math.tan(degreesToRadians(skewY)), 0, 1, 0, 0],
scaleMatrix = [this.scaleX, 0, 0, this.scaleY, 0, 0],
m = fabric.util.multiplyTransformMatrices(scaleMatrix, skewMatrixX, true);
return fabric.util.multiplyTransformMatrices(m, skewMatrixY, true);
_calcRotateMatrix: function() {
if (this.angle) {
var theta = degreesToRadians(this.angle), cos = Math.cos(theta), sin = Math.sin(theta);
return [cos, sin, -sin, cos, 0, 0];
}
return [1, 0, 0, 1, 0, 0];
},

calcTransformMatrix: function() {
var center = this.getCenterPoint(),
translateMatrix = [1, 0, 0, 1, center.x, center.y],
rotateMatrix = this._calcRotateMatrix(),
dimensionMatrix = this._calcDimensionsTransformMatrix(this.skewX, this.skewY, true),
matrix = this.group ? this.group.calcTransformMatrix() : [1, 0, 0, 1, 0, 0];
matrix = multiplyMatrices(matrix, translateMatrix);
matrix = multiplyMatrices(matrix, rotateMatrix);
matrix = multiplyMatrices(matrix, dimensionMatrix);
console.log(matrix);
return matrix;
},

_calcDimensionsTransformMatrix: function(skewX, skewY, flipping) {
var skewMatrixX = [1, 0, Math.tan(degreesToRadians(skewX)), 1],
skewMatrixY = [1, Math.tan(degreesToRadians(skewY)), 0, 1],
scaleX = this.scaleX * (flipping && this.flipX ? -1 : 1),
scaleY = this.scaleY * (flipping && this.flipY ? -1 : 1),
scaleMatrix = [scaleX, 0, 0, scaleY],
m = multiplyMatrices(scaleMatrix, skewMatrixX, true);
return multiplyMatrices(m, skewMatrixY, true);
}
});
})();
89 changes: 12 additions & 77 deletions src/shapes/group.class.js
Original file line number Diff line number Diff line change
@@ -174,7 +174,7 @@
* @chainable
*/
removeWithUpdate: function(object) {
this._moveFlippedObject(object);
//this._moveFlippedObject(object);
this._restoreObjectsState();

// since _restoreObjectsState set objects inactive
@@ -325,73 +325,24 @@
* @return {fabric.Object} transformedObject
*/
realizeTransform: function(object) {
this._moveFlippedObject(object);
//this._moveFlippedObject(object);
this._setObjectPosition(object);
return object;
},

/**
* Moves a flipped object to the position where it's displayed
* @private
* @param {fabric.Object} object
* @return {fabric.Group} thisArg
*/
_moveFlippedObject: function(object) {
var oldOriginX = object.get('originX'),
oldOriginY = object.get('originY'),
center = object.getCenterPoint();

object.set({
originX: 'center',
originY: 'center',
left: center.x,
top: center.y
});

this._toggleFlipping(object);

var newOrigin = object.getPointByOrigin(oldOriginX, oldOriginY);

object.set({
originX: oldOriginX,
originY: oldOriginY,
left: newOrigin.x,
top: newOrigin.y
});

return this;
},

/**
* @private
*/
_toggleFlipping: function(object) {
if (this.flipX) {
object.toggle('flipX');
object.set('left', -object.get('left'));
object.setAngle(-object.getAngle());
}
if (this.flipY) {
object.toggle('flipY');
object.set('top', -object.get('top'));
object.setAngle(-object.getAngle());
}
},

/**
* Restores original state of a specified object in group
* @private
* @param {fabric.Object} object
* @return {fabric.Group} thisArg
*/
_restoreObjectState: function(object) {
this._setObjectPosition(object);

this._setObjectPosition(object);
object.setCoords();
object.hasControls = object.__origHasControls;
delete object.__origHasControls;
object.set('active', false);
object.setCoords();
delete object.group;

return this;
@@ -401,30 +352,14 @@
* @private
*/
_setObjectPosition: function(object) {
var center = this.getCenterPoint(),
rotated = this._getRotatedLeftTop(object);

object.set({
angle: object.getAngle() + this.getAngle(),
left: center.x + rotated.left,
top: center.y + rotated.top,
scaleX: object.get('scaleX') * this.get('scaleX'),
scaleY: object.get('scaleY') * this.get('scaleY')
});
},

/**
* @private
*/
_getRotatedLeftTop: function(object) {
var groupAngle = this.getAngle() * (Math.PI / 180);
return {
left: (-Math.sin(groupAngle) * object.getTop() * this.get('scaleY') +
Math.cos(groupAngle) * object.getLeft() * this.get('scaleX')),

top: (Math.cos(groupAngle) * object.getTop() * this.get('scaleY') +
Math.sin(groupAngle) * object.getLeft() * this.get('scaleX'))
};
var matrix = object.calcTransformMatrix(),
options = fabric.util.qrDecompose(matrix),
center = new fabric.Point(options.translateX, options.translateY);
console.log(matrix, options);
delete options.translateX;
delete options.translateY;
object.set(options);
object.setPositionByOrigin(center, 'center', 'center');
},

/**
@@ -433,7 +368,7 @@
* @chainable
*/
destroy: function() {
this._objects.forEach(this._moveFlippedObject, this);
//this._objects.forEach(this._moveFlippedObject, this);
return this._restoreObjectsState();
},

8 changes: 5 additions & 3 deletions src/util/misc.js
Original file line number Diff line number Diff line change
@@ -505,8 +505,8 @@
* @return {Object} Components of transform
*/
qrDecompose: function(a) {
var angle = atan(a[0] / a[1]),
denom = pow(a[0]) + pow(a[1]),
var angle = atan(a[1] / a[0]),
denom = pow(a[0], 2) + pow(a[1], 2),
scaleX = sqrt(denom),
scaleY = (a[0] * a[3] - a[2] * a [1]) / scaleX,
skewX = atan((a[0] * a[2] + a[1] * a [3]) / denom);
@@ -515,7 +515,9 @@
scaleX: scaleX,
scaleY: scaleY,
skewX: skewX / PiBy180,
skewY: 0
skewY: 0,
translateX: a[4],
translateY: a[5]
};
},