Skip to content

Commit

Permalink
add object scaling function (#3134)
Browse files Browse the repository at this point in the history 
* add object scaling function

* Update object.class.js
  • Loading branch information
@asturur
asturur authored Jul 30, 2016
1 parent 9e5f3ab commit 948019f
Show file tree
Hide file tree
Showing 6 changed files with 111 additions and 19 deletions.
26 changes: 20 additions & 6 deletions dist/fabric.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12108,6 +12108,19 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
return this[property];
},

/**
* Return the object scale factor counting also the group scaling
*/
getObjectScaling: function() {
var scaleX = this.scaleX, scaleY = this.scaleY;
if (this.group) {
var scaling = this.group.getObjectScaling();
scaleX *= scaling.scaleX;
scaleY *= scaling.scaleY;
}
return { scaleX: scaleX, scaleY: scaleY };
},

/**
* @private
*/
Expand Down Expand Up @@ -12351,15 +12364,16 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
}

var multX = (this.canvas && this.canvas.viewportTransform[0]) || 1,
multY = (this.canvas && this.canvas.viewportTransform[3]) || 1;
multY = (this.canvas && this.canvas.viewportTransform[3]) || 1,
scaling = this.getObjectScaling();
if (this.canvas && this.canvas._isRetinaScaling()) {
multX *= fabric.devicePixelRatio;
multY *= fabric.devicePixelRatio;
}
ctx.shadowColor = this.shadow.color;
ctx.shadowBlur = this.shadow.blur * (multX + multY) * (this.scaleX + this.scaleY) / 4;
ctx.shadowOffsetX = this.shadow.offsetX * multX * this.scaleX;
ctx.shadowOffsetY = this.shadow.offsetY * multY * this.scaleY;
ctx.shadowBlur = this.shadow.blur * (multX + multY) * (scaling.scaleX + scaling.scaleY) / 4;
ctx.shadowOffsetX = this.shadow.offsetX * multX * scaling.scaleX;
ctx.shadowOffsetY = this.shadow.offsetY * multY * scaling.scaleY;
},

/**
Expand Down Expand Up @@ -12872,7 +12886,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
translateToGivenOrigin: function(point, fromOriginX, fromOriginY, toOriginX, toOriginY) {
var x = point.x,
y = point.y,
offsetX, offsetY;
offsetX, offsetY, dim;

if (typeof fromOriginX === 'string') {
fromOriginX = originXOffset[fromOriginX];
Expand Down Expand Up @@ -13041,7 +13055,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
offsetFrom = this.originX - 0.5;
}
if (typeof to === 'string') {
offsetTo = originXOffset[to]
offsetTo = originXOffset[to];
}
else {
offsetTo = to - 0.5;
Expand Down
8 changes: 4 additions & 4 deletions dist/fabric.min.js
View file

Large diffs are not rendered by default.

Binary file modified dist/fabric.min.js.gz
View file
Binary file not shown.
22 changes: 17 additions & 5 deletions dist/fabric.require.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5870,6 +5870,18 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
get: function(property) {
return this[property];
},
getObjectScaling: function() {
var scaleX = this.scaleX, scaleY = this.scaleY;
if (this.group) {
var scaling = this.group.getObjectScaling();
scaleX *= scaling.scaleX;
scaleY *= scaling.scaleY;
}
return {
scaleX: scaleX,
scaleY: scaleY
};
},
_setObject: function(obj) {
for (var prop in obj) {
this._set(prop, obj[prop]);
Expand Down Expand Up @@ -6005,15 +6017,15 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
if (!this.shadow) {
return;
}
var multX = this.canvas && this.canvas.viewportTransform[0] || 1, multY = this.canvas && this.canvas.viewportTransform[3] || 1;
var multX = this.canvas && this.canvas.viewportTransform[0] || 1, multY = this.canvas && this.canvas.viewportTransform[3] || 1, scaling = this.getObjectScaling();
if (this.canvas && this.canvas._isRetinaScaling()) {
multX *= fabric.devicePixelRatio;
multY *= fabric.devicePixelRatio;
}
ctx.shadowColor = this.shadow.color;
ctx.shadowBlur = this.shadow.blur * (multX + multY) * (this.scaleX + this.scaleY) / 4;
ctx.shadowOffsetX = this.shadow.offsetX * multX * this.scaleX;
ctx.shadowOffsetY = this.shadow.offsetY * multY * this.scaleY;
ctx.shadowBlur = this.shadow.blur * (multX + multY) * (scaling.scaleX + scaling.scaleY) / 4;
ctx.shadowOffsetX = this.shadow.offsetX * multX * scaling.scaleX;
ctx.shadowOffsetY = this.shadow.offsetY * multY * scaling.scaleY;
},
_removeShadow: function(ctx) {
if (!this.shadow) {
Expand Down Expand Up @@ -6225,7 +6237,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
};
fabric.util.object.extend(fabric.Object.prototype, {
translateToGivenOrigin: function(point, fromOriginX, fromOriginY, toOriginX, toOriginY) {
var x = point.x, y = point.y, offsetX, offsetY;
var x = point.x, y = point.y, offsetX, offsetY, dim;
if (typeof fromOriginX === "string") {
fromOriginX = originXOffset[fromOriginX];
} else {
Expand Down
23 changes: 19 additions & 4 deletions src/shapes/object.class.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -951,6 +951,20 @@
return this[property];
},

/**
* Return the object scale factor counting also the group scaling
* @return {Object} object with scaleX and scaleY properties
*/
getObjectScaling: function() {
var scaleX = this.scaleX, scaleY = this.scaleY;
if (this.group) {
var scaling = this.group.getObjectScaling();
scaleX *= scaling.scaleX;
scaleY *= scaling.scaleY;
}
return { scaleX: scaleX, scaleY: scaleY };
},

