Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-05 12:24:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #2257 from asturur/clean-origins

Browse source 
Clean origins
This commit is contained in:
Juriy Zaytsev 2015-06-09 01:30:00 -04:00
commit 2d38f9eb22
1 changed files with 53 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
src/mixins/object_origin.mixin.js
View file

@ -1,9 +1,42 @@
(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} 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}
*/
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 (offsetX || offsetY) {
dim = this._getTransformedDimensions();
x = point.x + offsetX * dim.x;
y = point.y + offsetY * dim.y;
}
return new fabric.Point(x, y);
},
/**
* 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
@ -12,29 +45,11 @@
* @return {fabric.Point}
*/
translateToCenterPoint: function(point, originX, originY) {
var cx = point.x,
cy = point.y,
dim;
if (originX !== 'center' || originY !== 'center') {
dim = this._getTransformedDimensions();
var p = this.translateToGivenOrigin(point, originX, originY, 'center', 'center');
if (this.angle) {
return fabric.util.rotatePoint(p, point, degreesToRadians(this.angle));
}
if (originX === 'left') {
cx = point.x + dim.x / 2;
}
else if (originX === 'right') {
cx = point.x - dim.x / 2;
}
if (originY === 'top') {
cy = point.y + dim.y / 2;
}
else if (originY === 'bottom') {
cy = point.y - dim.y / 2;
}
// 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;
},
/**
@ -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();
var p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY);
if (this.angle) {
return fabric.util.rotatePoint(p, center, degreesToRadians(this.angle));
}
// 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;
}
// 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;
},
/**
@ -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);
},
/**
@ -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;