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

merged with jfollas's TextPath updates, fixed remaining unit, manual, and performance tests, and fixed stroking logic

Browse Source
This commit is contained in:
Eric Rowell 2012-07-28 09:55:21 -07:00
commit 5b323bea40
13 changed files with 4357 additions and 4189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Jul 27 2012
* Date: Jul 28 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@ -35,6 +35,7 @@
*/
var Kinetic = {};
Kinetic.Filters = {};
Kinetic.Plugins = {};
Kinetic.Global = {
BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
stages: [],
@ -4064,21 +4065,25 @@ Kinetic.Shape = Kinetic.Node.extend({
* @methodOf Kinetic.Shape.prototype
*/
stroke: function(context) {
var go = Kinetic.Global;
var appliedShadow = false;
var strokeWidth = this.getStrokeWidth();
var stroke = this.getStroke();
if(stroke || strokeWidth) {
var go = Kinetic.Global;
var appliedShadow = false;
context.save();
if(this.attrs.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow(context);
}
context.save();
if(this.attrs.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow(context);
}
context.lineWidth = this.attrs.strokeWidth;
context.strokeStyle = this.attrs.stroke;
context.stroke(context);
context.restore();
context.lineWidth = strokeWidth || 2;
context.strokeStyle = stroke || 'black';
context.stroke(context);
context.restore();
if(appliedShadow) {
this.stroke(context);
if(appliedShadow) {
this.stroke(context);
}
}
},
/**

6
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
src/Global.js
View File

@ -7,6 +7,7 @@
*/
var Kinetic = {};
Kinetic.Filters = {};
Kinetic.Plugins = {};
Kinetic.Global = {
BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
stages: [],

28
src/Shape.js
View File

@ -96,21 +96,25 @@ Kinetic.Shape = Kinetic.Node.extend({
* @methodOf Kinetic.Shape.prototype
*/
stroke: function(context) {
var go = Kinetic.Global;
var appliedShadow = false;
var strokeWidth = this.getStrokeWidth();
var stroke = this.getStroke();
if(stroke || strokeWidth) {
var go = Kinetic.Global;
var appliedShadow = false;
context.save();
if(this.attrs.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow(context);
}
context.save();
if(this.attrs.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow(context);
}
context.lineWidth = this.attrs.strokeWidth;
context.strokeStyle = this.attrs.stroke;
context.stroke(context);
context.restore();
context.lineWidth = strokeWidth || 2;
context.strokeStyle = stroke || 'black';
context.stroke(context);
context.restore();
if(appliedShadow) {
this.stroke(context);
if(appliedShadow) {
this.stroke(context);
}
}
},
/**

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

@ -8,513 +8,77 @@
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Path = Kinetic.Shape.extend({
init: function(config) {
this.shapeType = "Path";
this.dataArray = [];
var that = this;
if (config.drawFunc == null) {
config.drawFunc = function(context) {
Kinetic.Plugins.Path = Kinetic.Shape.extend({
init : function (config) {
this.shapeType = "Path";
this.dataArray = [];
var that = this;
config.drawFunc = function (context) {
var ca = this.dataArray;
// context position
context.beginPath();
for(var n = 0; n < ca.length; n++) {
for (var n = 0; n < ca.length; n++) {
var c = ca[n].command;
var p = ca[n].points;
switch(c) {
case 'L':
context.lineTo(p[0], p[1]);
break;
case 'M':
context.moveTo(p[0], p[1]);
break;
case 'C':
context.bezierCurveTo(p[0], p[1], p[2], p[3], p[4], p[5]);
break;
case 'Q':
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 r = (rx > ry) ? rx : ry;
var scaleX = (rx > ry) ? 1 : rx / ry;
var scaleY = (rx > ry) ? ry / rx : 1;
context.translate(cx, cy);
context.rotate(psi);
context.scale(scaleX, scaleY);
context.arc(0, 0, r, theta, theta + dTheta, 1 - fs);
context.scale(1 / scaleX, 1 / scaleY);
context.rotate(-psi);
context.translate(-cx, -cy);
break;
case 'z':
context.closePath();
break;
switch (c) {
case 'L':
context.lineTo(p[0], p[1]);
break;
case 'M':
context.moveTo(p[0], p[1]);
break;
case 'C':
context.bezierCurveTo(p[0], p[1], p[2], p[3], p[4], p[5]);
break;
case 'Q':
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 r = (rx > ry) ? rx : ry;
var scaleX = (rx > ry) ? 1 : rx / ry;
var scaleY = (rx > ry) ? ry / rx : 1;
context.translate(cx, cy);
context.rotate(psi);
context.scale(scaleX, scaleY);
context.arc(0, 0, r, theta, theta + dTheta, 1 - fs);
context.scale(1 / scaleX, 1 / scaleY);
context.rotate(-psi);
context.translate(-cx, -cy);
break;
case 'z':
context.closePath();
break;
}
}
this.fill(context);
this.stroke(context);
};
}
// call super constructor
this._super(config);
this.dataArray = this._getDataArray();
this.on('dataChange', function() {
that.dataArray = that._getDataArray();
});
},
/**
* 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
*/
_getDataArray: function() {
// 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
// command string
var cs = this.attrs.data;
// return early if data is not defined
if(!this.attrs.data) {
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
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 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;
},
_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;
// call super constructor
this._super(config);
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;
this.dataArray = Kinetic.Plugins.PathHelper.parsePathData(this.attrs.data);
if ((fromY - P1y) / ((fromX - P1x) + .00000001) === m)
{
return {x: fromX + run, y: fromY + rise};
this.on('dataChange', function () {
that.dataArray = Kinetic.Plugins.PathHelper.parsePathData(that.attrs.data);
});
}
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
Kinetic.Node.addGettersSetters(Kinetic.Path, ['data']);
Kinetic.Node.addGettersSetters(Kinetic.Plugins.Path, ['data']);
/**
* set SVG path data string. This method
@ -530,4 +94,4 @@ Kinetic.Node.addGettersSetters(Kinetic.Path, ['data']);
* get SVG path data string
* @name getData
* @methodOf Kinetic.Path.prototype
*/
*/

4
src/plugins/shapes/RegularPolygon.js
View File

@ -7,7 +7,7 @@
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.RegularPolygon = Kinetic.Shape.extend({
Kinetic.Plugins.RegularPolygon = Kinetic.Shape.extend({
init: function(config) {
this.setDefaultAttrs({
radius: 0,
@ -34,7 +34,7 @@ Kinetic.RegularPolygon = Kinetic.Shape.extend({
});
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.RegularPolygon, ['radius', 'sides']);
Kinetic.Node.addGettersSetters(Kinetic.Plugins.RegularPolygon, ['radius', 'sides']);
/**
* set radius

4
src/plugins/shapes/Star.js
View File

@ -7,7 +7,7 @@
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Star = Kinetic.Shape.extend({
Kinetic.Plugins.Star = Kinetic.Shape.extend({
init: function(config) {
this.setDefaultAttrs({
numPoints: 0,
@ -37,7 +37,7 @@ Kinetic.Star = Kinetic.Shape.extend({
});
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Star, ['numPoints', 'innerRadius', 'outerRadius']);
Kinetic.Node.addGettersSetters(Kinetic.Plugins.Star, ['numPoints', 'innerRadius', 'outerRadius']);
/**
* set number of points

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

@ -5,277 +5,380 @@
* Path constructor.
* @author Jason Follas
* @constructor
* @augments Kinetic.Path
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.TextPath = Kinetic.Path.extend({
init: function(config) {
this.setDefaultAttrs({
fontFamily: 'Calibri',
fontSize: 12,
fontStyle: 'normal',
detectionType: 'path',
text: ''
});
this.dummyCanvas = document.createElement('canvas');
this.shapeType = "TextPath";
var that = this;
config.drawFunc = function(context) {
var charArr = this.charArr;
context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
context.textBaseline = 'middle';
context.textAlign = 'left';
context.save();
var glyphInfo = this.glyphInfo;
for (var i=0; i < glyphInfo.length; i++)
{
Kinetic.Plugins.TextPath = Kinetic.Shape.extend({
init : function (config) {
this.setDefaultAttrs({
fontFamily : 'Calibri',
fontSize : 12,
fontStyle : 'normal',
detectionType : 'path',
text : ''
});
this.dummyCanvas = document.createElement('canvas');
this.shapeType = "TextPath";
this.dataArray = [];
var that = this;
config.drawFunc = function (context) {
var charArr = this.charArr;
context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
context.textBaseline = 'middle';
context.textAlign = 'left';
context.save();
var p0 = glyphInfo[i].p0;
var p1 = glyphInfo[i].p1;
var ht = parseFloat(this.attrs.fontSize);
var glyphInfo = this.glyphInfo;
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);
// 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;
for (var i = 0; i < glyphInfo.length; i++) {
context.save();
return pathData[i];
}
else if (pathData[i].command == 'M') {
p0 = {x: pathData[i].points[0], y: pathData[i].points[1]};
var p0 = glyphInfo[i].p0;
var p1 = glyphInfo[i].p1;
var ht = parseFloat(this.attrs.fontSize);
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 = Kinetic.Plugins.PathHelper.parsePathData(this.attrs.data);
this.on('dataChange', function () {
that.dataArray = Kinetic.Plugins.PathHelper.parsePathData(that.attrs.data);
});
// update text data for certain attr changes
var attrs = ['text', 'textStroke', 'textStrokeWidth'];
for (var n = 0; n < attrs.length; n++) {
var attr = attrs[n];
this.on(attr + 'Change', that._setTextData);
}
return {};
}
var findSegmentToFitCharacter = function(c, before) {
that._setTextData();
},
/**
* get text width in pixels
* @name getTextWidth
* @methodOf Kinetic.Plugins.TextPath.prototype
*/
getTextWidth : function () {
return this.textWidth;
},
/**
* get text height in pixels
* @name getTextHeight
* @methodOf Kinetic.Plugins.TextPath.prototype
*/
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;
var attempts = 0;
var needNextSegment = false;
context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
var metrics = context.measureText(text);
p1 = undefined;
context.restore();
while (Math.abs(glyphWidth - currLen) / glyphWidth > 0.01 && attempts < 25) {
attempts++;
var cumulativePathLength = currLen;
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,
p1,
pathCmd;
var pIndex = -1;
var currentT = 0;
var getNextPathSegment = function () {
currentT = 0;
var pathData = that.dataArray;
while (pathCmd === undefined) {
pathCmd = getNextPathSegment();
if (pathCmd && cumulativePathLength + pathCmd.pathLength < glyphWidth)
{
cumulativePathLength += pathCmd.pathLength;
pathCmd = undefined;
for (var i = pIndex + 1; i < pathData.length; i++) {
if (pathData[i].pathLength > 0) {
pIndex = i;
return pathData[i];
} else if (pathData[i].command == 'M') {
p0 = {
x : pathData[i].points[0],
y : pathData[i].points[1]
};
}
}
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);
return {};
};
var findSegmentToFitCharacter = function (c, before) {
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.Plugins.PathHelper.getLineLength(p0.x, p0.y, pathCmd.points[0], pathCmd.points[1]) > glyphWidth) {
p1 = Kinetic.Plugins.PathHelper.getPointOnLine(glyphWidth, p0.x, p0.y, pathCmd.points[0], pathCmd.points[1], p0.x, p0.y);
} else
pathCmd = undefined;
break;
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)
currentT = start + 0.00000001; // Just in case start is 0
var start = pathCmd.points[4]; // 4 = theta
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)
currentT += (Math.PI / 180.0) * dTheta / Math.abs(dTheta);
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)) {
currentT = end;
needNewSegment = true;
}
p1 = that._getPointOnEllipticalArc(pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], currentT, pathCmd.points[6]);
p1 = Kinetic.Plugins.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;
if (currentT > 1.0) {
currentT = 1.0;
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.Plugins.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;
else
currentT -= (currLen - glyphWidth) / pathCmd.pathLength;
if (currentT > 1.0) {
currentT = 1.0;
needNewSegment = true;
}
p1 = that._getPointOnQuadraticBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3])
break;
p1 = Kinetic.Plugins.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 = Kinetic.Plugins.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)
{
currLen = that._getLineLength(p0.x, p0.y, p1.x, p1.y);
}
// Find p1 such that line segment between p0 and p1 is approx. width of glyph
findSegmentToFitCharacter(charArr[i]);
if (needNewSegment) {
needNewSegment = false;
pathCmd = undefined;
}
if (p0 === undefined || p1 === undefined)
break;
var width = Kinetic.Plugins.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.Plugins.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
Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'text']);
Kinetic.Node.addGettersSetters(Kinetic.Plugins.TextPath, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'text']);
/**
* set font family
* @name setFontFamily
* @methodOf Kinetic.Plugins.TextPath.prototype
* @param {String} fontFamily
*/
/**
* set font size
* @name setFontSize
* @methodOf Kinetic.Plugins.TextPath.prototype
* @param {int} fontSize
*/
/**
* set font style. Can be "normal", "italic", or "bold". "normal" is the default.
* @name setFontStyle
* @methodOf Kinetic.Plugins.TextPath.prototype
* @param {String} fontStyle
*/
/**
* set text fill color
* @name setTextFill
* @methodOf Kinetic.Plugins.TextPath.prototype
* @param {String} textFill
*/
/**
* set text stroke color
* @name setFontStroke
* @methodOf Kinetic.Plugins.TextPath.prototype
* @param {String} textStroke
*/
/**
* set text stroke width
* @name setTextStrokeWidth
* @methodOf Kinetic.Plugins.TextPath.prototype
* @param {int} textStrokeWidth
*/
/**
* set text
* @name setText
* @methodOf Kinetic.Plugins.TextPath.prototype
* @param {String} text
*/
/**
* get font family
* @name getFontFamily
* @methodOf Kinetic.Plugins.TextPath.prototype
*/
/**
* get font size
* @name getFontSize
* @methodOf Kinetic.Plugins.TextPath.prototype
*/
/**
* get font style
* @name getFontStyle
* @methodOf Kinetic.Plugins.TextPath.prototype
*/
/**
* get text fill color
* @name getTextFill
* @methodOf Kinetic.Plugins.TextPath.prototype
*/
/**
* get text stroke color
* @name getTextStroke
* @methodOf Kinetic.Plugins.TextPath.prototype
*/
/**
* get text stroke width
* @name getTextStrokeWidth
* @methodOf Kinetic.Plugins.TextPath.prototype
*/
/**
* get text
* @name getText
* @methodOf Kinetic.Plugins.TextPath.prototype
*/

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

@ -0,0 +1,495 @@
///////////////////////////////////////////////////////////////////////
// PathHelper
///////////////////////////////////////////////////////////////////////
Kinetic.Plugins.PathHelper = {
/**
* 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;
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];
}
};

1
tests/html/unitTests.html
View File

@ -8,6 +8,7 @@
<script src="../../src/plugins/shapes/RegularPolygon.js"></script>
<script src="../../src/plugins/shapes/Star.js"></script>
<script src="../../src/plugins/shapes/TextPath.js"></script>
<script src="../../src/plugins/util/PathHelper.js"></script>
<!-- assets -->
<script src="../assets/worldMap.js"></script>
<script src="../assets/tiger.js"></script>

6
tests/js/manualTests.js
View File

@ -266,7 +266,7 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var star = new Kinetic.Star({
var star = new Kinetic.Plugins.Star({
x: 200,
y: 100,
numPoints: 10,
@ -337,7 +337,7 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer({
rotationDeg: 20
});
var star = new Kinetic.Star({
var star = new Kinetic.Plugins.Star({
x: 200,
y: 100,
numPoints: 10,
@ -717,7 +717,7 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var star = new Kinetic.Star({
var star = new Kinetic.Plugins.Star({
x: 200,
y: 100,
numPoints: 5,

6
tests/js/performanceTests.js
View File

@ -27,7 +27,7 @@ Test.prototype.tests = {
endTimer('add and draw 1,000 Kinetic rectangles');
},
'*ANIMATION - test animation frame rate': function(containerId) {
'ANIMATION - test animation frame rate': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -148,7 +148,7 @@ Test.prototype.tests = {
startTimer();
for(var n = 0; n < 1000; n++) {
var star = new Kinetic.Star({
var star = new Kinetic.Plugins.Star({
innerRadius: 20,
outerRadius: 50,
fill: 'yellow',
@ -180,7 +180,7 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var star = new Kinetic.Star({
var star = new Kinetic.Plugins.Star({
innerRadius: 20,
outerRadius: 50,
fill: 'yellow',

6889
tests/js/unitTests.js
View File

File diff suppressed because one or more lines are too long