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

add object scaling function (#3134)

Browse source 
* add object scaling function

* Update object.class.js
This commit is contained in:
Andrea Bogazzi 2016-07-30 12:04:38 -04:00 committed by GitHub
parent 9e5f3ab7b9
commit 948019f622
6 changed files with 111 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
dist/fabric.js vendored
View file

@ -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
*/
@ -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;
},
/**
@ -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];
@ -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;

8
dist/fabric.min.js vendored
View file

File diff suppressed because one or more lines are too long

BIN
dist/fabric.min.js.gz vendored
View file

Binary file not shown.

22
dist/fabric.require.js vendored
View file

@ -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]);
@ -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) {
@ -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 {

23
src/shapes/object.class.js
View file

@ -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
*/
@ -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;
},
/**

51
test/unit/object.js
View file

@ -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);
});
})();