/**
* @private
*/
Expand Down Expand Up @@ -1194,15 +1208,16 @@
}

var multX = (this.canvas && this.canvas.viewportTransform[0]) || 1,
multY = (this.canvas && this.canvas.viewportTransform[3]) || 1;
multY = (this.canvas && this.canvas.viewportTransform[3]) || 1,
scaling = this.getObjectScaling();
if (this.canvas && this.canvas._isRetinaScaling()) {
multX *= fabric.devicePixelRatio;
multY *= fabric.devicePixelRatio;
}
ctx.shadowColor = this.shadow.color;
ctx.shadowBlur = this.shadow.blur * (multX + multY) * (this.scaleX + this.scaleY) / 4;
ctx.shadowOffsetX = this.shadow.offsetX * multX * this.scaleX;
ctx.shadowOffsetY = this.shadow.offsetY * multY * this.scaleY;
ctx.shadowBlur = this.shadow.blur * (multX + multY) * (scaling.scaleX + scaling.scaleY) / 4;
ctx.shadowOffsetX = this.shadow.offsetX * multX * scaling.scaleX;
ctx.shadowOffsetY = this.shadow.offsetY * multY * scaling.scaleY;
},

/**
Expand Down
51 changes: 51 additions & 0 deletions test/unit/object.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1427,4 +1427,55 @@ test('toDataURL & reference to canvas', function() {
equal(typeof deserializedObject.clipTo, 'function');
});

test('getObjectScale', function() {
var object = new fabric.Object({ scaleX: 3, scaleY : 2});
var objectScale = object.getObjectScaling();
deepEqual(objectScale, {scaleX: object.scaleX, scaleY: object.scaleY});
});

test('getObjectScale in group', function() {
var object = new fabric.Object({ scaleX: 3, scaleY : 2});
var group = new fabric.Group();
group.scaleX = 2;
group.scaleY = 2;
object.group = group;
var objectScale = object.getObjectScaling();
console.log(objectScale);
deepEqual(objectScale, {
scaleX: object.scaleX * group.scaleX,
scaleY: object.scaleY * group.scaleY
});
});

test('_setShadow', function(){
var el = fabric.document.createElement('canvas');
el.width = 600; el.height = 600;
var canvas = fabric.isLikelyNode ? fabric.createCanvasForNode() : new fabric.StaticCanvas(el);
var context = canvas.contextContainer;
var object = new fabric.Object({ scaleX: 1, scaleY : 1});
var group = new fabric.Group();
group.scaleX = 2;
group.scaleY = 2;
object.setShadow({
color: 'red',
blur: 10,
offsetX: 5,
offsetY: 15
});
object._setShadow(context);
equal(context.shadowOffsetX, object.shadow.offsetX);
equal(context.shadowOffsetY, object.shadow.offsetY);
equal(context.shadowBlur, object.shadow.blur);
object.scaleX = 2;
object.scaleY = 3;
object._setShadow(context);
equal(context.shadowOffsetX, object.shadow.offsetX * object.scaleX);
equal(context.shadowOffsetY, object.shadow.offsetY * object.scaleY);
equal(context.shadowBlur, object.shadow.blur * (object.scaleX + object.scaleY) / 2);
object.group = group;
object._setShadow(context);
equal(context.shadowOffsetX, object.shadow.offsetX * object.scaleX * group.scaleX);
equal(context.shadowOffsetY, object.shadow.offsetY * object.scaleY * group.scaleY);
equal(context.shadowBlur, object.shadow.blur * (object.scaleX * group.scaleX + object.scaleY * group.scaleY) / 2);
});
})();

0 comments on commit 948019f

Please sign in to comment.