mirror of
https://github.com/konvajs/konva.git
synced 2025-11-18 17:21:36 +08:00
moved path parsing logic to Geometry class
This commit is contained in:
Eric Rowell
365
dist/kinetic-core.js
vendored
365
dist/kinetic-core.js
vendored
@@ -1183,6 +1183,371 @@ Kinetic.Geometry = {
|
|||||||
x: cx + (pt.x * cosPsi - pt.y * sinPsi),
|
x: cx + (pt.x * cosPsi - pt.y * sinPsi),
|
||||||
y: cy + (pt.x * sinPsi + pt.y * cosPsi)
|
y: cy + (pt.x * sinPsi + pt.y * cosPsi)
|
||||||
};
|
};
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* get parsed data array from the data
|
||||||
|
* string. V, v, H, h, and l data are converted to
|
||||||
|
* L data for the purpose of high performance Path
|
||||||
|
* rendering
|
||||||
|
*/
|
||||||
|
parsePathData: function(data) {
|
||||||
|
// Path Data Segment must begin with a moveTo
|
||||||
|
//m (x y)+ Relative moveTo (subsequent points are treated as lineTo)
|
||||||
|
//M (x y)+ Absolute moveTo (subsequent points are treated as lineTo)
|
||||||
|
//l (x y)+ Relative lineTo
|
||||||
|
//L (x y)+ Absolute LineTo
|
||||||
|
//h (x)+ Relative horizontal lineTo
|
||||||
|
//H (x)+ Absolute horizontal lineTo
|
||||||
|
//v (y)+ Relative vertical lineTo
|
||||||
|
//V (y)+ Absolute vertical lineTo
|
||||||
|
//z (closepath)
|
||||||
|
//Z (closepath)
|
||||||
|
//c (x1 y1 x2 y2 x y)+ Relative Bezier curve
|
||||||
|
//C (x1 y1 x2 y2 x y)+ Absolute Bezier curve
|
||||||
|
//q (x1 y1 x y)+ Relative Quadratic Bezier
|
||||||
|
//Q (x1 y1 x y)+ Absolute Quadratic Bezier
|
||||||
|
//t (x y)+ Shorthand/Smooth Relative Quadratic Bezier
|
||||||
|
//T (x y)+ Shorthand/Smooth Absolute Quadratic Bezier
|
||||||
|
//s (x2 y2 x y)+ Shorthand/Smooth Relative Bezier curve
|
||||||
|
//S (x2 y2 x y)+ Shorthand/Smooth Absolute Bezier curve
|
||||||
|
//a (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ Relative Elliptical Arc
|
||||||
|
//A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ Absolute Elliptical Arc
|
||||||
|
|
||||||
|
// return early if data is not defined
|
||||||
|
if(!data) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// command string
|
||||||
|
var cs = data;
|
||||||
|
|
||||||
|
// command chars
|
||||||
|
var cc = ['m', 'M', 'l', 'L', 'v', 'V', 'h', 'H', 'z', 'Z', 'c', 'C', 'q', 'Q', 't', 'T', 's', 'S', 'a', 'A'];
|
||||||
|
// convert white spaces to commas
|
||||||
|
cs = cs.replace(new RegExp(' ', 'g'), ',');
|
||||||
|
// create pipes so that we can split the data
|
||||||
|
for(var n = 0; n < cc.length; n++) {
|
||||||
|
cs = cs.replace(new RegExp(cc[n], 'g'), '|' + cc[n]);
|
||||||
|
}
|
||||||
|
// create array
|
||||||
|
var arr = cs.split('|');
|
||||||
|
var ca = [];
|
||||||
|
// init context point
|
||||||
|
var cpx = 0;
|
||||||
|
var cpy = 0;
|
||||||
|
for(var n = 1; n < arr.length; n++) {
|
||||||
|
var str = arr[n];
|
||||||
|
var c = str.charAt(0);
|
||||||
|
str = str.slice(1);
|
||||||
|
// remove ,- for consistency
|
||||||
|
str = str.replace(new RegExp(',-', 'g'), '-');
|
||||||
|
// add commas so that it's easy to split
|
||||||
|
str = str.replace(new RegExp('-', 'g'), ',-');
|
||||||
|
str = str.replace(new RegExp('e,-', 'g'), 'e-');
|
||||||
|
var p = str.split(',');
|
||||||
|
if(p.length > 0 && p[0] === '') {
|
||||||
|
p.shift();
|
||||||
|
}
|
||||||
|
// convert strings to floats
|
||||||
|
for(var i = 0; i < p.length; i++) {
|
||||||
|
p[i] = parseFloat(p[i]);
|
||||||
|
}
|
||||||
|
while(p.length > 0) {
|
||||||
|
if(isNaN(p[0]))// case for a trailing comma before next command
|
||||||
|
break;
|
||||||
|
|
||||||
|
var cmd = null;
|
||||||
|
var points = [];
|
||||||
|
var startX = cpx, startY = cpy;
|
||||||
|
|
||||||
|
// convert l, H, h, V, and v to L
|
||||||
|
switch (c) {
|
||||||
|
|
||||||
|
// Note: Keep the lineTo's above the moveTo's in this switch
|
||||||
|
case 'l':
|
||||||
|
cpx += p.shift();
|
||||||
|
cpy += p.shift();
|
||||||
|
cmd = 'L';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'L':
|
||||||
|
cpx = p.shift();
|
||||||
|
cpy = p.shift();
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
|
||||||
|
// Note: lineTo handlers need to be above this point
|
||||||
|
case 'm':
|
||||||
|
cpx += p.shift();
|
||||||
|
cpy += p.shift();
|
||||||
|
cmd = 'M';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
c = 'l';
|
||||||
|
// subsequent points are treated as relative lineTo
|
||||||
|
break;
|
||||||
|
case 'M':
|
||||||
|
cpx = p.shift();
|
||||||
|
cpy = p.shift();
|
||||||
|
cmd = 'M';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
c = 'L';
|
||||||
|
// subsequent points are treated as absolute lineTo
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'h':
|
||||||
|
cpx += p.shift();
|
||||||
|
cmd = 'L';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'H':
|
||||||
|
cpx = p.shift();
|
||||||
|
cmd = 'L';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'v':
|
||||||
|
cpy += p.shift();
|
||||||
|
cmd = 'L';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'V':
|
||||||
|
cpy = p.shift();
|
||||||
|
cmd = 'L';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'C':
|
||||||
|
points.push(p.shift(), p.shift(), p.shift(), p.shift());
|
||||||
|
cpx = p.shift();
|
||||||
|
cpy = p.shift();
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'c':
|
||||||
|
points.push(cpx + p.shift(), cpy + p.shift(), cpx + p.shift(), cpy + p.shift());
|
||||||
|
cpx += p.shift();
|
||||||
|
cpy += p.shift();
|
||||||
|
cmd = 'C';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'S':
|
||||||
|
var ctlPtx = cpx, ctlPty = cpy;
|
||||||
|
var prevCmd = ca[ca.length - 1];
|
||||||
|
if(prevCmd.command === 'C') {
|
||||||
|
ctlPtx = cpx + (cpx - prevCmd.points[2]);
|
||||||
|
ctlPty = cpy + (cpy - prevCmd.points[3]);
|
||||||
|
}
|
||||||
|
points.push(ctlPtx, ctlPty, p.shift(), p.shift());
|
||||||
|
cpx = p.shift();
|
||||||
|
cpy = p.shift();
|
||||||
|
cmd = 'C';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 's':
|
||||||
|
var ctlPtx = cpx, ctlPty = cpy;
|
||||||
|
var prevCmd = ca[ca.length - 1];
|
||||||
|
if(prevCmd.command === 'C') {
|
||||||
|
ctlPtx = cpx + (cpx - prevCmd.points[2]);
|
||||||
|
ctlPty = cpy + (cpy - prevCmd.points[3]);
|
||||||
|
}
|
||||||
|
points.push(ctlPtx, ctlPty, cpx + p.shift(), cpy + p.shift());
|
||||||
|
cpx += p.shift();
|
||||||
|
cpy += p.shift();
|
||||||
|
cmd = 'C';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'Q':
|
||||||
|
points.push(p.shift(), p.shift());
|
||||||
|
cpx = p.shift();
|
||||||
|
cpy = p.shift();
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'q':
|
||||||
|
points.push(cpx + p.shift(), cpy + p.shift());
|
||||||
|
cpx += p.shift();
|
||||||
|
cpy += p.shift();
|
||||||
|
cmd = 'Q';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'T':
|
||||||
|
var ctlPtx = cpx, ctlPty = cpy;
|
||||||
|
var prevCmd = ca[ca.length - 1];
|
||||||
|
if(prevCmd.command === 'Q') {
|
||||||
|
ctlPtx = cpx + (cpx - prevCmd.points[0]);
|
||||||
|
ctlPty = cpy + (cpy - prevCmd.points[1]);
|
||||||
|
}
|
||||||
|
cpx = p.shift();
|
||||||
|
cpy = p.shift();
|
||||||
|
cmd = 'Q';
|
||||||
|
points.push(ctlPtx, ctlPty, cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 't':
|
||||||
|
var ctlPtx = cpx, ctlPty = cpy;
|
||||||
|
var prevCmd = ca[ca.length - 1];
|
||||||
|
if(prevCmd.command === 'Q') {
|
||||||
|
ctlPtx = cpx + (cpx - prevCmd.points[0]);
|
||||||
|
ctlPty = cpy + (cpy - prevCmd.points[1]);
|
||||||
|
}
|
||||||
|
cpx += p.shift();
|
||||||
|
cpy += p.shift();
|
||||||
|
cmd = 'Q';
|
||||||
|
points.push(ctlPtx, ctlPty, cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'A':
|
||||||
|
var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift();
|
||||||
|
var x1 = cpx, y1 = cpy;
|
||||||
|
cpx = p.shift(), cpy = p.shift();
|
||||||
|
cmd = 'A';
|
||||||
|
points = this.convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
|
||||||
|
break;
|
||||||
|
case 'a':
|
||||||
|
var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift();
|
||||||
|
var x1 = cpx, y1 = cpy;
|
||||||
|
cpx += p.shift(), cpy += p.shift();
|
||||||
|
cmd = 'A';
|
||||||
|
points = this.convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
ca.push({
|
||||||
|
command: cmd || c,
|
||||||
|
points: points,
|
||||||
|
start: {
|
||||||
|
x: startX,
|
||||||
|
y: startY
|
||||||
|
},
|
||||||
|
pathLength: this.calcLength(startX, startY, cmd || c, points)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if(c === 'z' || c === 'Z') {
|
||||||
|
ca.push({
|
||||||
|
command: 'z',
|
||||||
|
points: [],
|
||||||
|
start: undefined,
|
||||||
|
pathLength: 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return ca;
|
||||||
|
},
|
||||||
|
calcLength: function(x, y, cmd, points) {
|
||||||
|
var len, p1, p2;
|
||||||
|
var g = Kinetic.Geometry;
|
||||||
|
|
||||||
|
switch (cmd) {
|
||||||
|
case 'L':
|
||||||
|
return g.getLineLength(x, y, points[0], points[1]);
|
||||||
|
case 'C':
|
||||||
|
// Approximates by breaking curve into 100 line segments
|
||||||
|
len = 0.0;
|
||||||
|
p1 = g.getPointOnCubicBezier(0, x, y, points[0], points[1], points[2], points[3], points[4], points[5]);
|
||||||
|
for( t = 0.01; t <= 1; t += 0.01) {
|
||||||
|
p2 = g.getPointOnCubicBezier(t, x, y, points[0], points[1], points[2], points[3], points[4], points[5]);
|
||||||
|
len += g.getLineLength(p1.x, p1.y, p2.x, p2.y);
|
||||||
|
p1 = p2;
|
||||||
|
}
|
||||||
|
return len;
|
||||||
|
case 'Q':
|
||||||
|
// Approximates by breaking curve into 100 line segments
|
||||||
|
len = 0.0;
|
||||||
|
p1 = g.getPointOnQuadraticBezier(0, x, y, points[0], points[1], points[2], points[3]);
|
||||||
|
for( t = 0.01; t <= 1; t += 0.01) {
|
||||||
|
p2 = g.getPointOnQuadraticBezier(t, x, y, points[0], points[1], points[2], points[3]);
|
||||||
|
len += g.getLineLength(p1.x, p1.y, p2.x, p2.y);
|
||||||
|
p1 = p2;
|
||||||
|
}
|
||||||
|
return len;
|
||||||
|
case 'A':
|
||||||
|
// Approximates by breaking curve into line segments
|
||||||
|
len = 0.0;
|
||||||
|
var start = points[4];
|
||||||
|
// 4 = theta
|
||||||
|
var dTheta = points[5];
|
||||||
|
// 5 = dTheta
|
||||||
|
var end = points[4] + dTheta;
|
||||||
|
var inc = Math.PI / 180.0;
|
||||||
|
// 1 degree resolution
|
||||||
|
if(Math.abs(start - end) < inc) {
|
||||||
|
inc = Math.abs(start - end);
|
||||||
|
}
|
||||||
|
// Note: for purpose of calculating arc length, not going to worry about rotating X-axis by angle psi
|
||||||
|
p1 = g.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], start, 0);
|
||||||
|
if(dTheta < 0) {// clockwise
|
||||||
|
for( t = start - inc; t > end; t -= inc) {
|
||||||
|
p2 = g.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], t, 0);
|
||||||
|
len += g.getLineLength(p1.x, p1.y, p2.x, p2.y);
|
||||||
|
p1 = p2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {// counter-clockwise
|
||||||
|
for( t = start + inc; t < end; t += inc) {
|
||||||
|
p2 = g.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], t, 0);
|
||||||
|
len += g.getLineLength(p1.x, p1.y, p2.x, p2.y);
|
||||||
|
p1 = p2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p2 = g.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], end, 0);
|
||||||
|
len += g.getLineLength(p1.x, p1.y, p2.x, p2.y);
|
||||||
|
|
||||||
|
return len;
|
||||||
|
}
|
||||||
|
|
||||||
|
return 0;
|
||||||
|
},
|
||||||
|
convertEndpointToCenterParameterization: function(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg) {
|
||||||
|
// Derived from: http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
|
||||||
|
var psi = psiDeg * (Math.PI / 180.0);
|
||||||
|
var xp = Math.cos(psi) * (x1 - x2) / 2.0 + Math.sin(psi) * (y1 - y2) / 2.0;
|
||||||
|
var yp = -1 * Math.sin(psi) * (x1 - x2) / 2.0 + Math.cos(psi) * (y1 - y2) / 2.0;
|
||||||
|
|
||||||
|
var lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry);
|
||||||
|
|
||||||
|
if(lambda > 1) {
|
||||||
|
rx *= Math.sqrt(lambda);
|
||||||
|
ry *= Math.sqrt(lambda);
|
||||||
|
}
|
||||||
|
|
||||||
|
var f = Math.sqrt((((rx * rx) * (ry * ry)) - ((rx * rx) * (yp * yp)) - ((ry * ry) * (xp * xp))) / ((rx * rx) * (yp * yp) + (ry * ry) * (xp * xp)));
|
||||||
|
|
||||||
|
if(fa == fs) {
|
||||||
|
f *= -1;
|
||||||
|
}
|
||||||
|
if(isNaN(f)) {
|
||||||
|
f = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
var cxp = f * rx * yp / ry;
|
||||||
|
var cyp = f * -ry * xp / rx;
|
||||||
|
|
||||||
|
var cx = (x1 + x2) / 2.0 + Math.cos(psi) * cxp - Math.sin(psi) * cyp;
|
||||||
|
var cy = (y1 + y2) / 2.0 + Math.sin(psi) * cxp + Math.cos(psi) * cyp;
|
||||||
|
|
||||||
|
var vMag = function(v) {
|
||||||
|
return Math.sqrt(v[0] * v[0] + v[1] * v[1]);
|
||||||
|
};
|
||||||
|
var vRatio = function(u, v) {
|
||||||
|
return (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v));
|
||||||
|
};
|
||||||
|
var vAngle = function(u, v) {
|
||||||
|
return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(vRatio(u, v));
|
||||||
|
};
|
||||||
|
var theta = vAngle([1, 0], [(xp - cxp) / rx, (yp - cyp) / ry]);
|
||||||
|
var u = [(xp - cxp) / rx, (yp - cyp) / ry];
|
||||||
|
var v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry];
|
||||||
|
var dTheta = vAngle(u, v);
|
||||||
|
|
||||||
|
if(vRatio(u, v) <= -1) {
|
||||||
|
dTheta = Math.PI;
|
||||||
|
}
|
||||||
|
if(vRatio(u, v) >= 1) {
|
||||||
|
dTheta = 0;
|
||||||
|
}
|
||||||
|
if(fs === 0 && dTheta > 0) {
|
||||||
|
dTheta = dTheta - 2 * Math.PI;
|
||||||
|
}
|
||||||
|
if(fs == 1 && dTheta < 0) {
|
||||||
|
dTheta = dTheta + 2 * Math.PI;
|
||||||
|
}
|
||||||
|
return [cx, cy, rx, ry, theta, dTheta, psi, fs];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
4
dist/kinetic-core.min.js
vendored
4
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -17,9 +17,9 @@ Kinetic.Plugins.Path = Kinetic.Shape.extend({
|
|||||||
config.drawFunc = this.drawFunc;
|
config.drawFunc = this.drawFunc;
|
||||||
// call super constructor
|
// call super constructor
|
||||||
this._super(config);
|
this._super(config);
|
||||||
this.dataArray = this.parsePathData(this.attrs.data);
|
this.dataArray = Kinetic.Geometry.parsePathData(this.attrs.data);
|
||||||
this.on('dataChange', function() {
|
this.on('dataChange', function() {
|
||||||
that.dataArray = this.parsePathData(that.attrs.data);
|
that.dataArray = Kinetic.Geometry.parsePathData(that.attrs.data);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
drawFunc: function(context) {
|
drawFunc: function(context) {
|
||||||
@@ -65,368 +65,6 @@ Kinetic.Plugins.Path = Kinetic.Shape.extend({
|
|||||||
}
|
}
|
||||||
this.fill(context);
|
this.fill(context);
|
||||||
this.stroke(context);
|
this.stroke(context);
|
||||||
},
|
|
||||||
/**
|
|
||||||
* get parsed data array from the data
|
|
||||||
* string. V, v, H, h, and l data are converted to
|
|
||||||
* L data for the purpose of high performance Path
|
|
||||||
* rendering
|
|
||||||
*/
|
|
||||||
parsePathData: function(data) {
|
|
||||||
// Path Data Segment must begin with a moveTo
|
|
||||||
//m (x y)+ Relative moveTo (subsequent points are treated as lineTo)
|
|
||||||
//M (x y)+ Absolute moveTo (subsequent points are treated as lineTo)
|
|
||||||
//l (x y)+ Relative lineTo
|
|
||||||
//L (x y)+ Absolute LineTo
|
|
||||||
//h (x)+ Relative horizontal lineTo
|
|
||||||
//H (x)+ Absolute horizontal lineTo
|
|
||||||
//v (y)+ Relative vertical lineTo
|
|
||||||
//V (y)+ Absolute vertical lineTo
|
|
||||||
//z (closepath)
|
|
||||||
//Z (closepath)
|
|
||||||
//c (x1 y1 x2 y2 x y)+ Relative Bezier curve
|
|
||||||
//C (x1 y1 x2 y2 x y)+ Absolute Bezier curve
|
|
||||||
//q (x1 y1 x y)+ Relative Quadratic Bezier
|
|
||||||
//Q (x1 y1 x y)+ Absolute Quadratic Bezier
|
|
||||||
//t (x y)+ Shorthand/Smooth Relative Quadratic Bezier
|
|
||||||
//T (x y)+ Shorthand/Smooth Absolute Quadratic Bezier
|
|
||||||
//s (x2 y2 x y)+ Shorthand/Smooth Relative Bezier curve
|
|
||||||
//S (x2 y2 x y)+ Shorthand/Smooth Absolute Bezier curve
|
|
||||||
//a (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ Relative Elliptical Arc
|
|
||||||
//A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ Absolute Elliptical Arc
|
|
||||||
|
|
||||||
// return early if data is not defined
|
|
||||||
if(!data) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// command string
|
|
||||||
var cs = data;
|
|
||||||
|
|
||||||
// command chars
|
|
||||||
var cc = ['m', 'M', 'l', 'L', 'v', 'V', 'h', 'H', 'z', 'Z', 'c', 'C', 'q', 'Q', 't', 'T', 's', 'S', 'a', 'A'];
|
|
||||||
// convert white spaces to commas
|
|
||||||
cs = cs.replace(new RegExp(' ', 'g'), ',');
|
|
||||||
// create pipes so that we can split the data
|
|
||||||
for(var n = 0; n < cc.length; n++) {
|
|
||||||
cs = cs.replace(new RegExp(cc[n], 'g'), '|' + cc[n]);
|
|
||||||
}
|
|
||||||
// create array
|
|
||||||
var arr = cs.split('|');
|
|
||||||
var ca = [];
|
|
||||||
// init context point
|
|
||||||
var cpx = 0;
|
|
||||||
var cpy = 0;
|
|
||||||
for(var n = 1; n < arr.length; n++) {
|
|
||||||
var str = arr[n];
|
|
||||||
var c = str.charAt(0);
|
|
||||||
str = str.slice(1);
|
|
||||||
// remove ,- for consistency
|
|
||||||
str = str.replace(new RegExp(',-', 'g'), '-');
|
|
||||||
// add commas so that it's easy to split
|
|
||||||
str = str.replace(new RegExp('-', 'g'), ',-');
|
|
||||||
str = str.replace(new RegExp('e,-', 'g'), 'e-');
|
|
||||||
var p = str.split(',');
|
|
||||||
if(p.length > 0 && p[0] === '') {
|
|
||||||
p.shift();
|
|
||||||
}
|
|
||||||
// convert strings to floats
|
|
||||||
for(var i = 0; i < p.length; i++) {
|
|
||||||
p[i] = parseFloat(p[i]);
|
|
||||||
}
|
|
||||||
while(p.length > 0) {
|
|
||||||
if(isNaN(p[0]))// case for a trailing comma before next command
|
|
||||||
break;
|
|
||||||
|
|
||||||
var cmd = null;
|
|
||||||
var points = [];
|
|
||||||
var startX = cpx, startY = cpy;
|
|
||||||
|
|
||||||
// convert l, H, h, V, and v to L
|
|
||||||
switch (c) {
|
|
||||||
|
|
||||||
// Note: Keep the lineTo's above the moveTo's in this switch
|
|
||||||
case 'l':
|
|
||||||
cpx += p.shift();
|
|
||||||
cpy += p.shift();
|
|
||||||
cmd = 'L';
|
|
||||||
points.push(cpx, cpy);
|
|
||||||
break;
|
|
||||||
case 'L':
|
|
||||||
cpx = p.shift();
|
|
||||||
cpy = p.shift();
|
|
||||||
points.push(cpx, cpy);
|
|
||||||
break;
|
|
||||||
|
|
||||||
// Note: lineTo handlers need to be above this point
|
|
||||||
case 'm':
|
|
||||||
cpx += p.shift();
|
|
||||||
cpy += p.shift();
|
|
||||||
cmd = 'M';
|
|
||||||
points.push(cpx, cpy);
|
|
||||||
c = 'l';
|
|
||||||
// subsequent points are treated as relative lineTo
|
|
||||||
break;
|
|
||||||
case 'M':
|
|
||||||
cpx = p.shift();
|
|
||||||
cpy = p.shift();
|
|
||||||
cmd = 'M';
|
|
||||||
points.push(cpx, cpy);
|
|
||||||
c = 'L';
|
|
||||||
// subsequent points are treated as absolute lineTo
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'h':
|
|
||||||
cpx += p.shift();
|
|
||||||
cmd = 'L';
|
|
||||||
points.push(cpx, cpy);
|
|
||||||
break;
|
|
||||||
case 'H':
|
|
||||||
cpx = p.shift();
|
|
||||||
cmd = 'L';
|
|
||||||
points.push(cpx, cpy);
|
|
||||||
break;
|
|
||||||
case 'v':
|
|
||||||
cpy += p.shift();
|
|
||||||
cmd = 'L';
|
|
||||||
points.push(cpx, cpy);
|
|
||||||
break;
|
|
||||||
case 'V':
|
|
||||||
cpy = p.shift();
|
|
||||||
cmd = 'L';
|
|
||||||
points.push(cpx, cpy);
|
|
||||||
break;
|
|
||||||
case 'C':
|
|
||||||
points.push(p.shift(), p.shift(), p.shift(), p.shift());
|
|
||||||
cpx = p.shift();
|
|
||||||
cpy = p.shift();
|
|
||||||
points.push(cpx, cpy);
|
|
||||||
break;
|
|
||||||
case 'c':
|
|
||||||
points.push(cpx + p.shift(), cpy + p.shift(), cpx + p.shift(), cpy + p.shift());
|
|
||||||
cpx += p.shift();
|
|
||||||
cpy += p.shift();
|
|
||||||
cmd = 'C';
|
|
||||||
points.push(cpx, cpy);
|
|
||||||
break;
|
|
||||||
case 'S':
|
|
||||||
var ctlPtx = cpx, ctlPty = cpy;
|
|
||||||
var prevCmd = ca[ca.length - 1];
|
|
||||||
if(prevCmd.command === 'C') {
|
|
||||||
ctlPtx = cpx + (cpx - prevCmd.points[2]);
|
|
||||||
ctlPty = cpy + (cpy - prevCmd.points[3]);
|
|
||||||
}
|
|
||||||
points.push(ctlPtx, ctlPty, p.shift(), p.shift());
|
|
||||||
cpx = p.shift();
|
|
||||||
cpy = p.shift();
|
|
||||||
cmd = 'C';
|
|
||||||
points.push(cpx, cpy);
|
|
||||||
break;
|
|
||||||
case 's':
|
|
||||||
var ctlPtx = cpx, ctlPty = cpy;
|
|
||||||
var prevCmd = ca[ca.length - 1];
|
|
||||||
if(prevCmd.command === 'C') {
|
|
||||||
ctlPtx = cpx + (cpx - prevCmd.points[2]);
|
|
||||||
ctlPty = cpy + (cpy - prevCmd.points[3]);
|
|
||||||
}
|
|
||||||
points.push(ctlPtx, ctlPty, cpx + p.shift(), cpy + p.shift());
|
|
||||||
cpx += p.shift();
|
|
||||||
cpy += p.shift();
|
|
||||||
cmd = 'C';
|
|
||||||
points.push(cpx, cpy);
|
|
||||||
break;
|
|
||||||
case 'Q':
|
|
||||||
points.push(p.shift(), p.shift());
|
|
||||||
cpx = p.shift();
|
|
||||||
cpy = p.shift();
|
|
||||||
points.push(cpx, cpy);
|
|
||||||
break;
|
|
||||||
case 'q':
|
|
||||||
points.push(cpx + p.shift(), cpy + p.shift());
|
|
||||||
cpx += p.shift();
|
|
||||||
cpy += p.shift();
|
|
||||||
cmd = 'Q';
|
|
||||||
points.push(cpx, cpy);
|
|
||||||
break;
|
|
||||||
case 'T':
|
|
||||||
var ctlPtx = cpx, ctlPty = cpy;
|
|
||||||
var prevCmd = ca[ca.length - 1];
|
|
||||||
if(prevCmd.command === 'Q') {
|
|
||||||
ctlPtx = cpx + (cpx - prevCmd.points[0]);
|
|
||||||
ctlPty = cpy + (cpy - prevCmd.points[1]);
|
|
||||||
}
|
|
||||||
cpx = p.shift();
|
|
||||||
cpy = p.shift();
|
|
||||||
cmd = 'Q';
|
|
||||||
points.push(ctlPtx, ctlPty, cpx, cpy);
|
|
||||||
break;
|
|
||||||
case 't':
|
|
||||||
var ctlPtx = cpx, ctlPty = cpy;
|
|
||||||
var prevCmd = ca[ca.length - 1];
|
|
||||||
if(prevCmd.command === 'Q') {
|
|
||||||
ctlPtx = cpx + (cpx - prevCmd.points[0]);
|
|
||||||
ctlPty = cpy + (cpy - prevCmd.points[1]);
|
|
||||||
}
|
|
||||||
cpx += p.shift();
|
|
||||||
cpy += p.shift();
|
|
||||||
cmd = 'Q';
|
|
||||||
points.push(ctlPtx, ctlPty, cpx, cpy);
|
|
||||||
break;
|
|
||||||
case 'A':
|
|
||||||
var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift();
|
|
||||||
var x1 = cpx, y1 = cpy; cpx = p.shift(), cpy = p.shift();
|
|
||||||
cmd = 'A';
|
|
||||||
points = this.convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
|
|
||||||
break;
|
|
||||||
case 'a':
|
|
||||||
var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift();
|
|
||||||
var x1 = cpx, y1 = cpy; cpx += p.shift(), cpy += p.shift();
|
|
||||||
cmd = 'A';
|
|
||||||
points = this.convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
ca.push({
|
|
||||||
command: cmd || c,
|
|
||||||
points: points,
|
|
||||||
start: {
|
|
||||||
x: startX,
|
|
||||||
y: startY
|
|
||||||
},
|
|
||||||
pathLength: this.calcLength(startX, startY, cmd || c, points)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if(c === 'z' || c === 'Z')
|
|
||||||
ca.push({
|
|
||||||
command: 'z',
|
|
||||||
points: [],
|
|
||||||
start: undefined,
|
|
||||||
pathLength: 0
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return ca;
|
|
||||||
},
|
|
||||||
calcLength: function(x, y, cmd, points) {
|
|
||||||
var len, p1, p2;
|
|
||||||
var g = Kinetic.Geometry;
|
|
||||||
|
|
||||||
switch (cmd) {
|
|
||||||
case 'L':
|
|
||||||
return g.getLineLength(x, y, points[0], points[1]);
|
|
||||||
case 'C':
|
|
||||||
// Approximates by breaking curve into 100 line segments
|
|
||||||
len = 0.0;
|
|
||||||
p1 = g.getPointOnCubicBezier(0, x, y, points[0], points[1], points[2], points[3], points[4], points[5]);
|
|
||||||
for( t = 0.01; t <= 1; t += 0.01) {
|
|
||||||
p2 = g.getPointOnCubicBezier(t, x, y, points[0], points[1], points[2], points[3], points[4], points[5]);
|
|
||||||
len += g.getLineLength(p1.x, p1.y, p2.x, p2.y);
|
|
||||||
p1 = p2;
|
|
||||||
}
|
|
||||||
return len;
|
|
||||||
case 'Q':
|
|
||||||
// Approximates by breaking curve into 100 line segments
|
|
||||||
len = 0.0;
|
|
||||||
p1 = g.getPointOnQuadraticBezier(0, x, y, points[0], points[1], points[2], points[3]);
|
|
||||||
for( t = 0.01; t <= 1; t += 0.01) {
|
|
||||||
p2 = g.getPointOnQuadraticBezier(t, x, y, points[0], points[1], points[2], points[3]);
|
|
||||||
len += g.getLineLength(p1.x, p1.y, p2.x, p2.y);
|
|
||||||
p1 = p2;
|
|
||||||
}
|
|
||||||
return len;
|
|
||||||
case 'A':
|
|
||||||
// Approximates by breaking curve into line segments
|
|
||||||
len = 0.0;
|
|
||||||
var start = points[4];
|
|
||||||
// 4 = theta
|
|
||||||
var dTheta = points[5];
|
|
||||||
// 5 = dTheta
|
|
||||||
var end = points[4] + dTheta;
|
|
||||||
var inc = Math.PI / 180.0;
|
|
||||||
// 1 degree resolution
|
|
||||||
if(Math.abs(start - end) < inc) {
|
|
||||||
inc = Math.abs(start - end);
|
|
||||||
}
|
|
||||||
// Note: for purpose of calculating arc length, not going to worry about rotating X-axis by angle psi
|
|
||||||
p1 = g.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], start, 0);
|
|
||||||
if(dTheta < 0) {// clockwise
|
|
||||||
for( t = start - inc; t > end; t -= inc) {
|
|
||||||
p2 = g.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], t, 0);
|
|
||||||
len += g.getLineLength(p1.x, p1.y, p2.x, p2.y);
|
|
||||||
p1 = p2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {// counter-clockwise
|
|
||||||
for( t = start + inc; t < end; t += inc) {
|
|
||||||
p2 = g.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], t, 0);
|
|
||||||
len += g.getLineLength(p1.x, p1.y, p2.x, p2.y);
|
|
||||||
p1 = p2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
p2 = g.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], end, 0);
|
|
||||||
len += g.getLineLength(p1.x, p1.y, p2.x, p2.y);
|
|
||||||
|
|
||||||
return len;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
},
|
|
||||||
convertEndpointToCenterParameterization: function(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg) {
|
|
||||||
// Derived from: http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
|
|
||||||
var psi = psiDeg * (Math.PI / 180.0);
|
|
||||||
var xp = Math.cos(psi) * (x1 - x2) / 2.0 + Math.sin(psi) * (y1 - y2) / 2.0;
|
|
||||||
var yp = -1 * Math.sin(psi) * (x1 - x2) / 2.0 + Math.cos(psi) * (y1 - y2) / 2.0;
|
|
||||||
|
|
||||||
var lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry);
|
|
||||||
|
|
||||||
if(lambda > 1) {
|
|
||||||
rx *= Math.sqrt(lambda);
|
|
||||||
ry *= Math.sqrt(lambda);
|
|
||||||
}
|
|
||||||
|
|
||||||
var f = Math.sqrt((((rx * rx) * (ry * ry)) - ((rx * rx) * (yp * yp)) - ((ry * ry) * (xp * xp))) / ((rx * rx) * (yp * yp) + (ry * ry) * (xp * xp)));
|
|
||||||
|
|
||||||
if(fa == fs) {
|
|
||||||
f *= -1;
|
|
||||||
}
|
|
||||||
if(isNaN(f)) {
|
|
||||||
f = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
var cxp = f * rx * yp / ry;
|
|
||||||
var cyp = f * -ry * xp / rx;
|
|
||||||
|
|
||||||
var cx = (x1 + x2) / 2.0 + Math.cos(psi) * cxp - Math.sin(psi) * cyp;
|
|
||||||
var cy = (y1 + y2) / 2.0 + Math.sin(psi) * cxp + Math.cos(psi) * cyp;
|
|
||||||
|
|
||||||
var vMag = function(v) {
|
|
||||||
return Math.sqrt(v[0] * v[0] + v[1] * v[1]);
|
|
||||||
};
|
|
||||||
var vRatio = function(u, v) {
|
|
||||||
return (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v));
|
|
||||||
};
|
|
||||||
var vAngle = function(u, v) {
|
|
||||||
return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(vRatio(u, v));
|
|
||||||
};
|
|
||||||
var theta = vAngle([1, 0], [(xp - cxp) / rx, (yp - cyp) / ry]);
|
|
||||||
var u = [(xp - cxp) / rx, (yp - cyp) / ry];
|
|
||||||
var v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry];
|
|
||||||
var dTheta = vAngle(u, v);
|
|
||||||
|
|
||||||
if(vRatio(u, v) <= -1) {
|
|
||||||
dTheta = Math.PI;
|
|
||||||
}
|
|
||||||
if(vRatio(u, v) >= 1) {
|
|
||||||
dTheta = 0;
|
|
||||||
}
|
|
||||||
if(fs === 0 && dTheta > 0) {
|
|
||||||
dTheta = dTheta - 2 * Math.PI;
|
|
||||||
}
|
|
||||||
if(fs == 1 && dTheta < 0) {
|
|
||||||
dTheta = dTheta + 2 * Math.PI;
|
|
||||||
}
|
|
||||||
return [cx, cy, rx, ry, theta, dTheta, psi, fs];
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -26,9 +26,9 @@ Kinetic.Plugins.TextPath = Kinetic.Shape.extend({
|
|||||||
config.drawFunc = this.drawFunc;
|
config.drawFunc = this.drawFunc;
|
||||||
// call super constructor
|
// call super constructor
|
||||||
this._super(config);
|
this._super(config);
|
||||||
this.dataArray = this.parsePathData(this.attrs.data);
|
this.dataArray = Kinetic.Geometry.parsePathData(this.attrs.data);
|
||||||
this.on('dataChange', function() {
|
this.on('dataChange', function() {
|
||||||
that.dataArray = this.parsePathData(this.attrs.data);
|
that.dataArray = Kinetic.Geometry.parsePathData(this.attrs.data);
|
||||||
});
|
});
|
||||||
// update text data for certain attr changes
|
// update text data for certain attr changes
|
||||||
var attrs = ['text', 'textStroke', 'textStrokeWidth'];
|
var attrs = ['text', 'textStroke', 'textStrokeWidth'];
|
||||||
@@ -78,9 +78,6 @@ Kinetic.Plugins.TextPath = Kinetic.Shape.extend({
|
|||||||
|
|
||||||
context.restore();
|
context.restore();
|
||||||
},
|
},
|
||||||
parsePathData: Kinetic.Plugins.Path.prototype.parsePathData,
|
|
||||||
calcLength: Kinetic.Plugins.Path.prototype.calcLength,
|
|
||||||
convertEndpointToCenterParameterization: Kinetic.Plugins.Path.prototype.convertEndpointToCenterParameterization,
|
|
||||||
/**
|
/**
|
||||||
* get text width in pixels
|
* get text width in pixels
|
||||||
* @name getTextWidth
|
* @name getTextWidth
|
||||||
|
|||||||
@@ -98,5 +98,370 @@ Kinetic.Geometry = {
|
|||||||
x: cx + (pt.x * cosPsi - pt.y * sinPsi),
|
x: cx + (pt.x * cosPsi - pt.y * sinPsi),
|
||||||
y: cy + (pt.x * sinPsi + pt.y * cosPsi)
|
y: cy + (pt.x * sinPsi + pt.y * cosPsi)
|
||||||
};
|
};
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* get parsed data array from the data
|
||||||
|
* string. V, v, H, h, and l data are converted to
|
||||||
|
* L data for the purpose of high performance Path
|
||||||
|
* rendering
|
||||||
|
*/
|
||||||
|
parsePathData: function(data) {
|
||||||
|
// Path Data Segment must begin with a moveTo
|
||||||
|
//m (x y)+ Relative moveTo (subsequent points are treated as lineTo)
|
||||||
|
//M (x y)+ Absolute moveTo (subsequent points are treated as lineTo)
|
||||||
|
//l (x y)+ Relative lineTo
|
||||||
|
//L (x y)+ Absolute LineTo
|
||||||
|
//h (x)+ Relative horizontal lineTo
|
||||||
|
//H (x)+ Absolute horizontal lineTo
|
||||||
|
//v (y)+ Relative vertical lineTo
|
||||||
|
//V (y)+ Absolute vertical lineTo
|
||||||
|
//z (closepath)
|
||||||
|
//Z (closepath)
|
||||||
|
//c (x1 y1 x2 y2 x y)+ Relative Bezier curve
|
||||||
|
//C (x1 y1 x2 y2 x y)+ Absolute Bezier curve
|
||||||
|
//q (x1 y1 x y)+ Relative Quadratic Bezier
|
||||||
|
//Q (x1 y1 x y)+ Absolute Quadratic Bezier
|
||||||
|
//t (x y)+ Shorthand/Smooth Relative Quadratic Bezier
|
||||||
|
//T (x y)+ Shorthand/Smooth Absolute Quadratic Bezier
|
||||||
|
//s (x2 y2 x y)+ Shorthand/Smooth Relative Bezier curve
|
||||||
|
//S (x2 y2 x y)+ Shorthand/Smooth Absolute Bezier curve
|
||||||
|
//a (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ Relative Elliptical Arc
|
||||||
|
//A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ Absolute Elliptical Arc
|
||||||
|
|
||||||
|
// return early if data is not defined
|
||||||
|
if(!data) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// command string
|
||||||
|
var cs = data;
|
||||||
|
|
||||||
|
// command chars
|
||||||
|
var cc = ['m', 'M', 'l', 'L', 'v', 'V', 'h', 'H', 'z', 'Z', 'c', 'C', 'q', 'Q', 't', 'T', 's', 'S', 'a', 'A'];
|
||||||
|
// convert white spaces to commas
|
||||||
|
cs = cs.replace(new RegExp(' ', 'g'), ',');
|
||||||
|
// create pipes so that we can split the data
|
||||||
|
for(var n = 0; n < cc.length; n++) {
|
||||||
|
cs = cs.replace(new RegExp(cc[n], 'g'), '|' + cc[n]);
|
||||||
|
}
|
||||||
|
// create array
|
||||||
|
var arr = cs.split('|');
|
||||||
|
var ca = [];
|
||||||
|
// init context point
|
||||||
|
var cpx = 0;
|
||||||
|
var cpy = 0;
|
||||||
|
for(var n = 1; n < arr.length; n++) {
|
||||||
|
var str = arr[n];
|
||||||
|
var c = str.charAt(0);
|
||||||
|
str = str.slice(1);
|
||||||
|
// remove ,- for consistency
|
||||||
|
str = str.replace(new RegExp(',-', 'g'), '-');
|
||||||
|
// add commas so that it's easy to split
|
||||||
|
str = str.replace(new RegExp('-', 'g'), ',-');
|
||||||
|
str = str.replace(new RegExp('e,-', 'g'), 'e-');
|
||||||
|
var p = str.split(',');
|
||||||
|
if(p.length > 0 && p[0] === '') {
|
||||||
|
p.shift();
|
||||||
|
}
|
||||||
|
// convert strings to floats
|
||||||
|
for(var i = 0; i < p.length; i++) {
|
||||||
|
p[i] = parseFloat(p[i]);
|
||||||
|
}
|
||||||
|
while(p.length > 0) {
|
||||||
|
if(isNaN(p[0]))// case for a trailing comma before next command
|
||||||
|
break;
|
||||||
|
|
||||||
|
var cmd = null;
|
||||||
|
var points = [];
|
||||||
|
var startX = cpx, startY = cpy;
|
||||||
|
|
||||||
|
// convert l, H, h, V, and v to L
|
||||||
|
switch (c) {
|
||||||
|
|
||||||
|
// Note: Keep the lineTo's above the moveTo's in this switch
|
||||||
|
case 'l':
|
||||||
|
cpx += p.shift();
|
||||||
|
cpy += p.shift();
|
||||||
|
cmd = 'L';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'L':
|
||||||
|
cpx = p.shift();
|
||||||
|
cpy = p.shift();
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
|
||||||
|
// Note: lineTo handlers need to be above this point
|
||||||
|
case 'm':
|
||||||
|
cpx += p.shift();
|
||||||
|
cpy += p.shift();
|
||||||
|
cmd = 'M';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
c = 'l';
|
||||||
|
// subsequent points are treated as relative lineTo
|
||||||
|
break;
|
||||||
|
case 'M':
|
||||||
|
cpx = p.shift();
|
||||||
|
cpy = p.shift();
|
||||||
|
cmd = 'M';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
c = 'L';
|
||||||
|
// subsequent points are treated as absolute lineTo
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'h':
|
||||||
|
cpx += p.shift();
|
||||||
|
cmd = 'L';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'H':
|
||||||
|
cpx = p.shift();
|
||||||
|
cmd = 'L';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'v':
|
||||||
|
cpy += p.shift();
|
||||||
|
cmd = 'L';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'V':
|
||||||
|
cpy = p.shift();
|
||||||
|
cmd = 'L';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'C':
|
||||||
|
points.push(p.shift(), p.shift(), p.shift(), p.shift());
|
||||||
|
cpx = p.shift();
|
||||||
|
cpy = p.shift();
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'c':
|
||||||
|
points.push(cpx + p.shift(), cpy + p.shift(), cpx + p.shift(), cpy + p.shift());
|
||||||
|
cpx += p.shift();
|
||||||
|
cpy += p.shift();
|
||||||
|
cmd = 'C';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'S':
|
||||||
|
var ctlPtx = cpx, ctlPty = cpy;
|
||||||
|
var prevCmd = ca[ca.length - 1];
|
||||||
|
if(prevCmd.command === 'C') {
|
||||||
|
ctlPtx = cpx + (cpx - prevCmd.points[2]);
|
||||||
|
ctlPty = cpy + (cpy - prevCmd.points[3]);
|
||||||
|
}
|
||||||
|
points.push(ctlPtx, ctlPty, p.shift(), p.shift());
|
||||||
|
cpx = p.shift();
|
||||||
|
cpy = p.shift();
|
||||||
|
cmd = 'C';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 's':
|
||||||
|
var ctlPtx = cpx, ctlPty = cpy;
|
||||||
|
var prevCmd = ca[ca.length - 1];
|
||||||
|
if(prevCmd.command === 'C') {
|
||||||
|
ctlPtx = cpx + (cpx - prevCmd.points[2]);
|
||||||
|
ctlPty = cpy + (cpy - prevCmd.points[3]);
|
||||||
|
}
|
||||||
|
points.push(ctlPtx, ctlPty, cpx + p.shift(), cpy + p.shift());
|
||||||
|
cpx += p.shift();
|
||||||
|
cpy += p.shift();
|
||||||
|
cmd = 'C';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'Q':
|
||||||
|
points.push(p.shift(), p.shift());
|
||||||
|
cpx = p.shift();
|
||||||
|
cpy = p.shift();
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'q':
|
||||||
|
points.push(cpx + p.shift(), cpy + p.shift());
|
||||||
|
cpx += p.shift();
|
||||||
|
cpy += p.shift();
|
||||||
|
cmd = 'Q';
|
||||||
|
points.push(cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'T':
|
||||||
|
var ctlPtx = cpx, ctlPty = cpy;
|
||||||
|
var prevCmd = ca[ca.length - 1];
|
||||||
|
if(prevCmd.command === 'Q') {
|
||||||
|
ctlPtx = cpx + (cpx - prevCmd.points[0]);
|
||||||
|
ctlPty = cpy + (cpy - prevCmd.points[1]);
|
||||||
|
}
|
||||||
|
cpx = p.shift();
|
||||||
|
cpy = p.shift();
|
||||||
|
cmd = 'Q';
|
||||||
|
points.push(ctlPtx, ctlPty, cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 't':
|
||||||
|
var ctlPtx = cpx, ctlPty = cpy;
|
||||||
|
var prevCmd = ca[ca.length - 1];
|
||||||
|
if(prevCmd.command === 'Q') {
|
||||||
|
ctlPtx = cpx + (cpx - prevCmd.points[0]);
|
||||||
|
ctlPty = cpy + (cpy - prevCmd.points[1]);
|
||||||
|
}
|
||||||
|
cpx += p.shift();
|
||||||
|
cpy += p.shift();
|
||||||
|
cmd = 'Q';
|
||||||
|
points.push(ctlPtx, ctlPty, cpx, cpy);
|
||||||
|
break;
|
||||||
|
case 'A':
|
||||||
|
var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift();
|
||||||
|
var x1 = cpx, y1 = cpy;
|
||||||
|
cpx = p.shift(), cpy = p.shift();
|
||||||
|
cmd = 'A';
|
||||||
|
points = this.convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
|
||||||
|
break;
|
||||||
|
case 'a':
|
||||||
|
var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift();
|
||||||
|
var x1 = cpx, y1 = cpy;
|
||||||
|
cpx += p.shift(), cpy += p.shift();
|
||||||
|
cmd = 'A';
|
||||||
|
points = this.convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
ca.push({
|
||||||
|
command: cmd || c,
|
||||||
|
points: points,
|
||||||
|
start: {
|
||||||
|
x: startX,
|
||||||
|
y: startY
|
||||||
|
},
|
||||||
|
pathLength: this.calcLength(startX, startY, cmd || c, points)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if(c === 'z' || c === 'Z') {
|
||||||
|
ca.push({
|
||||||
|
command: 'z',
|
||||||
|
points: [],
|
||||||
|
start: undefined,
|
||||||
|
pathLength: 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return ca;
|
||||||
|
},
|
||||||
|
calcLength: function(x, y, cmd, points) {
|
||||||
|
var len, p1, p2;
|
||||||
|
var g = Kinetic.Geometry;
|
||||||
|
|
||||||
|
switch (cmd) {
|
||||||
|
case 'L':
|
||||||
|
return g.getLineLength(x, y, points[0], points[1]);
|
||||||
|
case 'C':
|
||||||
|
// Approximates by breaking curve into 100 line segments
|
||||||
|
len = 0.0;
|
||||||
|
p1 = g.getPointOnCubicBezier(0, x, y, points[0], points[1], points[2], points[3], points[4], points[5]);
|
||||||
|
for( t = 0.01; t <= 1; t += 0.01) {
|
||||||
|
p2 = g.getPointOnCubicBezier(t, x, y, points[0], points[1], points[2], points[3], points[4], points[5]);
|
||||||
|
len += g.getLineLength(p1.x, p1.y, p2.x, p2.y);
|
||||||
|
p1 = p2;
|
||||||
|
}
|
||||||
|
return len;
|
||||||
|
case 'Q':
|
||||||
|
// Approximates by breaking curve into 100 line segments
|
||||||
|
len = 0.0;
|
||||||
|
p1 = g.getPointOnQuadraticBezier(0, x, y, points[0], points[1], points[2], points[3]);
|
||||||
|
for( t = 0.01; t <= 1; t += 0.01) {
|
||||||
|
p2 = g.getPointOnQuadraticBezier(t, x, y, points[0], points[1], points[2], points[3]);
|
||||||
|
len += g.getLineLength(p1.x, p1.y, p2.x, p2.y);
|
||||||
|
p1 = p2;
|
||||||
|
}
|
||||||
|
return len;
|
||||||
|
case 'A':
|
||||||
|
// Approximates by breaking curve into line segments
|
||||||
|
len = 0.0;
|
||||||
|
var start = points[4];
|
||||||
|
// 4 = theta
|
||||||
|
var dTheta = points[5];
|
||||||
|
// 5 = dTheta
|
||||||
|
var end = points[4] + dTheta;
|
||||||
|
var inc = Math.PI / 180.0;
|
||||||
|
// 1 degree resolution
|
||||||
|
if(Math.abs(start - end) < inc) {
|
||||||
|
inc = Math.abs(start - end);
|
||||||
|
}
|
||||||
|
// Note: for purpose of calculating arc length, not going to worry about rotating X-axis by angle psi
|
||||||
|
p1 = g.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], start, 0);
|
||||||
|
if(dTheta < 0) {// clockwise
|
||||||
|
for( t = start - inc; t > end; t -= inc) {
|
||||||
|
p2 = g.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], t, 0);
|
||||||
|
len += g.getLineLength(p1.x, p1.y, p2.x, p2.y);
|
||||||
|
p1 = p2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {// counter-clockwise
|
||||||
|
for( t = start + inc; t < end; t += inc) {
|
||||||
|
p2 = g.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], t, 0);
|
||||||
|
len += g.getLineLength(p1.x, p1.y, p2.x, p2.y);
|
||||||
|
p1 = p2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p2 = g.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], end, 0);
|
||||||
|
len += g.getLineLength(p1.x, p1.y, p2.x, p2.y);
|
||||||
|
|
||||||
|
return len;
|
||||||
|
}
|
||||||
|
|
||||||
|
return 0;
|
||||||
|
},
|
||||||
|
convertEndpointToCenterParameterization: function(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg) {
|
||||||
|
// Derived from: http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
|
||||||
|
var psi = psiDeg * (Math.PI / 180.0);
|
||||||
|
var xp = Math.cos(psi) * (x1 - x2) / 2.0 + Math.sin(psi) * (y1 - y2) / 2.0;
|
||||||
|
var yp = -1 * Math.sin(psi) * (x1 - x2) / 2.0 + Math.cos(psi) * (y1 - y2) / 2.0;
|
||||||
|
|
||||||
|
var lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry);
|
||||||
|
|
||||||
|
if(lambda > 1) {
|
||||||
|
rx *= Math.sqrt(lambda);
|
||||||
|
ry *= Math.sqrt(lambda);
|
||||||
|
}
|
||||||
|
|
||||||
|
var f = Math.sqrt((((rx * rx) * (ry * ry)) - ((rx * rx) * (yp * yp)) - ((ry * ry) * (xp * xp))) / ((rx * rx) * (yp * yp) + (ry * ry) * (xp * xp)));
|
||||||
|
|
||||||
|
if(fa == fs) {
|
||||||
|
f *= -1;
|
||||||
|
}
|
||||||
|
if(isNaN(f)) {
|
||||||
|
f = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
var cxp = f * rx * yp / ry;
|
||||||
|
var cyp = f * -ry * xp / rx;
|
||||||
|
|
||||||
|
var cx = (x1 + x2) / 2.0 + Math.cos(psi) * cxp - Math.sin(psi) * cyp;
|
||||||
|
var cy = (y1 + y2) / 2.0 + Math.sin(psi) * cxp + Math.cos(psi) * cyp;
|
||||||
|
|
||||||
|
var vMag = function(v) {
|
||||||
|
return Math.sqrt(v[0] * v[0] + v[1] * v[1]);
|
||||||
|
};
|
||||||
|
var vRatio = function(u, v) {
|
||||||
|
return (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v));
|
||||||
|
};
|
||||||
|
var vAngle = function(u, v) {
|
||||||
|
return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(vRatio(u, v));
|
||||||
|
};
|
||||||
|
var theta = vAngle([1, 0], [(xp - cxp) / rx, (yp - cyp) / ry]);
|
||||||
|
var u = [(xp - cxp) / rx, (yp - cyp) / ry];
|
||||||
|
var v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry];
|
||||||
|
var dTheta = vAngle(u, v);
|
||||||
|
|
||||||
|
if(vRatio(u, v) <= -1) {
|
||||||
|
dTheta = Math.PI;
|
||||||
|
}
|
||||||
|
if(vRatio(u, v) >= 1) {
|
||||||
|
dTheta = 0;
|
||||||
|
}
|
||||||
|
if(fs === 0 && dTheta > 0) {
|
||||||
|
dTheta = dTheta - 2 * Math.PI;
|
||||||
|
}
|
||||||
|
if(fs == 1 && dTheta < 0) {
|
||||||
|
dTheta = dTheta + 2 * Math.PI;
|
||||||
|
}
|
||||||
|
return [cx, cy, rx, ry, theta, dTheta, psi, fs];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -5200,7 +5200,7 @@ Test.prototype.tests = {
|
|||||||
|
|
||||||
layer.add(path);
|
layer.add(path);
|
||||||
|
|
||||||
var centerParamPoints = path.convertEndpointToCenterParameterization(50, 100, 150, 150, 1, 1, 100, 50, 0);
|
var centerParamPoints = Kinetic.Geometry.convertEndpointToCenterParameterization(50, 100, 150, 150, 1, 1, 100, 50, 0);
|
||||||
|
|
||||||
var start = centerParamPoints[4];
|
var start = centerParamPoints[4];
|
||||||
// 4 = theta
|
// 4 = theta
|
||||||
@@ -5262,7 +5262,7 @@ Test.prototype.tests = {
|
|||||||
|
|
||||||
layer.add(path);
|
layer.add(path);
|
||||||
|
|
||||||
var centerParamPoints = path.convertEndpointToCenterParameterization(250, 100, 150, 150, 1, 0, 100, 50, 0);
|
var centerParamPoints = Kinetic.Geometry.convertEndpointToCenterParameterization(250, 100, 150, 150, 1, 0, 100, 50, 0);
|
||||||
|
|
||||||
var start = centerParamPoints[4];
|
var start = centerParamPoints[4];
|
||||||
// 4 = theta
|
// 4 = theta
|
||||||
@@ -5324,7 +5324,7 @@ Test.prototype.tests = {
|
|||||||
|
|
||||||
layer.add(path);
|
layer.add(path);
|
||||||
|
|
||||||
var centerParamPoints = path.convertEndpointToCenterParameterization(250, 100, 150, 150, 1, 0, 100, 50, 30);
|
var centerParamPoints = Kinetic.Geometry.convertEndpointToCenterParameterization(250, 100, 150, 150, 1, 0, 100, 50, 30);
|
||||||
|
|
||||||
var start = centerParamPoints[4];
|
var start = centerParamPoints[4];
|
||||||
// 4 = theta
|
// 4 = theta
|
||||||
|
|||||||
Reference in New Issue
Block a user