Skip to content

Commit

Permalink
Merge pull request #2257 from asturur/clean-origins
Browse files Browse the repository at this point in the history 
Clean origins
  • Loading branch information
@kangax
kangax committed Jun 9, 2015
2 parents 9b20770 + b22ae4f commit 2d38f9e
Showing 1 changed file with 52 additions and 93 deletions.
145 changes: 52 additions & 93 deletions src/mixins/object_origin.mixin.js
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,55 @@
(function() {

var degreesToRadians = fabric.util.degreesToRadians;
var degreesToRadians = fabric.util.degreesToRadians,
originXOffset = {
left: -0.5,
center: 0,
right: 0.5
},
originYOffset = {
top: -0.5,
center: 0,
bottom: 0.5
};

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

/**
* Translates the coordinates from origin to center coordinates (based on the object's dimensions)
* @param {fabric.Point} point The point which corresponds to the originX and originY params
* @param {String} originX Horizontal origin: 'left', 'center' or 'right'
* @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
* @param {String} fromOriginX Horizontal origin: 'left', 'center' or 'right'
* @param {String} fromOriginY Vertical origin: 'top', 'center' or 'bottom'
* @param {String} toOriginX Horizontal origin: 'left', 'center' or 'right'
* @param {String} toOriginY Vertical origin: 'top', 'center' or 'bottom'
* @return {fabric.Point}
*/
translateToCenterPoint: function(point, originX, originY) {
var cx = point.x,
cy = point.y,
translateToGivenOrigin: function(point, fromOriginX, fromOriginY, toOriginX, toOriginY) {
var x = point.x,
y = point.y,
offsetX = originXOffset[toOriginX] - originXOffset[fromOriginX],
offsetY = originYOffset[toOriginY] - originYOffset[fromOriginY],
dim;

if (originX !== 'center' || originY !== 'center') {
if (offsetX || offsetY) {
dim = this._getTransformedDimensions();
x = point.x + offsetX * dim.x;
y = point.y + offsetY * dim.y;
}
if (originX === 'left') {
cx = point.x + dim.x / 2;
}
else if (originX === 'right') {
cx = point.x - dim.x / 2;
}
return new fabric.Point(x, y);
},

if (originY === 'top') {
cy = point.y + dim.y / 2;
}
else if (originY === 'bottom') {
cy = point.y - dim.y / 2;
/**
* Translates the coordinates from origin to center coordinates (based on the object's dimensions)
* @param {fabric.Point} point The point which corresponds to the originX and originY params
* @param {String} originX Horizontal origin: 'left', 'center' or 'right'
* @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
* @return {fabric.Point}
*/
translateToCenterPoint: function(point, originX, originY) {
var p = this.translateToGivenOrigin(point, originX, originY, 'center', 'center');
if (this.angle) {
return fabric.util.rotatePoint(p, point, degreesToRadians(this.angle));
}

// Apply the reverse rotation to the point (it's already scaled properly)
return fabric.util.rotatePoint(new fabric.Point(cx, cy), point, degreesToRadians(this.angle));
return p;
},

/**
Expand All @@ -45,29 +60,11 @@
* @return {fabric.Point}
*/
translateToOriginPoint: function(center, originX, originY) {
var x = center.x,
y = center.y,
dim;

if (originX !== 'center' || originY !== 'center') {
dim = this._getTransformedDimensions();
}
// Get the point coordinates
if (originX === 'left') {
x = center.x - dim.x / 2;
}
else if (originX === 'right') {
x = center.x + dim.x / 2;
}
if (originY === 'top') {
y = center.y - dim.y / 2;
}
else if (originY === 'bottom') {
y = center.y + dim.y / 2;
var p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY);
if (this.angle) {
return fabric.util.rotatePoint(p, center, degreesToRadians(this.angle));
}

// Apply the rotation to the point (it's already scaled properly)
return fabric.util.rotatePoint(new fabric.Point(x, y), center, degreesToRadians(this.angle));
return p;
},

/**
Expand Down Expand Up @@ -108,39 +105,20 @@
*/
toLocalPoint: function(point, originX, originY) {
var center = this.getCenterPoint(),
x, y, dim;
p, dim, p2;

if (originX && originY) {
if (originX !== 'center' || originY !== 'center') {
dim = this._getTransformedDimensions();
}
if (originX === 'left') {
x = center.x - dim.x / 2;
}
else if (originX === 'right') {
x = center.x + dim.x / 2;
}
else {
x = center.x;
}

if (originY === 'top') {
y = center.y - dim.y / 2;
}
else if (originY === 'bottom') {
y = center.y + dim.y / 2;
}
else {
y = center.y;
}
p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY);
}
else {
x = this.left;
y = this.top;
p = new fabric.Point(this.left, this.top);
}

return fabric.util.rotatePoint(new fabric.Point(point.x, point.y), center, -degreesToRadians(this.angle))
.subtractEquals(new fabric.Point(x, y));
p2 = new fabric.Point(point.x, point.y);
if (this.angle) {
p2 = fabric.util.rotatePoint(p2, center, -degreesToRadians(this.angle));
}
return p2.subtractEquals(p);
},

/**
Expand Down Expand Up @@ -179,28 +157,9 @@
xFull = Math.cos(angle) * hypotFull,
yFull = Math.sin(angle) * hypotFull;

if (this.originX === 'center' && to === 'left' ||
this.originX === 'right' && to === 'center') {
// move half left
this.left -= xHalf;
this.top -= yHalf;
}
else if (this.originX === 'left' && to === 'center' ||
this.originX === 'center' && to === 'right') {
// move half right
this.left += xHalf;
this.top += yHalf;
}
else if (this.originX === 'left' && to === 'right') {
// move full right
this.left += xFull;
this.top += yFull;
}
else if (this.originX === 'right' && to === 'left') {
// move full left
this.left -= xFull;
this.top -= yFull;
}
//TODO: this function does not consider mixed situation like top, center.
this.left += xFull * (originXOffset[to] - originXOffset[this.originX]);
this.top += yFull * (originXOffset[to] - originXOffset[this.originX]);

this.setCoords();
this.originX = to;
Expand Down

0 comments on commit 2d38f9e

Please sign in to comment.