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

merged jfollas's new TextPath shape, and moved non-primative shapes to the plugins folder as shape plugins

Browse Source
This commit is contained in:
Eric Rowell 2012-07-24 23:18:46 -07:00
commit c26a1ae5d5
12 changed files with 1543 additions and 1301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Thorfile
View File

@ -3,10 +3,10 @@ require 'json/pure'
class Build < Thor
# This is the list of files to concatenate. The first file will appear at the top of the final file. All files are relative to the lib directory.
FILES = [
"license.js", "src/Global.js", "src/util/Type.js", "src/util/Canvas.js", "src/util/Class.js", "src/Animation.js", "src/Node.js", "src/Container.js", "src/Stage.js",
"src/Layer.js", "src/Group.js", "src/Shape.js", "src/shapes/Rect.js", "src/shapes/Ellipse.js", "src/shapes/Image.js",
"src/shapes/Sprite.js", "src/shapes/Polygon.js", "src/shapes/RegularPolygon.js", "src/shapes/Star.js", "src/shapes/Text.js",
"src/shapes/Line.js", "src/shapes/Path.js", "src/util/Transform.js", "src/Transition.js", "src/util/Tween.js", "src/filters/Grayscale.js"
"license.js", "src/Global.js", "src/Transition.js", "src/filters/Grayscale.js",
"src/util/Type.js", "src/util/Canvas.js", "src/util/Class.js", "src/util/Tween.js", "src/util/Transform.js",
"src/Animation.js", "src/Node.js", "src/Container.js", "src/Stage.js", "src/Layer.js", "src/Group.js", "src/Shape.js",
"src/shapes/Rect.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js",
]
desc "dev", "Concatenate all the js files into /dist/kinetic-VERSION.js."

1822
dist/kinetic-core.js vendored
View File

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

237
src/shapes/Path.js → src/plugins/shapes/Path.js
View File

@ -14,50 +14,53 @@ Kinetic.Path = Kinetic.Shape.extend({
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++) {
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];
if (config.drawFunc == null) {
config.drawFunc = function(context) {
var ca = this.dataArray;
// context position
context.beginPath();
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;
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);
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;
break;
case 'z':
context.closePath();
break;
}
}
}
this.fill(context);
this.stroke(context);
};
this.fill(context);
this.stroke(context);
};
}
// call super constructor
this._super(config);
@ -126,6 +129,7 @@ Kinetic.Path = Kinetic.Shape.extend({
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();
@ -141,7 +145,8 @@ Kinetic.Path = Kinetic.Shape.extend({
var cmd = undefined;
var points = [];
var startX = cpx, startY = cpy;
// convert l, H, h, V, and v to L
switch(c) {
@ -290,7 +295,9 @@ Kinetic.Path = Kinetic.Shape.extend({
ca.push({
command: cmd || c,
points: points
points: points,
start: {x: startX, y: startY},
pathLength: this._calcLength(startX, startY, cmd || c, points)
});
}
@ -298,7 +305,9 @@ Kinetic.Path = Kinetic.Shape.extend({
if(c === 'z' || c === 'Z')
ca.push({
command: 'z',
points: []
points: [],
start: undefined,
pathLength: 0
});
}
@ -359,6 +368,148 @@ Kinetic.Path = Kinetic.Shape.extend({
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)};
}
});

0
src/shapes/RegularPolygon.js → src/plugins/shapes/RegularPolygon.js
View File

0
src/shapes/Sprite.js → src/plugins/shapes/Sprite.js
View File

0
src/shapes/Star.js → src/plugins/shapes/Star.js
View File

281
src/plugins/shapes/TextPath.js Normal file
View File

@ -0,0 +1,281 @@
///////////////////////////////////////////////////////////////////////
// Text Path
///////////////////////////////////////////////////////////////////////
/**
* Path constructor.
* @author Jason Follas
* @constructor
* @augments Kinetic.Path
* @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++)
{
context.save();
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);
// 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];
}
else if (pathData[i].command == 'M') {
p0 = {x: pathData[i].points[0], y: pathData[i].points[1]};
}
}
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;
}
}
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
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
else if (glyphWidth > currLen)
currentT += (Math.PI / 180.0) * dTheta / Math.abs(dTheta);
else
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]);
break;
case 'C':
if (currentT == 0) {
if (glyphWidth > pathCmd.pathLength)
currentT = 0.00000001;
else
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._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)
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;
}
if (p1 !== undefined)
{
currLen = that._getLineLength(p0.x, p0.y, p1.x, p1.y);
}
if (needNewSegment) {
needNewSegment = false;
pathCmd = undefined;
}
}
}
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']);

7
tests/html/manualTests.html
View File

@ -3,6 +3,13 @@
<head>
<link rel="stylesheet" type="text/css"href="../base.css">
<script src="../../dist/kinetic-core.js"></script>
<!-- plugins -->
<script src="../../src/plugins/shapes/Path.js"></script>
<script src="../../src/plugins/shapes/RegularPolygon.js"></script>
<script src="../../src/plugins/shapes/Sprite.js"></script>
<script src="../../src/plugins/shapes/Star.js"></script>
<script src="../../src/plugins/shapes/TextPath.js"></script>
<!-- assets -->
<script src="../js/Test.js"></script>
<script src="../js/manualTests.js"></script>
<script>

7
tests/html/performanceTests.html
View File

@ -3,6 +3,13 @@
<head>
<link rel="stylesheet" type="text/css"href="../base.css">
<script src="../../dist/kinetic-core.js"></script>
<!-- plugins -->
<script src="../../src/plugins/shapes/Path.js"></script>
<script src="../../src/plugins/shapes/RegularPolygon.js"></script>
<script src="../../src/plugins/shapes/Sprite.js"></script>
<script src="../../src/plugins/shapes/Star.js"></script>
<script src="../../src/plugins/shapes/TextPath.js"></script>
<!-- assets -->
<script src="../js/Test.js"></script>
<script src="../js/performanceTests.js"></script>
<script>

7
tests/html/unitTests.html
View File

@ -3,6 +3,13 @@
<head>
<link rel="stylesheet" type="text/css"href="../base.css">
<script src="../../dist/kinetic-core.js"></script>
<!-- plugins -->
<script src="../../src/plugins/shapes/Path.js"></script>
<script src="../../src/plugins/shapes/RegularPolygon.js"></script>
<script src="../../src/plugins/shapes/Sprite.js"></script>
<script src="../../src/plugins/shapes/Star.js"></script>
<script src="../../src/plugins/shapes/TextPath.js"></script>
<!-- assets -->
<script src="../assets/worldMap.js"></script>
<script src="../assets/tiger.js"></script>
<script src="../assets/unitDataUrls.js"></script>

471
tests/js/unitTests.js
View File

File diff suppressed because one or more lines are too long