lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

TextPath extends Shape instead of Path. Extracted common path functions into PathHelper.js. Updated unit tests.

Browse Source
This commit is contained in:
Jason Follas 2012-07-27 12:25:36 -04:00
parent eccd8b7e64
commit 5d77471f7e
4 changed files with 3969 additions and 3912 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

568
src/plugins/shapes/Path.js
View File

@ -9,148 +9,153 @@
* @param {Object} config * @param {Object} config
*/ */
Kinetic.Path = Kinetic.Shape.extend({ Kinetic.Path = Kinetic.Shape.extend({
init: function(config) { init : function (config) {
this.shapeType = "Path"; this.shapeType = "Path";
this.dataArray = []; this.dataArray = [];
var that = this; var that = this;
if (config.drawFunc == null) { config.drawFunc = function (context) {
config.drawFunc = function(context) {
var ca = this.dataArray; var ca = this.dataArray;
// context position // context position
context.beginPath(); context.beginPath();
for(var n = 0; n < ca.length; n++) { for (var n = 0; n < ca.length; n++) {
var c = ca[n].command; var c = ca[n].command;
var p = ca[n].points; var p = ca[n].points;
switch(c) { switch (c) {
case 'L': case 'L':
context.lineTo(p[0], p[1]); context.lineTo(p[0], p[1]);
break; break;
case 'M': case 'M':
context.moveTo(p[0], p[1]); context.moveTo(p[0], p[1]);
break; break;
case 'C': case 'C':
context.bezierCurveTo(p[0], p[1], p[2], p[3], p[4], p[5]); context.bezierCurveTo(p[0], p[1], p[2], p[3], p[4], p[5]);
break; break;
case 'Q': case 'Q':
context.quadraticCurveTo(p[0], p[1], p[2], p[3]); context.quadraticCurveTo(p[0], p[1], p[2], p[3]);
break; break;
case 'A': case 'A':
var cx = p[0], cy = p[1], rx = p[2], ry = p[3], theta = p[4], dTheta = p[5], psi = p[6], fs = p[7]; var cx = p[0],
cy = p[1],
var r = (rx > ry) ? rx : ry; rx = p[2],
var scaleX = (rx > ry) ? 1 : rx / ry; ry = p[3],
var scaleY = (rx > ry) ? ry / rx : 1; theta = p[4],
dTheta = p[5],
context.translate(cx, cy); psi = p[6],
context.rotate(psi); fs = p[7];
context.scale(scaleX, scaleY);
context.arc(0, 0, r, theta, theta + dTheta, 1 - fs); var r = (rx > ry) ? rx : ry;
context.scale(1 / scaleX, 1 / scaleY); var scaleX = (rx > ry) ? 1 : rx / ry;
context.rotate(-psi); var scaleY = (rx > ry) ? ry / rx : 1;
context.translate(-cx, -cy);
context.translate(cx, cy);
break; context.rotate(psi);
case 'z': context.scale(scaleX, scaleY);
context.closePath(); context.arc(0, 0, r, theta, theta + dTheta, 1 - fs);
break; context.scale(1 / scaleX, 1 / scaleY);
context.rotate(-psi);
context.translate(-cx, -cy);
break;
case 'z':
context.closePath();
break;
} }
} }
this.fill(context); this.fill(context);
this.stroke(context); this.stroke(context);
}; };
}
// call super constructor
// call super constructor this._super(config);
this._super(config);
this.dataArray = this._getDataArray();
this.dataArray = this._getDataArray();
this.on('dataChange', function () {
this.on('dataChange', function() { that.dataArray = that._getDataArray();
that.dataArray = that._getDataArray(); });
}); },
}, /**
/** * get parsed data array from the data
* get parsed data array from the data * string. V, v, H, h, and l data are converted to
* string. V, v, H, h, and l data are converted to * L data for the purpose of high performance Path
* L data for the purpose of high performance Path * rendering
* rendering */
*/ _getDataArray : function () {
_getDataArray: function() {
// Path Data Segment must begin with a moveTo
// Path Data Segment must begin with a moveTo //m (x y)+ Relative moveTo (subsequent points are treated as lineTo)
//m (x y)+ Relative moveTo (subsequent points are treated as lineTo) //M (x y)+ Absolute 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)+ Relative lineTo //L (x y)+ Absolute LineTo
//L (x y)+ Absolute LineTo //h (x)+ Relative horizontal lineTo
//h (x)+ Relative horizontal lineTo //H (x)+ Absolute horizontal lineTo
//H (x)+ Absolute horizontal lineTo //v (y)+ Relative vertical lineTo
//v (y)+ Relative vertical lineTo //V (y)+ Absolute vertical lineTo
//V (y)+ Absolute vertical lineTo //z (closepath)
//z (closepath) //Z (closepath)
//Z (closepath) //c (x1 y1 x2 y2 x y)+ Relative Bezier curve
//c (x1 y1 x2 y2 x y)+ Relative Bezier curve //C (x1 y1 x2 y2 x y)+ Absolute 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)+ Relative Quadratic Bezier //Q (x1 y1 x y)+ Absolute Quadratic Bezier
//Q (x1 y1 x y)+ Absolute Quadratic Bezier //t (x y)+ Shorthand/Smooth Relative Quadratic Bezier
//t (x y)+ Shorthand/Smooth Relative Quadratic Bezier //T (x y)+ Shorthand/Smooth Absolute 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 Relative Bezier curve //S (x2 y2 x y)+ Shorthand/Smooth Absolute 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)+ Relative Elliptical Arc //A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ Absolute Elliptical Arc
//A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ Absolute Elliptical Arc
// command string
// command string var cs = this.attrs.data;
var cs = this.attrs.data;
// return early if data is not defined
// return early if data is not defined if (!this.attrs.data) {
if(!this.attrs.data) { return [];
return [];
}
// 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 // command chars
for(var i = 0; i < p.length; i++) { var cc = ['m', 'M', 'l', 'L', 'v', 'V', 'h', 'H', 'z', 'Z', 'c', 'C', 'q', 'Q', 't', 'T', 's', 'S', 'a', 'A'];
p[i] = parseFloat(p[i]); // 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
while(p.length > 0) { var arr = cs.split('|');
if(isNaN(p[0]))// case for a trailing comma before next command var ca = [];
break; // init context point
var cpx = 0;
var cmd = undefined; var cpy = 0;
var points = []; for (var n = 1; n < arr.length; n++) {
var startX = cpx, startY = cpy; var str = arr[n];
var c = str.charAt(0);
// convert l, H, h, V, and v to L str = str.slice(1);
switch(c) { // remove ,- for consistency
str = str.replace(new RegExp(',-', 'g'), '-');
// Note: Keep the lineTo's above the moveTo's in this switch // 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': case 'l':
cpx += p.shift(); cpx += p.shift();
cpy += p.shift(); cpy += p.shift();
@ -162,8 +167,8 @@ Kinetic.Path = Kinetic.Shape.extend({
cpy = p.shift(); cpy = p.shift();
points.push(cpx, cpy); points.push(cpx, cpy);
break; break;
// Note: lineTo handlers need to be above this point // Note: lineTo handlers need to be above this point
case 'm': case 'm':
cpx += p.shift(); cpx += p.shift();
cpy += p.shift(); cpy += p.shift();
@ -180,7 +185,7 @@ Kinetic.Path = Kinetic.Shape.extend({
c = 'L'; c = 'L';
// subsequent points are treated as absolute lineTo // subsequent points are treated as absolute lineTo
break; break;
case 'h': case 'h':
cpx += p.shift(); cpx += p.shift();
cmd = 'L'; cmd = 'L';
@ -211,30 +216,32 @@ Kinetic.Path = Kinetic.Shape.extend({
points.push(cpx + p.shift(), cpy + p.shift(), cpx + p.shift(), cpy + p.shift()); points.push(cpx + p.shift(), cpy + p.shift(), cpx + p.shift(), cpy + p.shift());
cpx += p.shift(); cpx += p.shift();
cpy += p.shift(); cpy += p.shift();
cmd = 'C' cmd = 'C';
points.push(cpx, cpy); points.push(cpx, cpy);
break; break;
case 'S': case 'S':
var ctlPtx = cpx, ctlPty = cpy; var ctlPtx = cpx,
ctlPty = cpy;
var prevCmd = ca[ca.length - 1]; var prevCmd = ca[ca.length - 1];
if(prevCmd.command === 'C') { if (prevCmd.command === 'C') {
ctlPtx = cpx + (cpx - prevCmd.points[2]); ctlPtx = cpx + (cpx - prevCmd.points[2]);
ctlPty = cpy + (cpy - prevCmd.points[3]); ctlPty = cpy + (cpy - prevCmd.points[3]);
} }
points.push(ctlPtx, ctlPty, p.shift(), p.shift()) points.push(ctlPtx, ctlPty, p.shift(), p.shift());
cpx = p.shift(); cpx = p.shift();
cpy = p.shift(); cpy = p.shift();
cmd = 'C'; cmd = 'C';
points.push(cpx, cpy); points.push(cpx, cpy);
break; break;
case 's': case 's':
var ctlPtx = cpx, ctlPty = cpy; var ctlPtx = cpx,
ctlPty = cpy;
var prevCmd = ca[ca.length - 1]; var prevCmd = ca[ca.length - 1];
if(prevCmd.command === 'C') { if (prevCmd.command === 'C') {
ctlPtx = cpx + (cpx - prevCmd.points[2]); ctlPtx = cpx + (cpx - prevCmd.points[2]);
ctlPty = cpy + (cpy - prevCmd.points[3]); ctlPty = cpy + (cpy - prevCmd.points[3]);
} }
points.push(ctlPtx, ctlPty, cpx + p.shift(), cpy + p.shift()) points.push(ctlPtx, ctlPty, cpx + p.shift(), cpy + p.shift());
cpx += p.shift(); cpx += p.shift();
cpy += p.shift(); cpy += p.shift();
cmd = 'C'; cmd = 'C';
@ -250,13 +257,14 @@ Kinetic.Path = Kinetic.Shape.extend({
points.push(cpx + p.shift(), cpy + p.shift()); points.push(cpx + p.shift(), cpy + p.shift());
cpx += p.shift(); cpx += p.shift();
cpy += p.shift(); cpy += p.shift();
cmd = 'Q' cmd = 'Q';
points.push(cpx, cpy); points.push(cpx, cpy);
break; break;
case 'T': case 'T':
var ctlPtx = cpx, ctlPty = cpy; var ctlPtx = cpx,
ctlPty = cpy;
var prevCmd = ca[ca.length - 1]; var prevCmd = ca[ca.length - 1];
if(prevCmd.command === 'Q') { if (prevCmd.command === 'Q') {
ctlPtx = cpx + (cpx - prevCmd.points[0]); ctlPtx = cpx + (cpx - prevCmd.points[0]);
ctlPty = cpy + (cpy - prevCmd.points[1]); ctlPty = cpy + (cpy - prevCmd.points[1]);
} }
@ -266,9 +274,10 @@ Kinetic.Path = Kinetic.Shape.extend({
points.push(ctlPtx, ctlPty, cpx, cpy); points.push(ctlPtx, ctlPty, cpx, cpy);
break; break;
case 't': case 't':
var ctlPtx = cpx, ctlPty = cpy; var ctlPtx = cpx,
ctlPty = cpy;
var prevCmd = ca[ca.length - 1]; var prevCmd = ca[ca.length - 1];
if(prevCmd.command === 'Q') { if (prevCmd.command === 'Q') {
ctlPtx = cpx + (cpx - prevCmd.points[0]); ctlPtx = cpx + (cpx - prevCmd.points[0]);
ctlPty = cpy + (cpy - prevCmd.points[1]); ctlPty = cpy + (cpy - prevCmd.points[1]);
} }
@ -278,240 +287,57 @@ Kinetic.Path = Kinetic.Shape.extend({
points.push(ctlPtx, ctlPty, cpx, cpy); points.push(ctlPtx, ctlPty, cpx, cpy);
break; break;
case 'A': case 'A':
var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift(); var rx = p.shift(),
var x1 = cpx, y1 = cpy; ry = p.shift(),
cpx = p.shift(), cpy = p.shift(); psi = p.shift(),
fa = p.shift(),
fs = p.shift();
var x1 = cpx,
y1 = cpy;
cpx = p.shift(),
cpy = p.shift();
cmd = 'A'; cmd = 'A';
points = this._convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi); points = Kinetic.PathHelper.convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
break; break;
case 'a': case 'a':
var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift(); var rx = p.shift(),
var x1 = cpx, y1 = cpy; ry = p.shift(),
cpx += p.shift(), cpy += p.shift(); psi = p.shift(),
fa = p.shift(),
fs = p.shift();
var x1 = cpx,
y1 = cpy;
cpx += p.shift(),
cpy += p.shift();
cmd = 'A'; cmd = 'A';
points = this._convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi); points = Kinetic.PathHelper.convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
break; break;
}
ca.push({
command : cmd || c,
points : points,
start : {
x : startX,
y : startY
},
pathLength : Kinetic.PathHelper.calcLength(startX, startY, cmd || c, points)
});
} }
ca.push({ if (c === 'z' || c === 'Z')
command: cmd || c, ca.push({
points: points, command : 'z',
start: {x: startX, y: startY}, points : [],
pathLength: this._calcLength(startX, startY, cmd || c, points) start : undefined,
}); pathLength : 0
});
} }
if(c === 'z' || c === 'Z')
ca.push({
command: 'z',
points: [],
start: undefined,
pathLength: 0
});
}
return ca;
},
_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];
},
_calcLength: function(x, y, cmd, points) {
switch (cmd) {
case 'L':
return this._getLineLength(x, y, points[0], points[1]);
case 'C':
// Approximates by breaking curve into 100 line segments
var len = 0.0;
var p1 = this._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)
{
var p2 = this._getPointOnCubicBezier(t, x, y, points[0], points[1], points[2], points[3], points[4], points[5]);
len += this._getLineLength(p1.x, p1.y, p2.x, p2.y);
p1 = p2;
}
return len;
case 'Q':
// Approximates by breaking curve into 100 line segments
var len = 0.0;
var p1 = this._getPointOnQuadraticBezier(0, x, y, points[0], points[1], points[2], points[3]);
for (t=0.01; t <= 1; t += 0.01)
{
var p2 = this._getPointOnQuadraticBezier(t, x, y, points[0], points[1], points[2], points[3]);
len += this._getLineLength(p1.x, p1.y, p2.x, p2.y);
p1 = p2;
}
return len;
case 'A':
// Approximates by breaking curve into line segments
var 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
var p1 = this._getPointOnEllipticalArc(points[0], points[1], points[2], points[3], start, 0);
if (dTheta < 0) // clockwise
{
for (t=start - inc; t > end; t -= inc)
{
var p2 = this._getPointOnEllipticalArc(points[0], points[1], points[2], points[3], t, 0)
len += this._getLineLength(p1.x, p1.y, p2.x, p2.y);
p1 = p2
}
}
else // counter-clockwise
{
for (t=start + inc; t < end; t += inc)
{
var p2 = this._getPointOnEllipticalArc(points[0], points[1], points[2], points[3], t, 0)
len += this._getLineLength(p1.x, p1.y, p2.x, p2.y);
p1 = p2
}
}
var p2 = this._getPointOnEllipticalArc(points[0], points[1], points[2], points[3], end, 0)
len += this._getLineLength(p1.x, p1.y, p2.x, p2.y);
return len;
}
return 0;
},
_getLineLength: function(x1, y1, x2, y2) {
return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
},
_getPointOnLine: function(dist, P1x, P1y, P2x, P2y, fromX, fromY) {
if (fromX === undefined)
fromX = P1x;
if (fromY === undefined) return ca;
fromY = P1y;
var m = (P2y - P1y) / ((P2x - P1x) + .00000001);
var b = -1 * m * P1x + P1y;
var run = Math.sqrt(dist * dist / (1 + m * m));
var rise = m * run;
if ((fromY - P1y) / ((fromX - P1x) + .00000001) === m)
{
return {x: fromX + run, y: fromY + rise};
} }
else });
{
var ix, iy;
var len = this._getLineLength(P1x, P1y, P2x, P2y)
if (len < 0.00000001)
return undefined;
var u = (((fromX - P1x) * (P2x - P1x)) + ((fromY - P1y) * (P2y - P1y)))
u = u / (len * len)
ix = P1x + u * (P2x - P1x)
iy = P1y + u * (P2y - P1y)
var pRise = this._getLineLength(fromX, fromY, ix, iy);
var pRun = Math.sqrt(dist * dist - pRise * pRise);
run = Math.sqrt(pRun * pRun / (1 + m * m));
rise = m * run;
return {x: ix + run, y: iy + rise};
}
},
_getPointOnCubicBezier: function(pct, P1x, P1y, P2x, P2y, P3x, P3y, P4x, P4y) {
function CB1(t) { return t * t * t }
function CB2(t) { return 3 * t * t * (1 - t) }
function CB3(t) { return 3 * t * (1 - t) * (1 - t) }
function CB4(t) { return (1 - t) * (1 - t) * (1 - t) }
var x = P4x * CB1(pct) + P3x * CB2(pct) + P2x * CB3(pct) + P1x * CB4(pct);
var y = P4y * CB1(pct) + P3y * CB2(pct) + P2y * CB3(pct) + P1y * CB4(pct);
return {x: x, y: y};
},
_getPointOnQuadraticBezier: function(pct, P1x, P1y, P2x, P2y, P3x, P3y) {
function QB1(t) { return t * t }
function QB2(t) { return 2 * t * (1 - t) }
function QB3(t) { return (1 - t) * (1 - t) }
var x = P3x * QB1(pct) + P2x * QB2(pct) + P1x * QB3(pct);
var y = P3y * QB1(pct) + P2y * QB2(pct) + P1y * QB3(pct);
return {x: x, y: y};
},
_getPointOnEllipticalArc: function(cx, cy, rx, ry, theta, psi) {
var cosPsi = Math.cos(psi), sinPsi = Math.sin(psi);
var pt = {x: rx * Math.cos(theta), y: ry * Math.sin(theta)};
return {x: cx + (pt.x * cosPsi - pt.y * sinPsi), y: cy + (pt.x * sinPsi + pt.y * cosPsi)};
}
});
// add getters setters // add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Path, ['data']); Kinetic.Node.addGettersSetters(Kinetic.Path, ['data']);
@ -530,4 +356,4 @@ Kinetic.Node.addGettersSetters(Kinetic.Path, ['data']);
* get SVG path data string * get SVG path data string
* @name getData * @name getData
* @methodOf Kinetic.Path.prototype * @methodOf Kinetic.Path.prototype
*/ */

434
src/plugins/shapes/TextPath.js
View File

@ -8,274 +8,286 @@
* @augments Kinetic.Path * @augments Kinetic.Path
* @param {Object} config * @param {Object} config
*/ */
Kinetic.TextPath = Kinetic.Path.extend({ Kinetic.TextPath = Kinetic.Shape.extend({
init: function(config) { init : function (config) {
this.setDefaultAttrs({
fontFamily: 'Calibri', this.setDefaultAttrs({
fontSize: 12, fontFamily : 'Calibri',
fontStyle: 'normal', fontSize : 12,
detectionType: 'path', fontStyle : 'normal',
text: '' detectionType : 'path',
}); text : ''
});
this.dummyCanvas = document.createElement('canvas');
this.shapeType = "TextPath"; this.dummyCanvas = document.createElement('canvas');
var that = this; this.shapeType = "TextPath";
this.dataArray = [];
config.drawFunc = function(context) { var that = this;
var charArr = this.charArr;
this._getDataArray = Kinetic.Path.prototype._getDataArray;
context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
context.textBaseline = 'middle'; config.drawFunc = function (context) {
context.textAlign = 'left'; var charArr = this.charArr;
context.save();
context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
var glyphInfo = this.glyphInfo; context.textBaseline = 'middle';
context.textAlign = 'left';
for (var i=0; i < glyphInfo.length; i++)
{
context.save(); context.save();
var p0 = glyphInfo[i].p0; var glyphInfo = this.glyphInfo;
var p1 = glyphInfo[i].p1;
var ht = parseFloat(this.attrs.fontSize);
context.translate(p0.x, p0.y); for (var i = 0; i < glyphInfo.length; i++) {
context.save();
context.rotate(glyphInfo[i].rotation);
this.fillText(context, glyphInfo[i].text);
this.strokeText(context, glyphInfo[i].text);
context.restore();
//// To assist with debugging visually, uncomment following
// context.beginPath();
// if (i % 2)
// context.strokeStyle = 'cyan';
// else
// context.strokeStyle = 'green';
// context.moveTo(p0.x, p0.y);
// context.lineTo(p1.x, p1.y);
// context.stroke();
}
context.restore();
};
// call super constructor
this._super(config);
// update text data for certain attr changes
var attrs = ['padding', 'text', 'textStroke', 'textStrokeWidth'];
for(var n = 0; n < attrs.length; n++) {
var attr = attrs[n];
this.on(attr + 'Change', that._setTextData);
}
that._setTextData();
},
/**
* get text width in pixels
*/
getTextWidth: function() {
return this.textWidth;
},
/**
* get text height in pixels
*/
getTextHeight: function() {
return this.textHeight;
},
_getTextSize: function(text) {
var dummyCanvas = this.dummyCanvas;
var context = dummyCanvas.getContext('2d');
context.save();
context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
var metrics = context.measureText(text);
context.restore();
return {
width: metrics.width,
height: parseInt(this.attrs.fontSize, 10)
};
},
/**
* set text data.
*/
_setTextData: function() {
var that = this;
var size = this._getTextSize(this.attrs.text);
this.textWidth = size.width;
this.textHeight = size.height;
this.glyphInfo = [];
var charArr = this.attrs.text.split('');
var p0 = undefined;
var p1 = undefined;
var pathCmd = undefined;
var pIndex = -1;
var currentT = 0;
var getNextPathSegment = function() {
currentT = 0;
var pathData = that.dataArray;
for (var i = pIndex + 1; i < pathData.length; i++) {
if (pathData[i].pathLength > 0) {
pIndex = i;
return pathData[i]; var p0 = glyphInfo[i].p0;
} var p1 = glyphInfo[i].p1;
else if (pathData[i].command == 'M') { var ht = parseFloat(this.attrs.fontSize);
p0 = {x: pathData[i].points[0], y: pathData[i].points[1]};
context.translate(p0.x, p0.y);
context.rotate(glyphInfo[i].rotation);
this.fillText(context, glyphInfo[i].text);
this.strokeText(context, glyphInfo[i].text);
context.restore();
//// To assist with debugging visually, uncomment following
// context.beginPath();
// if (i % 2)
// context.strokeStyle = 'cyan';
// else
// context.strokeStyle = 'green';
// context.moveTo(p0.x, p0.y);
// context.lineTo(p1.x, p1.y);
// context.stroke();
} }
context.restore();
};
// call super constructor
this._super(config);
this.dataArray = this._getDataArray();
this.on('dataChange', function () {
that.dataArray = that._getDataArray();
});
// update text data for certain attr changes
var attrs = ['padding', 'text', 'textStroke', 'textStrokeWidth'];
for (var n = 0; n < attrs.length; n++) {
var attr = attrs[n];
this.on(attr + 'Change', that._setTextData);
} }
return {}; that._setTextData();
} },
/**
var findSegmentToFitCharacter = function(c, before) { * get text width in pixels
*/
getTextWidth : function () {
return this.textWidth;
},
/**
* get text height in pixels
*/
getTextHeight : function () {
return this.textHeight;
},
_getTextSize : function (text) {
var dummyCanvas = this.dummyCanvas;
var context = dummyCanvas.getContext('2d');
var glyphWidth = that._getTextSize(c).width; context.save();
var currLen = 0; context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
var attempts = 0; var metrics = context.measureText(text);
var needNextSegment = false;
p1 = undefined; context.restore();
while (Math.abs(glyphWidth - currLen) / glyphWidth > 0.01 && attempts < 25) { return {
attempts++; width : metrics.width,
var cumulativePathLength = currLen; height : parseInt(this.attrs.fontSize, 10)
};
},
/**
* set text data.
*/
_setTextData : function () {
var that = this;
var size = this._getTextSize(this.attrs.text);
this.textWidth = size.width;
this.textHeight = size.height;
this.glyphInfo = [];
var charArr = this.attrs.text.split('');
var p0,
p1,
pathCmd;
var pIndex = -1;
var currentT = 0;
var getNextPathSegment = function () {
currentT = 0;
var pathData = that.dataArray;
while (pathCmd === undefined) { for (var i = pIndex + 1; i < pathData.length; i++) {
pathCmd = getNextPathSegment(); if (pathData[i].pathLength > 0) {
pIndex = i;
if (pathCmd && cumulativePathLength + pathCmd.pathLength < glyphWidth)
{ return pathData[i];
cumulativePathLength += pathCmd.pathLength; } else if (pathData[i].command == 'M') {
pathCmd = undefined; p0 = {
x : pathData[i].points[0],
y : pathData[i].points[1]
};
} }
} }
if (pathCmd === {} || p0 === undefined)
return undefined;
var needNewSegment = false;
switch(pathCmd.command) { return {};
case 'L': };
if (that._getLineLength(p0.x, p0.y, pathCmd.points[0], pathCmd.points[1]) > glyphWidth)
{ var findSegmentToFitCharacter = function (c, before) {
p1 = that._getPointOnLine(glyphWidth, p0.x, p0.y, pathCmd.points[0], pathCmd.points[1], p0.x, p0.y);
var glyphWidth = that._getTextSize(c).width;
var currLen = 0;
var attempts = 0;
var needNextSegment = false;
p1 = undefined;
while (Math.abs(glyphWidth - currLen) / glyphWidth > 0.01 && attempts < 25) {
attempts++;
var cumulativePathLength = currLen;
while (pathCmd === undefined) {
pathCmd = getNextPathSegment();
if (pathCmd && cumulativePathLength + pathCmd.pathLength < glyphWidth) {
cumulativePathLength += pathCmd.pathLength;
pathCmd = undefined;
} }
else }
if (pathCmd === {}
|| p0 === undefined)
return undefined;
var needNewSegment = false;
switch (pathCmd.command) {
case 'L':
if (Kinetic.PathHelper.getLineLength(p0.x, p0.y, pathCmd.points[0], pathCmd.points[1]) > glyphWidth) {
p1 = Kinetic.PathHelper.getPointOnLine(glyphWidth, p0.x, p0.y, pathCmd.points[0], pathCmd.points[1], p0.x, p0.y);
} else
pathCmd = undefined; pathCmd = undefined;
break; break;
case 'A': case 'A':
var start = pathCmd.points[4]; // 4 = theta
var dTheta = pathCmd.points[5];// 5 = dTheta
var end = pathCmd.points[4] + dTheta;
if (currentT == 0) var start = pathCmd.points[4]; // 4 = theta
currentT = start + 0.00000001; // Just in case start is 0 var dTheta = pathCmd.points[5]; // 5 = dTheta
var end = pathCmd.points[4] + dTheta;
if (currentT === 0)
currentT = start + 0.00000001; // Just in case start is 0
else if (glyphWidth > currLen) else if (glyphWidth > currLen)
currentT += (Math.PI / 180.0) * dTheta / Math.abs(dTheta); currentT += (Math.PI / 180.0) * dTheta / Math.abs(dTheta);
else else
currentT -= Math.PI / 360.0 * dTheta / Math.abs(dTheta); currentT -= Math.PI / 360.0 * dTheta / Math.abs(dTheta);
if (Math.abs(currentT) > Math.abs(end)) { if (Math.abs(currentT) > Math.abs(end)) {
currentT = end; currentT = end;
needNewSegment = true; needNewSegment = true;
} }
p1 = that._getPointOnEllipticalArc(pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], currentT, pathCmd.points[6]); p1 = Kinetic.PathHelper.getPointOnEllipticalArc(pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], currentT, pathCmd.points[6]);
break; break;
case 'C': case 'C':
if (currentT == 0) { if (currentT === 0) {
if (glyphWidth > pathCmd.pathLength) if (glyphWidth > pathCmd.pathLength)
currentT = 0.00000001; currentT = 0.00000001;
else else
currentT = glyphWidth / pathCmd.pathLength; currentT = glyphWidth / pathCmd.pathLength;
} } else if (glyphWidth > currLen)
else if (glyphWidth > currLen)
currentT += (glyphWidth - currLen) / pathCmd.pathLength; currentT += (glyphWidth - currLen) / pathCmd.pathLength;
else else
currentT -= (currLen - glyphWidth) / pathCmd.pathLength; currentT -= (currLen - glyphWidth) / pathCmd.pathLength;
if (currentT > 1.0) { if (currentT > 1.0) {
currentT = 1.0; currentT = 1.0;
needNewSegment = true; needNewSegment = true;
} }
p1 = that._getPointOnCubicBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], pathCmd.points[4], pathCmd.points[5]) p1 = Kinetic.PathHelper.getPointOnCubicBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], pathCmd.points[4], pathCmd.points[5]);
break; break;
case 'Q': case 'Q':
if (currentT == 0) if (currentT === 0)
currentT = glyphWidth / pathCmd.pathLength; currentT = glyphWidth / pathCmd.pathLength;
else if (glyphWidth > currLen) else if (glyphWidth > currLen)
currentT += (glyphWidth - currLen) / pathCmd.pathLength; currentT += (glyphWidth - currLen) / pathCmd.pathLength;
else else
currentT -= (currLen - glyphWidth) / pathCmd.pathLength; currentT -= (currLen - glyphWidth) / pathCmd.pathLength;
if (currentT > 1.0) { if (currentT > 1.0) {
currentT = 1.0; currentT = 1.0;
needNewSegment = true; needNewSegment = true;
} }
p1 = that._getPointOnQuadraticBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3]) p1 = Kinetic.PathHelper.getPointOnQuadraticBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3]);
break; break;
}
if (p1 !== undefined) {
currLen = Kinetic.PathHelper.getLineLength(p0.x, p0.y, p1.x, p1.y);
}
if (needNewSegment) {
needNewSegment = false;
pathCmd = undefined;
}
} }
};
for (var i = 0; i < charArr.length; i++) {
if (p1 !== undefined) // Find p1 such that line segment between p0 and p1 is approx. width of glyph
{ findSegmentToFitCharacter(charArr[i]);
currLen = that._getLineLength(p0.x, p0.y, p1.x, p1.y);
}
if (needNewSegment) { if (p0 === undefined || p1 === undefined)
needNewSegment = false; break;
pathCmd = undefined;
} var width = Kinetic.PathHelper.getLineLength(p0.x, p0.y, p1.x, p1.y);
// Note: Since glyphs are rendered one at a time, any kerning pair data built into the font will not be used.
// Can foresee having a rough pair table built in that the developer can override as needed.
var kern = 0; // placeholder for future implementation
var midpoint = Kinetic.PathHelper.getPointOnLine(kern + width / 2.0, p0.x, p0.y, p1.x, p1.y);
var rotation = Math.atan2((p1.y - p0.y), (p1.x - p0.x));
this.glyphInfo.push({
transposeX : midpoint.x,
transposeY : midpoint.y,
text : charArr[i],
rotation : rotation,
p0 : p0,
p1 : p1
});
p0 = p1;
} }
} }
});
for (var i=0; i < charArr.length; i++) {
// Find p1 such that line segment between p0 and p1 is approx. width of glyph
findSegmentToFitCharacter(charArr[i]);
if (p0 === undefined || p1 === undefined)
break;
var width = this._getLineLength(p0.x, p0.y, p1.x, p1.y);
// Note: Since glyphs are rendered one at a time, any kerning pair data built into the font will not be used.
// Can foresee having a rough pair table built in that the developer can override as needed.
var kern = 0; // placeholder for future implementation
var midpoint = this._getPointOnLine(kern + width / 2.0, p0.x, p0.y, p1.x, p1.y);
var rotation = Math.atan2((p1.y - p0.y),(p1.x - p0.x));
this.glyphInfo.push({ transposeX: midpoint.x, transposeY: midpoint.y, text: charArr[i], rotation: rotation, p0:p0, p1:p1});
p0 = p1;
}
}
});
// add setters and getters // add setters and getters
Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'text']); Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'text']);

