mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-03-16 22:10:32 +00:00
0e261137ca
* fixing path exports to SVG * extend svg import tests * added a failing test for the SVG export * more tests for polygons
941 lines
27 KiB
JavaScript
941 lines
27 KiB
JavaScript
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
min = fabric.util.array.min,
|
|
max = fabric.util.array.max,
|
|
extend = fabric.util.object.extend,
|
|
_toString = Object.prototype.toString,
|
|
drawArc = fabric.util.drawArc,
|
|
toFixed = fabric.util.toFixed,
|
|
commandLengths = {
|
|
m: 2,
|
|
l: 2,
|
|
h: 1,
|
|
v: 1,
|
|
c: 6,
|
|
s: 4,
|
|
q: 4,
|
|
t: 2,
|
|
a: 7
|
|
},
|
|
repeatedCommands = {
|
|
m: 'l',
|
|
M: 'L'
|
|
};
|
|
|
|
if (fabric.Path) {
|
|
fabric.warn('fabric.Path is already defined');
|
|
return;
|
|
}
|
|
|
|
/**
|
|
* Path class
|
|
* @class fabric.Path
|
|
* @extends fabric.Object
|
|
* @tutorial {@link http://fabricjs.com/fabric-intro-part-1#path_and_pathgroup}
|
|
* @see {@link fabric.Path#initialize} for constructor definition
|
|
*/
|
|
fabric.Path = fabric.util.createClass(fabric.Object, /** @lends fabric.Path.prototype */ {
|
|
|
|
/**
|
|
* Type of an object
|
|
* @type String
|
|
* @default
|
|
*/
|
|
type: 'path',
|
|
|
|
/**
|
|
* Array of path points
|
|
* @type Array
|
|
* @default
|
|
*/
|
|
path: null,
|
|
|
|
cacheProperties: fabric.Object.prototype.cacheProperties.concat('path', 'fillRule'),
|
|
|
|
stateProperties: fabric.Object.prototype.stateProperties.concat('path'),
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {Array|String} path Path data (sequence of coordinates and corresponding "command" tokens)
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Path} thisArg
|
|
*/
|
|
initialize: function(path, options) {
|
|
options = options || { };
|
|
this.callSuper('initialize', options);
|
|
|
|
if (!path) {
|
|
path = [];
|
|
}
|
|
|
|
var fromArray = _toString.call(path) === '[object Array]';
|
|
|
|
this.path = fromArray
|
|
? path
|
|
// one of commands (m,M,l,L,q,Q,c,C,etc.) followed by non-command characters (i.e. command values)
|
|
: path.match && path.match(/[mzlhvcsqta][^mzlhvcsqta]*/gi);
|
|
|
|
if (!this.path) {
|
|
return;
|
|
}
|
|
|
|
if (!fromArray) {
|
|
this.path = this._parsePath();
|
|
}
|
|
|
|
this._setPositionDimensions(options);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} options Options object
|
|
*/
|
|
_setPositionDimensions: function(options) {
|
|
var calcDim = this._parseDimensions();
|
|
|
|
this.width = calcDim.width;
|
|
this.height = calcDim.height;
|
|
|
|
if (typeof options.left === 'undefined') {
|
|
this.left = calcDim.left;
|
|
}
|
|
|
|
if (typeof options.top === 'undefined') {
|
|
this.top = calcDim.top;
|
|
}
|
|
|
|
this.pathOffset = this.pathOffset || {
|
|
x: calcDim.left + this.width / 2,
|
|
y: calcDim.top + this.height / 2
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx context to render path on
|
|
*/
|
|
_renderPathCommands: function(ctx) {
|
|
var current, // current instruction
|
|
previous = null,
|
|
subpathStartX = 0,
|
|
subpathStartY = 0,
|
|
x = 0, // current x
|
|
y = 0, // current y
|
|
controlX = 0, // current control point x
|
|
controlY = 0, // current control point y
|
|
tempX,
|
|
tempY,
|
|
l = -this.pathOffset.x,
|
|
t = -this.pathOffset.y;
|
|
|
|
ctx.beginPath();
|
|
|
|
for (var i = 0, len = this.path.length; i < len; ++i) {
|
|
|
|
current = this.path[i];
|
|
|
|
switch (current[0]) { // first letter
|
|
|
|
case 'l': // lineto, relative
|
|
x += current[1];
|
|
y += current[2];
|
|
ctx.lineTo(x + l, y + t);
|
|
break;
|
|
|
|
case 'L': // lineto, absolute
|
|
x = current[1];
|
|
y = current[2];
|
|
ctx.lineTo(x + l, y + t);
|
|
break;
|
|
|
|
case 'h': // horizontal lineto, relative
|
|
x += current[1];
|
|
ctx.lineTo(x + l, y + t);
|
|
break;
|
|
|
|
case 'H': // horizontal lineto, absolute
|
|
x = current[1];
|
|
ctx.lineTo(x + l, y + t);
|
|
break;
|
|
|
|
case 'v': // vertical lineto, relative
|
|
y += current[1];
|
|
ctx.lineTo(x + l, y + t);
|
|
break;
|
|
|
|
case 'V': // verical lineto, absolute
|
|
y = current[1];
|
|
ctx.lineTo(x + l, y + t);
|
|
break;
|
|
|
|
case 'm': // moveTo, relative
|
|
x += current[1];
|
|
y += current[2];
|
|
subpathStartX = x;
|
|
subpathStartY = y;
|
|
ctx.moveTo(x + l, y + t);
|
|
break;
|
|
|
|
case 'M': // moveTo, absolute
|
|
x = current[1];
|
|
y = current[2];
|
|
subpathStartX = x;
|
|
subpathStartY = y;
|
|
ctx.moveTo(x + l, y + t);
|
|
break;
|
|
|
|
case 'c': // bezierCurveTo, relative
|
|
tempX = x + current[5];
|
|
tempY = y + current[6];
|
|
controlX = x + current[3];
|
|
controlY = y + current[4];
|
|
ctx.bezierCurveTo(
|
|
x + current[1] + l, // x1
|
|
y + current[2] + t, // y1
|
|
controlX + l, // x2
|
|
controlY + t, // y2
|
|
tempX + l,
|
|
tempY + t
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
break;
|
|
|
|
case 'C': // bezierCurveTo, absolute
|
|
x = current[5];
|
|
y = current[6];
|
|
controlX = current[3];
|
|
controlY = current[4];
|
|
ctx.bezierCurveTo(
|
|
current[1] + l,
|
|
current[2] + t,
|
|
controlX + l,
|
|
controlY + t,
|
|
x + l,
|
|
y + t
|
|
);
|
|
break;
|
|
|
|
case 's': // shorthand cubic bezierCurveTo, relative
|
|
|
|
// transform to absolute x,y
|
|
tempX = x + current[3];
|
|
tempY = y + current[4];
|
|
|
|
if (previous[0].match(/[CcSs]/) === null) {
|
|
// If there is no previous command or if the previous command was not a C, c, S, or s,
|
|
// the control point is coincident with the current point
|
|
controlX = x;
|
|
controlY = y;
|
|
}
|
|
else {
|
|
// calculate reflection of previous control points
|
|
controlX = 2 * x - controlX;
|
|
controlY = 2 * y - controlY;
|
|
}
|
|
|
|
ctx.bezierCurveTo(
|
|
controlX + l,
|
|
controlY + t,
|
|
x + current[1] + l,
|
|
y + current[2] + t,
|
|
tempX + l,
|
|
tempY + t
|
|
);
|
|
// set control point to 2nd one of this command
|
|
// "... the first control point is assumed to be
|
|
// the reflection of the second control point on
|
|
// the previous command relative to the current point."
|
|
controlX = x + current[1];
|
|
controlY = y + current[2];
|
|
|
|
x = tempX;
|
|
y = tempY;
|
|
break;
|
|
|
|
case 'S': // shorthand cubic bezierCurveTo, absolute
|
|
tempX = current[3];
|
|
tempY = current[4];
|
|
if (previous[0].match(/[CcSs]/) === null) {
|
|
// If there is no previous command or if the previous command was not a C, c, S, or s,
|
|
// the control point is coincident with the current point
|
|
controlX = x;
|
|
controlY = y;
|
|
}
|
|
else {
|
|
// calculate reflection of previous control points
|
|
controlX = 2 * x - controlX;
|
|
controlY = 2 * y - controlY;
|
|
}
|
|
ctx.bezierCurveTo(
|
|
controlX + l,
|
|
controlY + t,
|
|
current[1] + l,
|
|
current[2] + t,
|
|
tempX + l,
|
|
tempY + t
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
|
|
// set control point to 2nd one of this command
|
|
// "... the first control point is assumed to be
|
|
// the reflection of the second control point on
|
|
// the previous command relative to the current point."
|
|
controlX = current[1];
|
|
controlY = current[2];
|
|
|
|
break;
|
|
|
|
case 'q': // quadraticCurveTo, relative
|
|
// transform to absolute x,y
|
|
tempX = x + current[3];
|
|
tempY = y + current[4];
|
|
|
|
controlX = x + current[1];
|
|
controlY = y + current[2];
|
|
|
|
ctx.quadraticCurveTo(
|
|
controlX + l,
|
|
controlY + t,
|
|
tempX + l,
|
|
tempY + t
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
break;
|
|
|
|
case 'Q': // quadraticCurveTo, absolute
|
|
tempX = current[3];
|
|
tempY = current[4];
|
|
|
|
ctx.quadraticCurveTo(
|
|
current[1] + l,
|
|
current[2] + t,
|
|
tempX + l,
|
|
tempY + t
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
controlX = current[1];
|
|
controlY = current[2];
|
|
break;
|
|
|
|
case 't': // shorthand quadraticCurveTo, relative
|
|
|
|
// transform to absolute x,y
|
|
tempX = x + current[1];
|
|
tempY = y + current[2];
|
|
|
|
if (previous[0].match(/[QqTt]/) === null) {
|
|
// If there is no previous command or if the previous command was not a Q, q, T or t,
|
|
// assume the control point is coincident with the current point
|
|
controlX = x;
|
|
controlY = y;
|
|
}
|
|
else {
|
|
// calculate reflection of previous control point
|
|
controlX = 2 * x - controlX;
|
|
controlY = 2 * y - controlY;
|
|
}
|
|
|
|
ctx.quadraticCurveTo(
|
|
controlX + l,
|
|
controlY + t,
|
|
tempX + l,
|
|
tempY + t
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
|
|
break;
|
|
|
|
case 'T':
|
|
tempX = current[1];
|
|
tempY = current[2];
|
|
|
|
if (previous[0].match(/[QqTt]/) === null) {
|
|
// If there is no previous command or if the previous command was not a Q, q, T or t,
|
|
// assume the control point is coincident with the current point
|
|
controlX = x;
|
|
controlY = y;
|
|
}
|
|
else {
|
|
// calculate reflection of previous control point
|
|
controlX = 2 * x - controlX;
|
|
controlY = 2 * y - controlY;
|
|
}
|
|
ctx.quadraticCurveTo(
|
|
controlX + l,
|
|
controlY + t,
|
|
tempX + l,
|
|
tempY + t
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
break;
|
|
|
|
case 'a':
|
|
// TODO: optimize this
|
|
drawArc(ctx, x + l, y + t, [
|
|
current[1],
|
|
current[2],
|
|
current[3],
|
|
current[4],
|
|
current[5],
|
|
current[6] + x + l,
|
|
current[7] + y + t
|
|
]);
|
|
x += current[6];
|
|
y += current[7];
|
|
break;
|
|
|
|
case 'A':
|
|
// TODO: optimize this
|
|
drawArc(ctx, x + l, y + t, [
|
|
current[1],
|
|
current[2],
|
|
current[3],
|
|
current[4],
|
|
current[5],
|
|
current[6] + l,
|
|
current[7] + t
|
|
]);
|
|
x = current[6];
|
|
y = current[7];
|
|
break;
|
|
|
|
case 'z':
|
|
case 'Z':
|
|
x = subpathStartX;
|
|
y = subpathStartY;
|
|
ctx.closePath();
|
|
break;
|
|
}
|
|
previous = current;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx context to render path on
|
|
*/
|
|
_render: function(ctx) {
|
|
this._renderPathCommands(ctx);
|
|
this._renderPaintInOrder(ctx);
|
|
},
|
|
|
|
/**
|
|
* Returns string representation of an instance
|
|
* @return {String} string representation of an instance
|
|
*/
|
|
toString: function() {
|
|
return '#<fabric.Path (' + this.complexity() +
|
|
'): { "top": ' + this.top + ', "left": ' + this.left + ' }>';
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
|
|
* @return {Object} object representation of an instance
|
|
*/
|
|
toObject: function(propertiesToInclude) {
|
|
var o = extend(this.callSuper('toObject', propertiesToInclude), {
|
|
path: this.path.map(function(item) { return item.slice(); }),
|
|
top: this.top,
|
|
left: this.left,
|
|
});
|
|
return o;
|
|
},
|
|
|
|
/**
|
|
* Returns dataless object representation of an instance
|
|
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
|
|
* @return {Object} object representation of an instance
|
|
*/
|
|
toDatalessObject: function(propertiesToInclude) {
|
|
var o = this.toObject(['sourcePath'].concat(propertiesToInclude));
|
|
if (o.sourcePath) {
|
|
delete o.path;
|
|
}
|
|
return o;
|
|
},
|
|
|
|
/* _TO_SVG_START_ */
|
|
/**
|
|
* Returns svg representation of an instance
|
|
* @return {Array} an array of strings with the specific svg representation
|
|
* of the instance
|
|
*/
|
|
_toSVG: function() {
|
|
var path = this.path.map(function(path) {
|
|
return path.join(' ');
|
|
}).join(' ');
|
|
return [
|
|
'<path ', 'COMMON_PARTS',
|
|
'd="', path,
|
|
'" stroke-linecap="round" ',
|
|
'/>\n'
|
|
];
|
|
},
|
|
|
|
_getOffsetTransform: function() {
|
|
var digits = fabric.Object.NUM_FRACTION_DIGITS;
|
|
return ' translate(' + toFixed(-this.pathOffset.x, digits) + ', ' +
|
|
toFixed(-this.pathOffset.y, digits) + ')';
|
|
},
|
|
|
|
/**
|
|
* Returns svg clipPath representation of an instance
|
|
* @param {Function} [reviver] Method for further parsing of svg representation.
|
|
* @return {String} svg representation of an instance
|
|
*/
|
|
toClipPathSVG: function(reviver) {
|
|
var additionalTransform = this._getOffsetTransform();
|
|
return '\t' + this._createBaseClipPathSVGMarkup(
|
|
this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform }
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Returns svg representation of an instance
|
|
* @param {Function} [reviver] Method for further parsing of svg representation.
|
|
* @return {String} svg representation of an instance
|
|
*/
|
|
toSVG: function(reviver) {
|
|
var additionalTransform = this._getOffsetTransform();
|
|
return this._createBaseSVGMarkup(this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform });
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
|
|
/**
|
|
* Returns number representation of an instance complexity
|
|
* @return {Number} complexity of this instance
|
|
*/
|
|
complexity: function() {
|
|
return this.path.length;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_parsePath: function() {
|
|
var result = [],
|
|
coords = [],
|
|
currentPath,
|
|
parsed,
|
|
re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/ig,
|
|
match,
|
|
coordsStr;
|
|
|
|
for (var i = 0, coordsParsed, len = this.path.length; i < len; i++) {
|
|
currentPath = this.path[i];
|
|
|
|
coordsStr = currentPath.slice(1).trim();
|
|
coords.length = 0;
|
|
|
|
while ((match = re.exec(coordsStr))) {
|
|
coords.push(match[0]);
|
|
}
|
|
|
|
coordsParsed = [currentPath.charAt(0)];
|
|
|
|
for (var j = 0, jlen = coords.length; j < jlen; j++) {
|
|
parsed = parseFloat(coords[j]);
|
|
if (!isNaN(parsed)) {
|
|
coordsParsed.push(parsed);
|
|
}
|
|
}
|
|
|
|
var command = coordsParsed[0],
|
|
commandLength = commandLengths[command.toLowerCase()],
|
|
repeatedCommand = repeatedCommands[command] || command;
|
|
|
|
if (coordsParsed.length - 1 > commandLength) {
|
|
for (var k = 1, klen = coordsParsed.length; k < klen; k += commandLength) {
|
|
result.push([command].concat(coordsParsed.slice(k, k + commandLength)));
|
|
command = repeatedCommand;
|
|
}
|
|
}
|
|
else {
|
|
result.push(coordsParsed);
|
|
}
|
|
}
|
|
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_parseDimensions: function() {
|
|
|
|
var aX = [],
|
|
aY = [],
|
|
current, // current instruction
|
|
previous = null,
|
|
subpathStartX = 0,
|
|
subpathStartY = 0,
|
|
x = 0, // current x
|
|
y = 0, // current y
|
|
controlX = 0, // current control point x
|
|
controlY = 0, // current control point y
|
|
tempX,
|
|
tempY,
|
|
bounds;
|
|
|
|
for (var i = 0, len = this.path.length; i < len; ++i) {
|
|
|
|
current = this.path[i];
|
|
|
|
switch (current[0]) { // first letter
|
|
|
|
case 'l': // lineto, relative
|
|
x += current[1];
|
|
y += current[2];
|
|
bounds = [];
|
|
break;
|
|
|
|
case 'L': // lineto, absolute
|
|
x = current[1];
|
|
y = current[2];
|
|
bounds = [];
|
|
break;
|
|
|
|
case 'h': // horizontal lineto, relative
|
|
x += current[1];
|
|
bounds = [];
|
|
break;
|
|
|
|
case 'H': // horizontal lineto, absolute
|
|
x = current[1];
|
|
bounds = [];
|
|
break;
|
|
|
|
case 'v': // vertical lineto, relative
|
|
y += current[1];
|
|
bounds = [];
|
|
break;
|
|
|
|
case 'V': // verical lineto, absolute
|
|
y = current[1];
|
|
bounds = [];
|
|
break;
|
|
|
|
case 'm': // moveTo, relative
|
|
x += current[1];
|
|
y += current[2];
|
|
subpathStartX = x;
|
|
subpathStartY = y;
|
|
bounds = [];
|
|
break;
|
|
|
|
case 'M': // moveTo, absolute
|
|
x = current[1];
|
|
y = current[2];
|
|
subpathStartX = x;
|
|
subpathStartY = y;
|
|
bounds = [];
|
|
break;
|
|
|
|
case 'c': // bezierCurveTo, relative
|
|
tempX = x + current[5];
|
|
tempY = y + current[6];
|
|
controlX = x + current[3];
|
|
controlY = y + current[4];
|
|
bounds = fabric.util.getBoundsOfCurve(x, y,
|
|
x + current[1], // x1
|
|
y + current[2], // y1
|
|
controlX, // x2
|
|
controlY, // y2
|
|
tempX,
|
|
tempY
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
break;
|
|
|
|
case 'C': // bezierCurveTo, absolute
|
|
controlX = current[3];
|
|
controlY = current[4];
|
|
bounds = fabric.util.getBoundsOfCurve(x, y,
|
|
current[1],
|
|
current[2],
|
|
controlX,
|
|
controlY,
|
|
current[5],
|
|
current[6]
|
|
);
|
|
x = current[5];
|
|
y = current[6];
|
|
break;
|
|
|
|
case 's': // shorthand cubic bezierCurveTo, relative
|
|
|
|
// transform to absolute x,y
|
|
tempX = x + current[3];
|
|
tempY = y + current[4];
|
|
|
|
if (previous[0].match(/[CcSs]/) === null) {
|
|
// If there is no previous command or if the previous command was not a C, c, S, or s,
|
|
// the control point is coincident with the current point
|
|
controlX = x;
|
|
controlY = y;
|
|
}
|
|
else {
|
|
// calculate reflection of previous control points
|
|
controlX = 2 * x - controlX;
|
|
controlY = 2 * y - controlY;
|
|
}
|
|
|
|
bounds = fabric.util.getBoundsOfCurve(x, y,
|
|
controlX,
|
|
controlY,
|
|
x + current[1],
|
|
y + current[2],
|
|
tempX,
|
|
tempY
|
|
);
|
|
// set control point to 2nd one of this command
|
|
// "... the first control point is assumed to be
|
|
// the reflection of the second control point on
|
|
// the previous command relative to the current point."
|
|
controlX = x + current[1];
|
|
controlY = y + current[2];
|
|
x = tempX;
|
|
y = tempY;
|
|
break;
|
|
|
|
case 'S': // shorthand cubic bezierCurveTo, absolute
|
|
tempX = current[3];
|
|
tempY = current[4];
|
|
if (previous[0].match(/[CcSs]/) === null) {
|
|
// If there is no previous command or if the previous command was not a C, c, S, or s,
|
|
// the control point is coincident with the current point
|
|
controlX = x;
|
|
controlY = y;
|
|
}
|
|
else {
|
|
// calculate reflection of previous control points
|
|
controlX = 2 * x - controlX;
|
|
controlY = 2 * y - controlY;
|
|
}
|
|
bounds = fabric.util.getBoundsOfCurve(x, y,
|
|
controlX,
|
|
controlY,
|
|
current[1],
|
|
current[2],
|
|
tempX,
|
|
tempY
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
// set control point to 2nd one of this command
|
|
// "... the first control point is assumed to be
|
|
// the reflection of the second control point on
|
|
// the previous command relative to the current point."
|
|
controlX = current[1];
|
|
controlY = current[2];
|
|
break;
|
|
|
|
case 'q': // quadraticCurveTo, relative
|
|
// transform to absolute x,y
|
|
tempX = x + current[3];
|
|
tempY = y + current[4];
|
|
controlX = x + current[1];
|
|
controlY = y + current[2];
|
|
bounds = fabric.util.getBoundsOfCurve(x, y,
|
|
controlX,
|
|
controlY,
|
|
controlX,
|
|
controlY,
|
|
tempX,
|
|
tempY
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
break;
|
|
|
|
case 'Q': // quadraticCurveTo, absolute
|
|
controlX = current[1];
|
|
controlY = current[2];
|
|
bounds = fabric.util.getBoundsOfCurve(x, y,
|
|
controlX,
|
|
controlY,
|
|
controlX,
|
|
controlY,
|
|
current[3],
|
|
current[4]
|
|
);
|
|
x = current[3];
|
|
y = current[4];
|
|
break;
|
|
|
|
case 't': // shorthand quadraticCurveTo, relative
|
|
// transform to absolute x,y
|
|
tempX = x + current[1];
|
|
tempY = y + current[2];
|
|
if (previous[0].match(/[QqTt]/) === null) {
|
|
// If there is no previous command or if the previous command was not a Q, q, T or t,
|
|
// assume the control point is coincident with the current point
|
|
controlX = x;
|
|
controlY = y;
|
|
}
|
|
else {
|
|
// calculate reflection of previous control point
|
|
controlX = 2 * x - controlX;
|
|
controlY = 2 * y - controlY;
|
|
}
|
|
|
|
bounds = fabric.util.getBoundsOfCurve(x, y,
|
|
controlX,
|
|
controlY,
|
|
controlX,
|
|
controlY,
|
|
tempX,
|
|
tempY
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
|
|
break;
|
|
|
|
case 'T':
|
|
tempX = current[1];
|
|
tempY = current[2];
|
|
|
|
if (previous[0].match(/[QqTt]/) === null) {
|
|
// If there is no previous command or if the previous command was not a Q, q, T or t,
|
|
// assume the control point is coincident with the current point
|
|
controlX = x;
|
|
controlY = y;
|
|
}
|
|
else {
|
|
// calculate reflection of previous control point
|
|
controlX = 2 * x - controlX;
|
|
controlY = 2 * y - controlY;
|
|
}
|
|
bounds = fabric.util.getBoundsOfCurve(x, y,
|
|
controlX,
|
|
controlY,
|
|
controlX,
|
|
controlY,
|
|
tempX,
|
|
tempY
|
|
);
|
|
x = tempX;
|
|
y = tempY;
|
|
break;
|
|
|
|
case 'a':
|
|
// TODO: optimize this
|
|
bounds = fabric.util.getBoundsOfArc(x, y,
|
|
current[1],
|
|
current[2],
|
|
current[3],
|
|
current[4],
|
|
current[5],
|
|
current[6] + x,
|
|
current[7] + y
|
|
);
|
|
x += current[6];
|
|
y += current[7];
|
|
break;
|
|
|
|
case 'A':
|
|
// TODO: optimize this
|
|
bounds = fabric.util.getBoundsOfArc(x, y,
|
|
current[1],
|
|
current[2],
|
|
current[3],
|
|
current[4],
|
|
current[5],
|
|
current[6],
|
|
current[7]
|
|
);
|
|
x = current[6];
|
|
y = current[7];
|
|
break;
|
|
|
|
case 'z':
|
|
case 'Z':
|
|
x = subpathStartX;
|
|
y = subpathStartY;
|
|
break;
|
|
}
|
|
previous = current;
|
|
bounds.forEach(function (point) {
|
|
aX.push(point.x);
|
|
aY.push(point.y);
|
|
});
|
|
aX.push(x);
|
|
aY.push(y);
|
|
}
|
|
|
|
var minX = min(aX) || 0,
|
|
minY = min(aY) || 0,
|
|
maxX = max(aX) || 0,
|
|
maxY = max(aY) || 0,
|
|
deltaX = maxX - minX,
|
|
deltaY = maxY - minY,
|
|
|
|
o = {
|
|
left: minX,
|
|
top: minY,
|
|
width: deltaX,
|
|
height: deltaY
|
|
};
|
|
|
|
return o;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Creates an instance of fabric.Path from an object
|
|
* @static
|
|
* @memberOf fabric.Path
|
|
* @param {Object} object
|
|
* @param {Function} [callback] Callback to invoke when an fabric.Path instance is created
|
|
*/
|
|
fabric.Path.fromObject = function(object, callback) {
|
|
if (typeof object.sourcePath === 'string') {
|
|
var pathUrl = object.sourcePath;
|
|
fabric.loadSVGFromURL(pathUrl, function (elements) {
|
|
var path = elements[0];
|
|
path.setOptions(object);
|
|
callback && callback(path);
|
|
});
|
|
}
|
|
else {
|
|
fabric.Object._fromObject('Path', object, callback, 'path');
|
|
}
|
|
};
|
|
|
|
/* _FROM_SVG_START_ */
|
|
/**
|
|
* List of attribute names to account for when parsing SVG element (used by `fabric.Path.fromElement`)
|
|
* @static
|
|
* @memberOf fabric.Path
|
|
* @see http://www.w3.org/TR/SVG/paths.html#PathElement
|
|
*/
|
|
fabric.Path.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(['d']);
|
|
|
|
/**
|
|
* Creates an instance of fabric.Path from an SVG <path> element
|
|
* @static
|
|
* @memberOf fabric.Path
|
|
* @param {SVGElement} element to parse
|
|
* @param {Function} callback Callback to invoke when an fabric.Path instance is created
|
|
* @param {Object} [options] Options object
|
|
* @param {Function} [callback] Options callback invoked after parsing is finished
|
|
*/
|
|
fabric.Path.fromElement = function(element, callback, options) {
|
|
var parsedAttributes = fabric.parseAttributes(element, fabric.Path.ATTRIBUTE_NAMES);
|
|
callback(new fabric.Path(parsedAttributes.d, extend(parsedAttributes, options)));
|
|
};
|
|
/* _FROM_SVG_END_ */
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|