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

Add shadow toSVG support. Version 1.2.7

Browse source
This commit is contained in:
kangax 2013-07-25 19:39:21 +02:00
parent 22ac5d947f
commit 7a46482328
15 changed files with 99 additions and 135 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-2013, Printio (Juriy Zaytsev, Maxim Chernyak) */
var fabric = fabric || { version: "1.2.6" };
var fabric = fabric || { version: "1.2.7" };
if (typeof exports !== 'undefined') {
exports.fabric = fabric;

110
dist/all.js vendored
View file

@ -1,7 +1,7 @@
/* build: `node build.js modules=ALL exclude=gestures` */
/*! Fabric.js Copyright 2008-2013, Printio (Juriy Zaytsev, Maxim Chernyak) */
var fabric = fabric || { version: "1.2.6" };
var fabric = fabric || { version: "1.2.7" };
if (typeof exports !== 'undefined') {
exports.fabric = fabric;
@ -6383,15 +6383,33 @@ fabric.Shadow = fabric.util.createClass(/** @lends fabric.Shadow.prototype */ {
for (var prop in options) {
this[prop] = options[prop];
}
this.id = fabric.Object.__uid++;
},
/* _TO_SVG_START_ */
/**
* Returns SVG representation of a shadow
* @return {String}
* @return {String} SVG representation of a shadow
*/
toSVG: function() {
toSVG: function(object) {
var mode = 'SourceAlpha';
if (object.fill === this.color || object.stroke === this.color) {
mode = 'SourceGraphic';
}
return (
'<filter id="SVGID_' + this.id + '">' +
'<feGaussianBlur in="' + mode + '" stdDeviation="' +
(this.blur ? this.blur / 3 : 0) +
'"></feGaussianBlur>' +
'<feOffset dx="' + this.offsetX + '" dy="' + this.offsetY + '"></feOffset>' +
'<feMerge>' +
'<feMergeNode></feMergeNode>' +
'<feMergeNode in="SourceGraphic"></feMergeNode>' +
'</feMerge>' +
'</filter>');
},
/* _TO_SVG_END_ */
@ -10642,6 +10660,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
var opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1';
var visibility = this.visible ? '' : " visibility: hidden;";
var filter = this.shadow ? 'filter: url(#SVGID_' + this.shadow.id + ');' : '';
return [
"stroke: ", stroke, "; ",
@ -10652,6 +10671,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
"stroke-miterlimit: ", strokeMiterLimit, "; ",
"fill: ", fill, "; ",
"opacity: ", opacity, ";",
filter,
visibility
].join('');
},
@ -10689,6 +10709,21 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
return [ translatePart, anglePart, scalePart, flipXPart, flipYPart ].join('');
},
_createBaseSVGMarkup: function() {
var markup = [ ];
if (this.fill && this.fill.toLive) {
markup.push(this.fill.toSVG(this, false));
}
if (this.stroke && this.stroke.toLive) {
markup.push(this.stroke.toSVG(this, false));
}
if (this.shadow) {
markup.push(this.shadow.toSVG(this));
}
return markup;
},
/* _TO_SVG_END_ */
/**
@ -12570,11 +12605,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
* @return {String} svg representation of an instance
*/
toSVG: function() {
var markup = [];
if (this.stroke && this.stroke.toLive) {
markup.push(this.stroke.toSVG(this, true));
}
var markup = this._createBaseSVGMarkup();
markup.push(
'<line ',
@ -12699,14 +12730,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
* @return {String} svg representation of an instance
*/
toSVG: function() {
var markup = [];
if (this.fill && this.fill.toLive) {
markup.push(this.fill.toSVG(this, false));
}
if (this.stroke && this.stroke.toLive) {
markup.push(this.stroke.toSVG(this, false));
}
var markup = this._createBaseSVGMarkup();
markup.push(
'<circle ',
@ -12906,7 +12930,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
* @return {String} svg representation of an instance
*/
toSVG: function() {
var markup = [],
var markup = this._createBaseSVGMarkup(),
widthBy2 = this.width / 2,
heightBy2 = this.height / 2;
@ -12916,13 +12940,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
widthBy2 + " " + heightBy2
].join(",");
if (this.fill && this.fill.toLive) {
markup.push(this.fill.toSVG(this, true));
}
if (this.stroke && this.stroke.toLive) {
markup.push(this.stroke.toSVG(this, true));
}
markup.push(
'<polygon ',
'points="', points,
@ -13034,14 +13051,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
* @return {String} svg representation of an instance
*/
toSVG: function() {
var markup = [];
if (this.fill && this.fill.toLive) {
markup.push(this.fill.toSVG(this, false));
}
if (this.stroke && this.stroke.toLive) {
markup.push(this.stroke.toSVG(this, false));
}
var markup = this._createBaseSVGMarkup();
markup.push(
'<ellipse ',
@ -13329,14 +13339,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
* @return {String} svg representation of an instance
*/
toSVG: function() {
var markup = [];
if (this.fill && this.fill.toLive) {
markup.push(this.fill.toSVG(this, false));
}
if (this.stroke && this.stroke.toLive) {
markup.push(this.stroke.toSVG(this, false));
}
var markup = this._createBaseSVGMarkup();
markup.push(
'<rect ',
@ -13477,19 +13480,12 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
*/
toSVG: function() {
var points = [],
markup = [];
markup = this._createBaseSVGMarkup();
for (var i = 0, len = this.points.length; i < len; i++) {
points.push(toFixed(this.points[i].x, 2), ',', toFixed(this.points[i].y, 2), ' ');
}
if (this.fill && this.fill.toLive) {
markup.push(this.fill.toSVG(this, false));
}
if (this.stroke && this.stroke.toLive) {
markup.push(this.stroke.toSVG(this, false));
}
markup.push(
'<polyline ',
'points="', points.join(''),
@ -13687,19 +13683,12 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
*/
toSVG: function() {
var points = [],
markup = [];
markup = this._createBaseSVGMarkup();
for (var i = 0, len = this.points.length; i < len; i++) {
points.push(toFixed(this.points[i].x, 2), ',', toFixed(this.points[i].y, 2), ' ');
}
if (this.fill && this.fill.toLive) {
markup.push(this.fill.toSVG(this, false));
}
if (this.stroke && this.stroke.toLive) {
markup.push(this.stroke.toSVG(this, false));
}
markup.push(
'<polygon ',
'points="', points.join(''),
@ -14333,20 +14322,13 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
*/
toSVG: function() {
var chunks = [],
markup = [];
markup = this._createBaseSVGMarkup();
for (var i = 0, len = this.path.length; i < len; i++) {
chunks.push(this.path[i].join(' '));
}
var path = chunks.join(' ');
if (this.fill && this.fill.toLive) {
markup.push(this.fill.toSVG(this, true));
}
if (this.stroke && this.stroke.toLive) {
markup.push(this.stroke.toSVG(this, true));
}
markup.push(
'<g transform="', (this.group ? '' : this.getSvgTransform()), '">',
'<path ',

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

22
src/shadow.class.js
View file

@ -43,15 +43,33 @@ fabric.Shadow = fabric.util.createClass(/** @lends fabric.Shadow.prototype */ {
for (var prop in options) {
this[prop] = options[prop];
}
this.id = fabric.Object.__uid++;
},
/* _TO_SVG_START_ */
/**
* Returns SVG representation of a shadow
* @return {String}
* @return {String} SVG representation of a shadow
*/
toSVG: function() {
toSVG: function(object) {
var mode = 'SourceAlpha';
if (object.fill === this.color || object.stroke === this.color) {
mode = 'SourceGraphic';
}
return (
'<filter id="SVGID_' + this.id + '">' +
'<feGaussianBlur in="' + mode + '" stdDeviation="' +
(this.blur ? this.blur / 3 : 0) +
'"></feGaussianBlur>' +
'<feOffset dx="' + this.offsetX + '" dy="' + this.offsetY + '"></feOffset>' +
'<feMerge>' +
'<feMergeNode></feMergeNode>' +
'<feMergeNode in="SourceGraphic"></feMergeNode>' +
'</feMerge>' +
'</filter>');
},
/* _TO_SVG_END_ */

9
src/shapes/circle.class.js
View file

@ -57,14 +57,7 @@
* @return {String} svg representation of an instance
*/
toSVG: function() {
var markup = [];
if (this.fill && this.fill.toLive) {
markup.push(this.fill.toSVG(this, false));
}
if (this.stroke && this.stroke.toLive) {
markup.push(this.stroke.toSVG(this, false));
}
var markup = this._createBaseSVGMarkup();
markup.push(
'<circle ',

9
src/shapes/ellipse.class.js
View file

@ -75,14 +75,7 @@
* @return {String} svg representation of an instance
*/
toSVG: function() {
var markup = [];
if (this.fill && this.fill.toLive) {
markup.push(this.fill.toSVG(this, false));
}
if (this.stroke && this.stroke.toLive) {
markup.push(this.stroke.toSVG(this, false));
}
var markup = this._createBaseSVGMarkup();
markup.push(
'<ellipse ',

6
src/shapes/line.class.js
View file

@ -152,11 +152,7 @@
* @return {String} svg representation of an instance
*/
toSVG: function() {
var markup = [];
if (this.stroke && this.stroke.toLive) {
markup.push(this.stroke.toSVG(this, true));
}
var markup = this._createBaseSVGMarkup();
markup.push(
'<line ',

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

@ -530,6 +530,7 @@
var opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1';
var visibility = this.visible ? '' : " visibility: hidden;";
var filter = this.shadow ? 'filter: url(#SVGID_' + this.shadow.id + ');' : '';
return [
"stroke: ", stroke, "; ",
@ -540,6 +541,7 @@
"stroke-miterlimit: ", strokeMiterLimit, "; ",
"fill: ", fill, "; ",
"opacity: ", opacity, ";",
filter,
visibility
].join('');
},
@ -577,6 +579,21 @@
return [ translatePart, anglePart, scalePart, flipXPart, flipYPart ].join('');
},
_createBaseSVGMarkup: function() {
var markup = [ ];
if (this.fill && this.fill.toLive) {
markup.push(this.fill.toSVG(this, false));
}
if (this.stroke && this.stroke.toLive) {
markup.push(this.stroke.toSVG(this, false));
}
if (this.shadow) {
markup.push(this.shadow.toSVG(this));
}
return markup;
},
/* _TO_SVG_END_ */
/**

9
src/shapes/path.class.js
View file

@ -523,20 +523,13 @@
*/
toSVG: function() {
var chunks = [],
markup = [];
markup = this._createBaseSVGMarkup();
for (var i = 0, len = this.path.length; i < len; i++) {
chunks.push(this.path[i].join(' '));
}
var path = chunks.join(' ');
if (this.fill && this.fill.toLive) {
markup.push(this.fill.toSVG(this, true));
}
if (this.stroke && this.stroke.toLive) {
markup.push(this.stroke.toSVG(this, true));
}
markup.push(
'<g transform="', (this.group ? '' : this.getSvgTransform()), '">',
'<path ',

9
src/shapes/polygon.class.js
View file

@ -89,19 +89,12 @@
*/
toSVG: function() {
var points = [],
markup = [];
markup = this._createBaseSVGMarkup();
for (var i = 0, len = this.points.length; i < len; i++) {
points.push(toFixed(this.points[i].x, 2), ',', toFixed(this.points[i].y, 2), ' ');
}
if (this.fill && this.fill.toLive) {
markup.push(this.fill.toSVG(this, false));
}
if (this.stroke && this.stroke.toLive) {
markup.push(this.stroke.toSVG(this, false));
}
markup.push(
'<polygon ',
'points="', points.join(''),

9
src/shapes/polyline.class.js
View file

@ -63,19 +63,12 @@
*/
toSVG: function() {
var points = [],
markup = [];
markup = this._createBaseSVGMarkup();
for (var i = 0, len = this.points.length; i < len; i++) {
points.push(toFixed(this.points[i].x, 2), ',', toFixed(this.points[i].y, 2), ' ');
}
if (this.fill && this.fill.toLive) {
markup.push(this.fill.toSVG(this, false));
}
if (this.stroke && this.stroke.toLive) {
markup.push(this.stroke.toSVG(this, false));
}
markup.push(
'<polyline ',
'points="', points.join(''),

9
src/shapes/rect.class.js
View file

@ -181,14 +181,7 @@
* @return {String} svg representation of an instance
*/
toSVG: function() {
var markup = [];
if (this.fill && this.fill.toLive) {
markup.push(this.fill.toSVG(this, false));
}
if (this.stroke && this.stroke.toLive) {
markup.push(this.stroke.toSVG(this, false));
}
var markup = this._createBaseSVGMarkup();
markup.push(
'<rect ',

9
src/shapes/triangle.class.js
View file

@ -77,7 +77,7 @@
* @return {String} svg representation of an instance
*/
toSVG: function() {
var markup = [],
var markup = this._createBaseSVGMarkup(),
widthBy2 = this.width / 2,
heightBy2 = this.height / 2;
@ -87,13 +87,6 @@
widthBy2 + " " + heightBy2
].join(",");
if (this.fill && this.fill.toLive) {
markup.push(this.fill.toSVG(this, true));
}
if (this.stroke && this.stroke.toLive) {
markup.push(this.stroke.toSVG(this, true));
}
markup.push(
'<polygon ',
'points="', points,