231
src/plugins/util/PathHelper.js Normal file
View File

@ -0,0 +1,231 @@
///////////////////////////////////////////////////////////////////////
// PathHelper
///////////////////////////////////////////////////////////////////////
Kinetic.PathHelper = {
calcLength : function (x, y, cmd, points) {
var len,
p1,
p2;
switch (cmd) {
case 'L':
return this.getLineLength(x, y, points[0], points[1]);
case 'C':
// Approximates by breaking curve into 100 line segments
len = 0.0;
p1 = this.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 = this.getPointOnCubicBezier(t, x, y, points[0], points[1], points[2], points[3], points[4], points[5]);
len += this.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 = this.getPointOnQuadraticBezier(0, x, y, points[0], points[1], points[2], points[3]);
for (t = 0.01; t <= 1; t += 0.01) {
p2 = this.getPointOnQuadraticBezier(t, x, y, points[0], points[1], points[2], points[3]);
len += this.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 = this.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], start, 0);
if (dTheta < 0) { // clockwise
for (t = start - inc; t > end; t -= inc) {
p2 = this.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], t, 0);
len += this.getLineLength(p1.x, p1.y, p2.x, p2.y);
p1 = p2;
}
} else { // counter-clockwise
for (t = start + inc; t < end; t += inc) {
p2 = this.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], t, 0);
len += this.getLineLength(p1.x, p1.y, p2.x, p2.y);
p1 = p2;
}
}
p2 = this.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], end, 0);
len += this.getLineLength(p1.x, p1.y, p2.x, p2.y);
return len;
}
return 0;
},
getLineLength : function (x1, y1, x2, y2) {
return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
},
getPointOnLine : function (dist, P1x, P1y, P2x, P2y, fromX, fromY) {
if (fromX === undefined) {
fromX = P1x;
}
if (fromY === undefined) {
fromY = P1y;
}
var m = (P2y - P1y) / ((P2x - P1x) + 0.00000001);
var run = Math.sqrt(dist * dist / (1 + m * m));
var rise = m * run;
var pt;
if ((fromY - P1y) / ((fromX - P1x) + 0.00000001) === m) {
pt = {
x : fromX + run,
y : fromY + rise
};
} else {
var ix,
iy;
var len = this.getLineLength(P1x, P1y, P2x, P2y);
if (len < 0.00000001) {
return undefined;
}
var u = (((fromX - P1x) * (P2x - P1x)) + ((fromY - P1y) * (P2y - P1y)));
u = u / (len * len);
ix = P1x + u * (P2x - P1x);
iy = P1y + u * (P2y - P1y);
var pRise = this.getLineLength(fromX, fromY, ix, iy);
var pRun = Math.sqrt(dist * dist - pRise * pRise);
run = Math.sqrt(pRun * pRun / (1 + m * m));
rise = m * run;
pt = {
x : ix + run,
y : iy + rise
};
}
return pt;
},
getPointOnCubicBezier : function (pct, P1x, P1y, P2x, P2y, P3x, P3y, P4x, P4y) {
function CB1(t) {
return t * t * t;
}
function CB2(t) {
return 3 * t * t * (1 - t);
}
function CB3(t) {
return 3 * t * (1 - t) * (1 - t);
}
function CB4(t) {
return (1 - t) * (1 - t) * (1 - t);
}
var x = P4x * CB1(pct) + P3x * CB2(pct) + P2x * CB3(pct) + P1x * CB4(pct);
var y = P4y * CB1(pct) + P3y * CB2(pct) + P2y * CB3(pct) + P1y * CB4(pct);
return {
x : x,
y : y
};
},
getPointOnQuadraticBezier : function (pct, P1x, P1y, P2x, P2y, P3x, P3y) {
function QB1(t) {
return t * t;
}
function QB2(t) {
return 2 * t * (1 - t);
}
function QB3(t) {
return (1 - t) * (1 - t);
}
var x = P3x * QB1(pct) + P2x * QB2(pct) + P1x * QB3(pct);
var y = P3y * QB1(pct) + P2y * QB2(pct) + P1y * QB3(pct);
return {
x : x,
y : y
};
},
getPointOnEllipticalArc : function (cx, cy, rx, ry, theta, psi) {
var cosPsi = Math.cos(psi),
sinPsi = Math.sin(psi);
var pt = {
x : rx * Math.cos(theta),
y : ry * Math.sin(theta)
};
return {
x : cx + (pt.x * cosPsi - pt.y * sinPsi),
y : cy + (pt.x * sinPsi + pt.y * cosPsi)
};
},
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];
}
};

6648
tests/js/unitTests.js
View File

File diff suppressed because one or more lines are too long