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

Output rx/ry in object, JSON, and SVG representations of fabric.Rect.

Browse source
This commit is contained in:
kangax 2012-05-12 14:30:23 +04:00
parent 8a84affd6c
commit 35fcc980da
6 changed files with 89 additions and 63 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, Bitsonnet (Juriy Zaytsev, Maxim Chernyak) */
var fabric = fabric || { version: "0.8.3" };
var fabric = fabric || { version: "0.8.4" };
if (typeof exports != 'undefined') {
exports.fabric = fabric;

73
dist/all.js vendored
View file

@ -1,6 +1,6 @@
/*! Fabric.js Copyright 2008-2012, Bitsonnet (Juriy Zaytsev, Maxim Chernyak) */
var fabric = fabric || { version: "0.8.3" };
var fabric = fabric || { version: "0.8.4" };
if (typeof exports != 'undefined') {
exports.fabric = fabric;
@ -8769,28 +8769,28 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
//= require "object.class"
(function(global) {
"use strict";
var fabric = global.fabric || (global.fabric = { });
if (fabric.Rect) {
console.warn('fabric.Rect is already defined');
return;
}
/**
/**
* @class Rect
* @extends fabric.Object
*/
fabric.Rect = fabric.util.createClass(fabric.Object, /** @scope fabric.Rect.prototype */ {
/**
* @property
* @type String
*/
type: 'rect',
/**
* @property
* @type Object
@ -8799,7 +8799,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
rx: 0,
ry: 0
},
/**
* Constructor
* @method initialize
@ -8811,9 +8811,9 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
this.callSuper('initialize', options);
this._initRxRy();
},
/**
* Creates `stateProperties` list on an instance, and adds `fabric.Rect` -specific ones to it
* Creates `stateProperties` list on an instance, and adds `fabric.Rect` -specific ones to it
* (such as "rx", "ry", etc.)
* @private
* @method _initStateProperties
@ -8821,7 +8821,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
_initStateProperties: function() {
this.stateProperties = this.stateProperties.concat(['rx', 'ry']);
},
/**
* @private
* @method _initRxRy
@ -8834,27 +8834,27 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
this.rx = this.ry;
}
},
/**
* @private
* @method _render
* @param ctx {CanvasRenderingContext2D} context to render on
*/
_render: function(ctx) {
_render: function(ctx) {
var rx = this.rx || 0,
ry = this.ry || 0,
x = -this.width / 2,
y = -this.height / 2,
w = this.width,
h = this.height;
ctx.beginPath();
ctx.globalAlpha *= this.opacity;
if (this.group) {
ctx.translate(this.x || 0, this.y || 0);
}
ctx.moveTo(x+rx, y);
ctx.lineTo(x+w-rx, y);
ctx.bezierCurveTo(x+w, y, x+w, y+ry, x+w, y+ry);
@ -8865,7 +8865,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
ctx.lineTo(x,y+ry);
ctx.bezierCurveTo(x,y,x+rx,y,x+rx,y);
ctx.closePath();
if (this.fill) {
ctx.fill();
}
@ -8873,7 +8873,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
ctx.stroke();
}
},
// since our coordinate system differs from that of SVG
_normalizeLeftTopProperties: function(parsedAttributes) {
if (parsedAttributes.left) {
@ -8886,7 +8886,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
this.set('y', parsedAttributes.top || 0);
return this;
},
/**
* @method complexity
* @return {Number} complexity
@ -8894,7 +8894,19 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
complexity: function() {
return 1;
},
/**
* Returns object representation of an instance
* @method toObject
* @return {Object} object representation of an instance
*/
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'), {
rx: this.get('rx') || 0,
ry: this.get('ry') || 0
});
},
/**
* Returns svg representation of an instance
* @method toSVG
@ -8903,21 +8915,22 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
toSVG: function() {
return '<rect ' +
'x="' + (-1 * this.width / 2) + '" y="' + (-1 * this.height / 2) + '" ' +
'rx="' + this.get('rx') + '" ry="' + this.get('ry') + '" ' +
'width="' + this.width + '" height="' + this.height + '" ' +
'style="' + this.getSvgStyles() + '" ' +
'transform="' + this.getSvgTransform() + '" ' +
'/>';
}
});
// TODO (kangax): implement rounded rectangles (both parsing and rendering)
/**
* List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`)
* @static
*/
fabric.Rect.ATTRIBUTE_NAMES = 'x y width height rx ry fill fill-opacity opacity stroke stroke-width transform'.split(' ');
/**
* @private
*/
@ -8926,7 +8939,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
attributes.top = attributes.top || 0;
return attributes;
}
/**
* Returns fabric.Rect instance from an SVG element
* @static
@ -8939,16 +8952,16 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
if (!element) {
return null;
}
var parsedAttributes = fabric.parseAttributes(element, fabric.Rect.ATTRIBUTE_NAMES);
parsedAttributes = _setDefaultLeftTopValues(parsedAttributes);
var rect = new fabric.Rect(fabric.util.object.extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes));
rect._normalizeLeftTopProperties(parsedAttributes);
return rect;
};
/**
* Returns fabric.Rect instance from an object representation
* @static
@ -8959,7 +8972,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
fabric.Rect.fromObject = function(object) {
return new fabric.Rect(object);
};
})(typeof exports != 'undefined' ? exports : this);
//= require "object.class"

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.8.3",
"version": "0.8.4",
"author": "Juriy Zaytsev <kangax@gmail.com>",
"keywords": ["canvas", "graphic", "graphics", "SVG", "node-canvas", "parser", "HTML5", "object model"],
"repository": "git://github.com/kangax/fabric.js",

71
src/rect.class.js
View file

@ -1,28 +1,28 @@
//= require "object.class"
(function(global) {
"use strict";
var fabric = global.fabric || (global.fabric = { });
if (fabric.Rect) {
console.warn('fabric.Rect is already defined');
return;
}
/**
/**
* @class Rect
* @extends fabric.Object
*/
fabric.Rect = fabric.util.createClass(fabric.Object, /** @scope fabric.Rect.prototype */ {
/**
* @property
* @type String
*/
type: 'rect',
/**
* @property
* @type Object
@ -31,7 +31,7 @@
rx: 0,
ry: 0
},
/**
* Constructor
* @method initialize
@ -43,9 +43,9 @@
this.callSuper('initialize', options);
this._initRxRy();
},
/**
* Creates `stateProperties` list on an instance, and adds `fabric.Rect` -specific ones to it
* Creates `stateProperties` list on an instance, and adds `fabric.Rect` -specific ones to it
* (such as "rx", "ry", etc.)
* @private
* @method _initStateProperties
@ -53,7 +53,7 @@
_initStateProperties: function() {
this.stateProperties = this.stateProperties.concat(['rx', 'ry']);
},
/**
* @private
* @method _initRxRy
@ -66,27 +66,27 @@
this.rx = this.ry;
}
},
/**
* @private
* @method _render
* @param ctx {CanvasRenderingContext2D} context to render on
*/
_render: function(ctx) {
_render: function(ctx) {
var rx = this.rx || 0,
ry = this.ry || 0,
x = -this.width / 2,
y = -this.height / 2,
w = this.width,
h = this.height;
ctx.beginPath();
ctx.globalAlpha *= this.opacity;
if (this.group) {
ctx.translate(this.x || 0, this.y || 0);
}
ctx.moveTo(x+rx, y);
ctx.lineTo(x+w-rx, y);
ctx.bezierCurveTo(x+w, y, x+w, y+ry, x+w, y+ry);
@ -97,7 +97,7 @@
ctx.lineTo(x,y+ry);
ctx.bezierCurveTo(x,y,x+rx,y,x+rx,y);
ctx.closePath();
if (this.fill) {
ctx.fill();
}
@ -105,7 +105,7 @@
ctx.stroke();
}
},
// since our coordinate system differs from that of SVG
_normalizeLeftTopProperties: function(parsedAttributes) {
if (parsedAttributes.left) {
@ -118,7 +118,7 @@
this.set('y', parsedAttributes.top || 0);
return this;
},
/**
* @method complexity
* @return {Number} complexity
@ -126,7 +126,19 @@
complexity: function() {
return 1;
},
/**
* Returns object representation of an instance
* @method toObject
* @return {Object} object representation of an instance
*/
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'), {
rx: this.get('rx') || 0,
ry: this.get('ry') || 0
});
},
/**
* Returns svg representation of an instance
* @method toSVG
@ -135,21 +147,22 @@
toSVG: function() {
return '<rect ' +
'x="' + (-1 * this.width / 2) + '" y="' + (-1 * this.height / 2) + '" ' +
'rx="' + this.get('rx') + '" ry="' + this.get('ry') + '" ' +
'width="' + this.width + '" height="' + this.height + '" ' +
'style="' + this.getSvgStyles() + '" ' +
'transform="' + this.getSvgTransform() + '" ' +
'/>';
}
});
// TODO (kangax): implement rounded rectangles (both parsing and rendering)
/**
* List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`)
* @static
*/
fabric.Rect.ATTRIBUTE_NAMES = 'x y width height rx ry fill fill-opacity opacity stroke stroke-width transform'.split(' ');
/**
* @private
*/
@ -158,7 +171,7 @@
attributes.top = attributes.top || 0;
return attributes;
}
/**
* Returns fabric.Rect instance from an SVG element
* @static
@ -171,16 +184,16 @@
if (!element) {
return null;
}
var parsedAttributes = fabric.parseAttributes(element, fabric.Rect.ATTRIBUTE_NAMES);
parsedAttributes = _setDefaultLeftTopValues(parsedAttributes);
var rect = new fabric.Rect(fabric.util.object.extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes));
rect._normalizeLeftTopProperties(parsedAttributes);
return rect;
};
/**
* Returns fabric.Rect instance from an object representation
* @static
@ -191,5 +204,5 @@
fabric.Rect.fromObject = function(object) {
return new fabric.Rect(object);
};
})(typeof exports != 'undefined' ? exports : this);