mirror of
https://github.com/konvajs/konva.git
synced 2025-09-18 18:27:58 +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),
|
||||
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;
|
||||
// call super constructor
|
||||
this._super(config);
|
||||
this.dataArray = this.parsePathData(this.attrs.data);
|
||||
this.dataArray = Kinetic.Geometry.parsePathData(this.attrs.data);
|
||||
this.on('dataChange', function() {
|
||||
that.dataArray = this.parsePathData(that.attrs.data);
|
||||
that.dataArray = Kinetic.Geometry.parsePathData(that.attrs.data);
|
||||
});
|
||||
},
|
||||
drawFunc: function(context) {
|
||||
@@ -65,368 +65,6 @@ Kinetic.Plugins.Path = Kinetic.Shape.extend({
|
||||
}
|
||||
this.fill(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;
|
||||
// call super constructor
|
||||
this._super(config);
|
||||
this.dataArray = this.parsePathData(this.attrs.data);
|
||||
this.dataArray = Kinetic.Geometry.parsePathData(this.attrs.data);
|
||||
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
|
||||
var attrs = ['text', 'textStroke', 'textStrokeWidth'];
|
||||
@@ -78,9 +78,6 @@ Kinetic.Plugins.TextPath = Kinetic.Shape.extend({
|
||||
|
||||
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
|
||||
* @name getTextWidth
|
||||
|
||||
@@ -98,5 +98,370 @@ Kinetic.Geometry = {
|
||||
x: cx + (pt.x * cosPsi - pt.y * sinPsi),
|
||||
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);
|
||||
|
||||
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];
|
||||
// 4 = theta
|
||||
@@ -5262,7 +5262,7 @@ Test.prototype.tests = {
|
||||
|
||||
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];
|
||||
// 4 = theta
|
||||
@@ -5324,7 +5324,7 @@ Test.prototype.tests = {
|
||||
|
||||
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];
|
||||
// 4 = theta
|
||||
|
||||
Reference in New Issue
Block a user