mirror of
https://github.com/konvajs/konva.git
synced 2025-11-18 17:21:36 +08:00
TextPath extends Shape instead of Path. Extracted common path functions into PathHelper.js. Updated unit tests.
This commit is contained in:
Jason Follas
@@ -14,7 +14,6 @@ Kinetic.Path = Kinetic.Shape.extend({
|
||||
this.dataArray = [];
|
||||
var that = this;
|
||||
|
||||
if (config.drawFunc == null) {
|
||||
config.drawFunc = function (context) {
|
||||
var ca = this.dataArray;
|
||||
// context position
|
||||
@@ -36,7 +35,14 @@ Kinetic.Path = Kinetic.Shape.extend({
|
||||
context.quadraticCurveTo(p[0], p[1], p[2], p[3]);
|
||||
break;
|
||||
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],
|
||||
rx = p[2],
|
||||
ry = p[3],
|
||||
theta = p[4],
|
||||
dTheta = p[5],
|
||||
psi = p[6],
|
||||
fs = p[7];
|
||||
|
||||
var r = (rx > ry) ? rx : ry;
|
||||
var scaleX = (rx > ry) ? 1 : rx / ry;
|
||||
@@ -59,7 +65,6 @@ Kinetic.Path = Kinetic.Shape.extend({
|
||||
this.fill(context);
|
||||
this.stroke(context);
|
||||
};
|
||||
}
|
||||
|
||||
// call super constructor
|
||||
this._super(config);
|
||||
@@ -138,14 +143,14 @@ Kinetic.Path = Kinetic.Shape.extend({
|
||||
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 = undefined;
|
||||
var cmd = null;
|
||||
var points = [];
|
||||
var startX = cpx, startY = cpy;
|
||||
var startX = cpx,
|
||||
startY = cpy;
|
||||
|
||||
// convert l, H, h, V, and v to L
|
||||
switch (c) {
|
||||
@@ -211,30 +216,32 @@ Kinetic.Path = Kinetic.Shape.extend({
|
||||
points.push(cpx + p.shift(), cpy + p.shift(), cpx + p.shift(), cpy + p.shift());
|
||||
cpx += p.shift();
|
||||
cpy += p.shift();
|
||||
cmd = 'C'
|
||||
cmd = 'C';
|
||||
points.push(cpx, cpy);
|
||||
break;
|
||||
case 'S':
|
||||
var ctlPtx = cpx, ctlPty = cpy;
|
||||
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())
|
||||
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 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())
|
||||
points.push(ctlPtx, ctlPty, cpx + p.shift(), cpy + p.shift());
|
||||
cpx += p.shift();
|
||||
cpy += p.shift();
|
||||
cmd = 'C';
|
||||
@@ -250,11 +257,12 @@ Kinetic.Path = Kinetic.Shape.extend({
|
||||
points.push(cpx + p.shift(), cpy + p.shift());
|
||||
cpx += p.shift();
|
||||
cpy += p.shift();
|
||||
cmd = 'Q'
|
||||
cmd = 'Q';
|
||||
points.push(cpx, cpy);
|
||||
break;
|
||||
case 'T':
|
||||
var ctlPtx = cpx, ctlPty = cpy;
|
||||
var ctlPtx = cpx,
|
||||
ctlPty = cpy;
|
||||
var prevCmd = ca[ca.length - 1];
|
||||
if (prevCmd.command === 'Q') {
|
||||
ctlPtx = cpx + (cpx - prevCmd.points[0]);
|
||||
@@ -266,7 +274,8 @@ Kinetic.Path = Kinetic.Shape.extend({
|
||||
points.push(ctlPtx, ctlPty, cpx, cpy);
|
||||
break;
|
||||
case 't':
|
||||
var ctlPtx = cpx, ctlPty = cpy;
|
||||
var ctlPtx = cpx,
|
||||
ctlPty = cpy;
|
||||
var prevCmd = ca[ca.length - 1];
|
||||
if (prevCmd.command === 'Q') {
|
||||
ctlPtx = cpx + (cpx - prevCmd.points[0]);
|
||||
@@ -278,26 +287,41 @@ Kinetic.Path = Kinetic.Shape.extend({
|
||||
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();
|
||||
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);
|
||||
points = Kinetic.PathHelper.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();
|
||||
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);
|
||||
points = Kinetic.PathHelper.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)
|
||||
start : {
|
||||
x : startX,
|
||||
y : startY
|
||||
},
|
||||
pathLength : Kinetic.PathHelper.calcLength(startX, startY, cmd || c, points)
|
||||
});
|
||||
|
||||
}
|
||||
@@ -312,204 +336,6 @@ Kinetic.Path = Kinetic.Shape.extend({
|
||||
}
|
||||
|
||||
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)
|
||||
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)};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -8,8 +8,9 @@
|
||||
* @augments Kinetic.Path
|
||||
* @param {Object} config
|
||||
*/
|
||||
Kinetic.TextPath = Kinetic.Path.extend({
|
||||
Kinetic.TextPath = Kinetic.Shape.extend({
|
||||
init : function (config) {
|
||||
|
||||
this.setDefaultAttrs({
|
||||
fontFamily : 'Calibri',
|
||||
fontSize : 12,
|
||||
@@ -20,8 +21,11 @@ Kinetic.TextPath = Kinetic.Path.extend({
|
||||
|
||||
this.dummyCanvas = document.createElement('canvas');
|
||||
this.shapeType = "TextPath";
|
||||
this.dataArray = [];
|
||||
var that = this;
|
||||
|
||||
this._getDataArray = Kinetic.Path.prototype._getDataArray;
|
||||
|
||||
config.drawFunc = function (context) {
|
||||
var charArr = this.charArr;
|
||||
|
||||
@@ -32,8 +36,7 @@ Kinetic.TextPath = Kinetic.Path.extend({
|
||||
|
||||
var glyphInfo = this.glyphInfo;
|
||||
|
||||
for (var i=0; i < glyphInfo.length; i++)
|
||||
{
|
||||
for (var i = 0; i < glyphInfo.length; i++) {
|
||||
context.save();
|
||||
|
||||
var p0 = glyphInfo[i].p0;
|
||||
@@ -67,6 +70,12 @@ Kinetic.TextPath = Kinetic.Path.extend({
|
||||
// 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++) {
|
||||
@@ -118,9 +127,10 @@ Kinetic.TextPath = Kinetic.Path.extend({
|
||||
|
||||
var charArr = this.attrs.text.split('');
|
||||
|
||||
var p0 = undefined;
|
||||
var p1 = undefined;
|
||||
var pathCmd = undefined;
|
||||
var p0,
|
||||
p1,
|
||||
pathCmd;
|
||||
|
||||
var pIndex = -1;
|
||||
var currentT = 0;
|
||||
|
||||
@@ -133,14 +143,16 @@ Kinetic.TextPath = Kinetic.Path.extend({
|
||||
pIndex = i;
|
||||
|
||||
return pathData[i];
|
||||
}
|
||||
else if (pathData[i].command == 'M') {
|
||||
p0 = {x: pathData[i].points[0], y: pathData[i].points[1]};
|
||||
} else if (pathData[i].command == 'M') {
|
||||
p0 = {
|
||||
x : pathData[i].points[0],
|
||||
y : pathData[i].points[1]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return {};
|
||||
}
|
||||
};
|
||||
|
||||
var findSegmentToFitCharacter = function (c, before) {
|
||||
|
||||
@@ -151,33 +163,30 @@ Kinetic.TextPath = Kinetic.Path.extend({
|
||||
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)
|
||||
{
|
||||
if (pathCmd && cumulativePathLength + pathCmd.pathLength < glyphWidth) {
|
||||
cumulativePathLength += pathCmd.pathLength;
|
||||
pathCmd = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
if (pathCmd === {} || p0 === undefined)
|
||||
if (pathCmd === {}
|
||||
|
||||
|| p0 === undefined)
|
||||
return undefined;
|
||||
|
||||
var needNewSegment = false;
|
||||
|
||||
switch (pathCmd.command) {
|
||||
case 'L':
|
||||
if (that._getLineLength(p0.x, p0.y, pathCmd.points[0], pathCmd.points[1]) > glyphWidth)
|
||||
{
|
||||
p1 = that._getPointOnLine(glyphWidth, p0.x, p0.y, pathCmd.points[0], pathCmd.points[1], p0.x, p0.y);
|
||||
}
|
||||
else
|
||||
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;
|
||||
break;
|
||||
case 'A':
|
||||
@@ -186,7 +195,7 @@ Kinetic.TextPath = Kinetic.Path.extend({
|
||||
var dTheta = pathCmd.points[5]; // 5 = dTheta
|
||||
var end = pathCmd.points[4] + dTheta;
|
||||
|
||||
if (currentT == 0)
|
||||
if (currentT === 0)
|
||||
currentT = start + 0.00000001; // Just in case start is 0
|
||||
else if (glyphWidth > currLen)
|
||||
currentT += (Math.PI / 180.0) * dTheta / Math.abs(dTheta);
|
||||
@@ -199,16 +208,15 @@ Kinetic.TextPath = Kinetic.Path.extend({
|
||||
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;
|
||||
case 'C':
|
||||
if (currentT == 0) {
|
||||
if (currentT === 0) {
|
||||
if (glyphWidth > pathCmd.pathLength)
|
||||
currentT = 0.00000001;
|
||||
else
|
||||
currentT = glyphWidth / pathCmd.pathLength;
|
||||
}
|
||||
else if (glyphWidth > currLen)
|
||||
} else if (glyphWidth > currLen)
|
||||
currentT += (glyphWidth - currLen) / pathCmd.pathLength;
|
||||
else
|
||||
currentT -= (currLen - glyphWidth) / pathCmd.pathLength;
|
||||
@@ -218,10 +226,10 @@ Kinetic.TextPath = Kinetic.Path.extend({
|
||||
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;
|
||||
case 'Q':
|
||||
if (currentT == 0)
|
||||
if (currentT === 0)
|
||||
currentT = glyphWidth / pathCmd.pathLength;
|
||||
else if (glyphWidth > currLen)
|
||||
currentT += (glyphWidth - currLen) / pathCmd.pathLength;
|
||||
@@ -233,14 +241,13 @@ Kinetic.TextPath = Kinetic.Path.extend({
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
if (p1 !== undefined)
|
||||
{
|
||||
currLen = that._getLineLength(p0.x, p0.y, p1.x, p1.y);
|
||||
if (p1 !== undefined) {
|
||||
currLen = Kinetic.PathHelper.getLineLength(p0.x, p0.y, p1.x, p1.y);
|
||||
}
|
||||
|
||||
if (needNewSegment) {
|
||||
@@ -248,7 +255,7 @@ Kinetic.TextPath = Kinetic.Path.extend({
|
||||
pathCmd = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
for (var i = 0; i < charArr.length; i++) {
|
||||
|
||||
@@ -258,17 +265,24 @@ Kinetic.TextPath = Kinetic.Path.extend({
|
||||
if (p0 === undefined || p1 === undefined)
|
||||
break;
|
||||
|
||||
var width = this._getLineLength(p0.x, p0.y, p1.x, p1.y);
|
||||
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 = this._getPointOnLine(kern + width / 2.0, p0.x, p0.y, p1.x, p1.y);
|
||||
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});
|
||||
this.glyphInfo.push({
|
||||
transposeX : midpoint.x,
|
||||
transposeY : midpoint.y,
|
||||
text : charArr[i],
|
||||
rotation : rotation,
|
||||
p0 : p0,
|
||||
p1 : p1
|
||||
});
|
||||
|
||||
p0 = p1;
|
||||
}
|
||||
@@ -277,5 +291,3 @@ Kinetic.TextPath = Kinetic.Path.extend({
|
||||
|
||||
// add setters and getters
|
||||
Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'text']);
|
||||
|
||||
|
||||
231
src/plugins/util/PathHelper.js
Normal file
231
src/plugins/util/PathHelper.js
Normal 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];
|
||||
}
|
||||
|
||||
};
|
||||
@@ -2153,7 +2153,8 @@ Test.prototype.tests = {
|
||||
y : 0,
|
||||
width : 49,
|
||||
height : 109
|
||||
}],
|
||||
}
|
||||
],
|
||||
|
||||
kicking : [{
|
||||
x : 0,
|
||||
@@ -2185,7 +2186,8 @@ Test.prototype.tests = {
|
||||
y : 109,
|
||||
width : 41,
|
||||
height : 98
|
||||
}]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
//for(var n = 0; n < 50; n++) {
|
||||
@@ -2257,7 +2259,8 @@ Test.prototype.tests = {
|
||||
}, {
|
||||
x : 342,
|
||||
y : 93
|
||||
}];
|
||||
}
|
||||
];
|
||||
|
||||
var poly = new Kinetic.Polygon({
|
||||
points : points,
|
||||
@@ -2335,7 +2338,8 @@ Test.prototype.tests = {
|
||||
}, {
|
||||
x : 342,
|
||||
y : 93
|
||||
}];
|
||||
}
|
||||
];
|
||||
|
||||
var poly = new Kinetic.Polygon({
|
||||
points : points,
|
||||
@@ -2371,7 +2375,8 @@ Test.prototype.tests = {
|
||||
/*, {
|
||||
x: 500,
|
||||
y: 109
|
||||
}*/];
|
||||
}*/
|
||||
];
|
||||
|
||||
var line = new Kinetic.Line({
|
||||
points : points,
|
||||
@@ -2403,7 +2408,8 @@ Test.prototype.tests = {
|
||||
}, {
|
||||
x : 7,
|
||||
y : 8
|
||||
}]);
|
||||
}
|
||||
]);
|
||||
test(line.getPoints()[0].x === 5, 'first point x should be 5');
|
||||
|
||||
line.setPoints([73, 160, 340, 23]);
|
||||
@@ -4249,12 +4255,10 @@ Test.prototype.tests = {
|
||||
*/
|
||||
test(circle.eventListeners['click'] === undefined, 'circle should have no click listeners');
|
||||
|
||||
circle.on('click', function() {
|
||||
});
|
||||
circle.on('click', function () {});
|
||||
test(circle.eventListeners['click'].length === 1, 'circle should have 1 click listener');
|
||||
|
||||
circle.on('click', function() {
|
||||
});
|
||||
circle.on('click', function () {});
|
||||
test(circle.eventListeners['click'].length === 2, 'circle should have 2 click listeners');
|
||||
|
||||
circle.off('click');
|
||||
@@ -4263,15 +4267,12 @@ Test.prototype.tests = {
|
||||
/*
|
||||
* test name spacing
|
||||
*/
|
||||
circle.on('click.foo', function() {
|
||||
});
|
||||
circle.on('click.foo', function () {});
|
||||
test(circle.eventListeners['click'].length === 1, 'circle should have 1 click listener');
|
||||
|
||||
circle.on('click.foo', function() {
|
||||
});
|
||||
circle.on('click.foo', function () {});
|
||||
test(circle.eventListeners['click'].length === 2, 'circle should have 2 click listeners');
|
||||
circle.on('click.bar', function() {
|
||||
});
|
||||
circle.on('click.bar', function () {});
|
||||
test(circle.eventListeners['click'].length === 3, 'circle should have 3 click listeners');
|
||||
|
||||
circle.off('click.foo');
|
||||
@@ -5053,7 +5054,7 @@ Test.prototype.tests = {
|
||||
stage.add(layer);
|
||||
|
||||
},
|
||||
'PATH - Able to determine point on line some distance from another point on line': function(containerId) {
|
||||
'*PATH - Able to determine point on line some distance from another point on line' : function (containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container : containerId,
|
||||
width : 1024,
|
||||
@@ -5082,7 +5083,7 @@ Test.prototype.tests = {
|
||||
fill : 'black'
|
||||
}));
|
||||
|
||||
var p1 = path._getPointOnLine(125, 10, 10, 210, 160); // should be 1/2 way, or (110,85)
|
||||
var p1 = Kinetic.PathHelper.getPointOnLine(125, 10, 10, 210, 160); // should be 1/2 way, or (110,85)
|
||||
test(Math.round(p1.x) === 110, 'point X value should be 110');
|
||||
test(Math.round(p1.y) === 85, 'point Y value should be 85');
|
||||
|
||||
@@ -5096,7 +5097,7 @@ Test.prototype.tests = {
|
||||
stage.add(layer);
|
||||
|
||||
},
|
||||
'PATH - Able to determine points on Cubic Bezier Curve': function(containerId) {
|
||||
'*PATH - Able to determine points on Cubic Bezier Curve' : function (containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container : containerId,
|
||||
width : 1024,
|
||||
@@ -5121,15 +5122,13 @@ Test.prototype.tests = {
|
||||
|
||||
c = 'M 100 200';
|
||||
|
||||
for (t=0.25; t <= 1; t += 0.25)
|
||||
{
|
||||
var p1 = path._getPointOnCubicBezier(t, 100, 200, 100, 100, 250, 100, 250, 200);
|
||||
for (t = 0.25; t <= 1; t += 0.25) {
|
||||
var p1 = Kinetic.PathHelper.getPointOnCubicBezier(t, 100, 200, 100, 100, 250, 100, 250, 200);
|
||||
c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
|
||||
}
|
||||
|
||||
for (t=0.25; t <= 1; t += 0.25)
|
||||
{
|
||||
var p1 = path._getPointOnCubicBezier(t, 250, 200, 250, 300, 400, 300, 400, 200);
|
||||
for (t = 0.25; t <= 1; t += 0.25) {
|
||||
var p1 = Kinetic.PathHelper.getPointOnCubicBezier(t, 250, 200, 250, 300, 400, 300, 400, 200);
|
||||
c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
|
||||
}
|
||||
|
||||
@@ -5142,7 +5141,7 @@ Test.prototype.tests = {
|
||||
layer.add(testPath);
|
||||
stage.add(layer);
|
||||
},
|
||||
'PATH - Able to determine points on Quadratic Curve': function(containerId) {
|
||||
'*PATH - Able to determine points on Quadratic Curve' : function (containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container : containerId,
|
||||
width : 1024,
|
||||
@@ -5167,15 +5166,13 @@ Test.prototype.tests = {
|
||||
|
||||
c = 'M 200 300';
|
||||
|
||||
for (t=0.333; t <= 1; t += 0.333)
|
||||
{
|
||||
var p1 = path._getPointOnQuadraticBezier(t, 200, 300, 400, 50, 600, 300);
|
||||
for (t = 0.333; t <= 1; t += 0.333) {
|
||||
var p1 = Kinetic.PathHelper.getPointOnQuadraticBezier(t, 200, 300, 400, 50, 600, 300);
|
||||
c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
|
||||
}
|
||||
|
||||
for (t=0.333; t <= 1; t += 0.333)
|
||||
{
|
||||
var p1 = path._getPointOnQuadraticBezier(t, 600, 300, 800, 550, 1000, 300);
|
||||
for (t = 0.333; t <= 1; t += 0.333) {
|
||||
var p1 = Kinetic.PathHelper.getPointOnQuadraticBezier(t, 600, 300, 800, 550, 1000, 300);
|
||||
c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
|
||||
}
|
||||
|
||||
@@ -5188,7 +5185,7 @@ Test.prototype.tests = {
|
||||
layer.add(testPath);
|
||||
stage.add(layer);
|
||||
},
|
||||
'PATH - Able to determine points on Elliptical Arc with clockwise stroke': function(containerId) {
|
||||
'*PATH - Able to determine points on Elliptical Arc with clockwise stroke' : function (containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container : containerId,
|
||||
width : 1024,
|
||||
@@ -5211,34 +5208,31 @@ Test.prototype.tests = {
|
||||
|
||||
layer.add(path);
|
||||
|
||||
var centerParamPoints = path._convertEndpointToCenterParameterization(50, 100, 150, 150, 1, 1, 100, 50, 0);
|
||||
var centerParamPoints = Kinetic.PathHelper.convertEndpointToCenterParameterization(50, 100, 150, 150, 1, 1, 100, 50, 0);
|
||||
|
||||
var start = centerParamPoints[4]; // 4 = theta
|
||||
var dTheta = centerParamPoints[5]; // 5 = dTheta
|
||||
var end = centerParamPoints[4] + dTheta;
|
||||
var inc = Math.PI / 6.0; // 30 degree resolution
|
||||
|
||||
var p1 = path._getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], start, 0)
|
||||
var p1 = Kinetic.PathHelper.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], start, 0)
|
||||
c = 'M ' + p1.x.toString() + ' ' + p1.y.toString();
|
||||
|
||||
if (dTheta < 0) // clockwise
|
||||
{
|
||||
for (t=start - inc; t > end; t -= inc)
|
||||
{
|
||||
p1 = path._getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, 0)
|
||||
for (t = start - inc; t > end; t -= inc) {
|
||||
p1 = Kinetic.PathHelper.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, 0)
|
||||
c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
|
||||
}
|
||||
}
|
||||
else // counter-clockwise
|
||||
} else // counter-clockwise
|
||||
{
|
||||
for (t=start + inc; t < end; t += inc)
|
||||
{
|
||||
p1 = path._getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, 0)
|
||||
for (t = start + inc; t < end; t += inc) {
|
||||
p1 = Kinetic.PathHelper.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, 0)
|
||||
c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
|
||||
}
|
||||
}
|
||||
|
||||
p1 = path._getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], end, 0)
|
||||
p1 = Kinetic.PathHelper.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], end, 0)
|
||||
c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
|
||||
|
||||
var testpath = new Kinetic.Path({
|
||||
@@ -5250,7 +5244,7 @@ Test.prototype.tests = {
|
||||
layer.add(testpath);
|
||||
stage.add(layer);
|
||||
},
|
||||
'PATH - Able to determine points on Elliptical Arc with counter-clockwise stroke': function(containerId) {
|
||||
'*PATH - Able to determine points on Elliptical Arc with counter-clockwise stroke' : function (containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container : containerId,
|
||||
width : 1024,
|
||||
@@ -5273,34 +5267,31 @@ Test.prototype.tests = {
|
||||
|
||||
layer.add(path);
|
||||
|
||||
var centerParamPoints = path._convertEndpointToCenterParameterization(250, 100, 150, 150, 1, 0, 100, 50, 0);
|
||||
var centerParamPoints = Kinetic.PathHelper.convertEndpointToCenterParameterization(250, 100, 150, 150, 1, 0, 100, 50, 0);
|
||||
|
||||
var start = centerParamPoints[4]; // 4 = theta
|
||||
var dTheta = centerParamPoints[5]; // 5 = dTheta
|
||||
var end = centerParamPoints[4] + dTheta;
|
||||
var inc = Math.PI / 6.0; // 30 degree resolution
|
||||
|
||||
var p1 = path._getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], start, 0)
|
||||
var p1 = Kinetic.PathHelper.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], start, 0)
|
||||
c = 'M ' + p1.x.toString() + ' ' + p1.y.toString();
|
||||
|
||||
if (dTheta < 0) // clockwise
|
||||
{
|
||||
for (t=start - inc; t > end; t -= inc)
|
||||
{
|
||||
p1 = path._getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, 0)
|
||||
for (t = start - inc; t > end; t -= inc) {
|
||||
p1 = Kinetic.PathHelper.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, 0)
|
||||
c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
|
||||
}
|
||||
}
|
||||
else // counter-clockwise
|
||||
} else // counter-clockwise
|
||||
{
|
||||
for (t=start + inc; t < end; t += inc)
|
||||
{
|
||||
p1 = path._getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, 0)
|
||||
for (t = start + inc; t < end; t += inc) {
|
||||
p1 = Kinetic.PathHelper.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, 0)
|
||||
c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
|
||||
}
|
||||
}
|
||||
|
||||
p1 = path._getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], end, 0)
|
||||
p1 = Kinetic.PathHelper.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], end, 0)
|
||||
c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
|
||||
|
||||
var testpath = new Kinetic.Path({
|
||||
@@ -5312,7 +5303,7 @@ Test.prototype.tests = {
|
||||
layer.add(testpath);
|
||||
stage.add(layer);
|
||||
},
|
||||
'PATH - Able to determine points on Elliptical Arc when rotated': function(containerId) {
|
||||
'*PATH - Able to determine points on Elliptical Arc when rotated' : function (containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container : containerId,
|
||||
width : 1024,
|
||||
@@ -5335,7 +5326,7 @@ Test.prototype.tests = {
|
||||
|
||||
layer.add(path);
|
||||
|
||||
var centerParamPoints = path._convertEndpointToCenterParameterization(250, 100, 150, 150, 1, 0, 100, 50, 30);
|
||||
var centerParamPoints = Kinetic.PathHelper.convertEndpointToCenterParameterization(250, 100, 150, 150, 1, 0, 100, 50, 30);
|
||||
|
||||
var start = centerParamPoints[4]; // 4 = theta
|
||||
var dTheta = centerParamPoints[5]; // 5 = dTheta
|
||||
@@ -5343,27 +5334,24 @@ Test.prototype.tests = {
|
||||
var inc = Math.PI / 6.0; // 30 degree resolution
|
||||
var psi = centerParamPoints[6]; // 6 = psi radians
|
||||
|
||||
var p1 = path._getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], start, psi)
|
||||
var p1 = Kinetic.PathHelper.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], start, psi)
|
||||
c = 'M ' + p1.x.toString() + ' ' + p1.y.toString();
|
||||
|
||||
if (dTheta < 0) // clockwise
|
||||
{
|
||||
for (t=start - inc; t > end; t -= inc)
|
||||
{
|
||||
p1 = path._getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, psi)
|
||||
for (t = start - inc; t > end; t -= inc) {
|
||||
p1 = Kinetic.PathHelper.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, psi)
|
||||
c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
|
||||
}
|
||||
}
|
||||
else // counter-clockwise
|
||||
} else // counter-clockwise
|
||||
{
|
||||
for (t=start + inc; t < end; t += inc)
|
||||
{
|
||||
p1 = path._getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, psi)
|
||||
for (t = start + inc; t < end; t += inc) {
|
||||
p1 = Kinetic.PathHelper.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, psi)
|
||||
c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
|
||||
}
|
||||
}
|
||||
|
||||
p1 = path._getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], end, psi)
|
||||
p1 = Kinetic.PathHelper.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], end, psi)
|
||||
c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
|
||||
|
||||
var testpath = new Kinetic.Path({
|
||||
@@ -5375,7 +5363,7 @@ Test.prototype.tests = {
|
||||
layer.add(testpath);
|
||||
stage.add(layer);
|
||||
},
|
||||
'TEXTPATH - Render Text Along Line': function(containerId) {
|
||||
'*TEXTPATH - Render Text Along Line' : function (containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container : containerId,
|
||||
width : 1024,
|
||||
@@ -5410,7 +5398,7 @@ Test.prototype.tests = {
|
||||
layer.add(textpath);
|
||||
stage.add(layer);
|
||||
},
|
||||
'TEXTPATH - Render Text Along two connected Bezier': function(containerId) {
|
||||
'*TEXTPATH - Render Text Along two connected Bezier' : function (containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container : containerId,
|
||||
width : 1024,
|
||||
@@ -5445,7 +5433,7 @@ Test.prototype.tests = {
|
||||
stage.add(layer);
|
||||
|
||||
},
|
||||
'TEXTPATH - Render Text Along Elliptical Arc': function(containerId) {
|
||||
'*TEXTPATH - Render Text Along Elliptical Arc' : function (containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container : containerId,
|
||||
width : 1024,
|
||||
@@ -5476,7 +5464,7 @@ Test.prototype.tests = {
|
||||
layer.add(textpath);
|
||||
stage.add(layer);
|
||||
},
|
||||
'TEXTPATH - Render Text Along complex path': function(containerId) {
|
||||
'*TEXTPATH - Render Text Along complex path' : function (containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container : containerId,
|
||||
width : 1024,
|
||||
@@ -5501,7 +5489,7 @@ Test.prototype.tests = {
|
||||
layer.add(textpath);
|
||||
stage.add(layer);
|
||||
},
|
||||
'PATH - Borneo Map (with scientific notation': function(containerId) {
|
||||
'*PATH - Borneo Map (has scientific notation: -10e-4)' : function (containerId) {
|
||||
|
||||
var stage = new Kinetic.Stage({
|
||||
container : containerId,
|
||||
|
||||
Reference in New Issue
Block a user