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

Account for bounding box in scaleToWidth/scaleToHeight. Fix #271. Version 0.9.12.

Browse source
This commit is contained in:
kangax 2012-10-08 19:35:37 +02:00
parent 4ac8b68d78
commit 999f7f5231
7 changed files with 41 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
HEADER.js
View file

@ -1,6 +1,6 @@
/*! Fabric.js Copyright 2008-2012, Printio (Juriy Zaytsev, Maxim Chernyak) */
var fabric = fabric || { version: "0.9.11" };
var fabric = fabric || { version: "0.9.12" };
if (typeof exports != 'undefined') {
exports.fabric = fabric;

17
dist/all.js vendored
View file

@ -1,7 +1,7 @@
/* build: `node build.js modules=ALL` */
/*! Fabric.js Copyright 2008-2012, Printio (Juriy Zaytsev, Maxim Chernyak) */
var fabric = fabric || { version: "0.9.11" };
var fabric = fabric || { version: "0.9.12" };
if (typeof exports != 'undefined') {
exports.fabric = fabric;
@ -8070,29 +8070,34 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
scale: function(value) {
this.scaleX = value;
this.scaleY = value;
this.setCoords();
return this;
},
/**
* Scales an object to a given width (scaling by x/y equally)
* Scales an object to a given width, with respect to bounding box (scaling by x/y equally)
* @method scaleToWidth
* @param value {Number} new width value
* @return {fabric.Object} thisArg
* @chainable
*/
scaleToWidth: function(value) {
return this.scale(value / this.width);
// adjust to bounding rect factor so that rotated shapes would fit as well
var boundingRectFactor = this.getBoundingRectWidth() / this.getWidth();
return this.scale(value / this.width / boundingRectFactor);
},
/**
* Scales an object to a given height (scaling by x/y equally)
* Scales an object to a given height, with respect to bounding box (scaling by x/y equally)
* @method scaleToHeight
* @param value {Number} new height value
* @return {fabric.Object} thisArg
* @chainable
*/
scaleToHeight: function(value) {
return this.scale(value / this.height);
// adjust to bounding rect factor so that rotated shapes would fit as well
var boundingRectFactor = this.getBoundingRectHeight() / this.getHeight();
return this.scale(value / this.height / boundingRectFactor);
},
/**
@ -8221,6 +8226,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
* @return {Number} width value
*/
getBoundingRectWidth: function() {
this.oCoords || this.setCoords();
var xCoords = [this.oCoords.tl.x, this.oCoords.tr.x, this.oCoords.br.x, this.oCoords.bl.x];
var minX = fabric.util.array.min(xCoords);
var maxX = fabric.util.array.max(xCoords);
@ -8233,6 +8239,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
* @return {Number} height value
*/
getBoundingRectHeight: function() {
this.oCoords || this.setCoords();
var yCoords = [this.oCoords.tl.y, this.oCoords.tr.y, this.oCoords.br.y, this.oCoords.bl.y];
var minY = fabric.util.array.min(yCoords);
var maxY = fabric.util.array.max(yCoords);

4
dist/all.min.js vendored
View file

File diff suppressed because one or more lines are too long

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

Binary file not shown.

2
package.json
View file

@ -1,7 +1,7 @@
{
"name": "fabric",
"description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
"version": "0.9.11",
"version": "0.9.12",
"author": "Juriy Zaytsev <kangax@gmail.com>",
"keywords": ["canvas", "graphic", "graphics", "SVG", "node-canvas", "parser", "HTML5", "object model"],
"repository": "git://github.com/kangax/fabric.js",

15
src/object.class.js
View file

@ -559,29 +559,34 @@
scale: function(value) {
this.scaleX = value;
this.scaleY = value;
this.setCoords();
return this;
},
/**
* Scales an object to a given width (scaling by x/y equally)
* Scales an object to a given width, with respect to bounding box (scaling by x/y equally)
* @method scaleToWidth
* @param value {Number} new width value
* @return {fabric.Object} thisArg
* @chainable
*/
scaleToWidth: function(value) {
return this.scale(value / this.width);
// adjust to bounding rect factor so that rotated shapes would fit as well
var boundingRectFactor = this.getBoundingRectWidth() / this.getWidth();
return this.scale(value / this.width / boundingRectFactor);
},
/**
* Scales an object to a given height (scaling by x/y equally)
* Scales an object to a given height, with respect to bounding box (scaling by x/y equally)
* @method scaleToHeight
* @param value {Number} new height value
* @return {fabric.Object} thisArg
* @chainable
*/
scaleToHeight: function(value) {
return this.scale(value / this.height);
// adjust to bounding rect factor so that rotated shapes would fit as well
var boundingRectFactor = this.getBoundingRectHeight() / this.getHeight();
return this.scale(value / this.height / boundingRectFactor);
},
/**
@ -710,6 +715,7 @@
* @return {Number} width value
*/
getBoundingRectWidth: function() {
this.oCoords || this.setCoords();
var xCoords = [this.oCoords.tl.x, this.oCoords.tr.x, this.oCoords.br.x, this.oCoords.bl.x];
var minX = fabric.util.array.min(xCoords);
var maxX = fabric.util.array.max(xCoords);
@ -722,6 +728,7 @@
* @return {Number} height value
*/
getBoundingRectHeight: function() {
this.oCoords || this.setCoords();
var yCoords = [this.oCoords.tl.y, this.oCoords.tr.y, this.oCoords.br.y, this.oCoords.bl.y];
var minY = fabric.util.array.min(yCoords);
var maxY = fabric.util.array.max(yCoords);

14
test/unit/object.js
View file

@ -296,6 +296,20 @@
equal(cObj.get('scaleY'), 100/560);
});
test('scaleToWidth on rotated object', function() {
var obj = new fabric.Object({ height: 100, width: 100 });
obj.rotate(45);
obj.scaleToWidth(200);
equal(Math.round(obj.getBoundingRectWidth()), 200);
});
test('scaleToHeight on rotated object', function() {
var obj = new fabric.Object({ height: 100, width: 100 });
obj.rotate(45);
obj.scaleToHeight(300);
equal(Math.round(obj.getBoundingRectHeight()), 300);
});
test('setOpacity', function() {
var cObj = new fabric.Object();
ok(typeof cObj.setOpacity == 'function');