lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 18:27:58 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

moved Path to Plugins namespace

Browse Source
This commit is contained in:
Eric Rowell
2013-03-17 17:32:35 -07:00
parent a1f934d26a
commit b37f50ba69
7 changed files with 86 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Thorfile
View File

@@ -7,8 +7,8 @@ class Build < Thor
"src/Global.js", "src/util/Type.js", "src/Canvas.js", "src/util/Tween.js", "src/util/Transform.js", "src/util/Collection.js",
"src/filters/Grayscale.js", "src/filters/Brighten.js", "src/filters/Invert.js", "src/filters/Gauss.js",
"src/Node.js", "src/Animation.js", "src/DragAndDrop.js", "src/Transition.js", "src/Container.js", "src/Shape.js", "src/Stage.js", "src/Layer.js", "src/Group.js",
"src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Wedge.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Spline.js", "src/shapes/Blob.js", "src/shapes/Sprite.js", "src/shapes/Path.js",
"src/plugins/TextPath.js", "src/plugins/RegularPolygon.js", "src/plugins/Star.js", "src/plugins/Label.js"
"src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Wedge.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Spline.js", "src/shapes/Blob.js", "src/shapes/Sprite.js",
"src/plugins/Path.js", "src/plugins/TextPath.js", "src/plugins/RegularPolygon.js", "src/plugins/Star.js", "src/plugins/Label.js"
]
UNIT_TESTS = [
@@ -31,9 +31,9 @@ class Build < Thor
"tests/js/unit/shapes/splineTests.js",
"tests/js/unit/shapes/blobTests.js",
"tests/js/unit/shapes/textTests.js",
"tests/js/unit/shapes/pathTests.js",
"tests/js/unit/shapes/spriteTests.js",
"tests/js/unit/plugins/pathTests.js",
"tests/js/unit/plugins/regularPolygonTests.js",
"tests/js/unit/plugins/starTests.js",
"tests/js/unit/plugins/textPathTests.js",

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

@@ -9,11 +9,11 @@
* {{ShapeParams}}
* {{NodeParams}}
*/
Kinetic.Path = function(config) {
Kinetic.Plugins.Path = function(config) {
this._initPath(config);
};
Kinetic.Path.prototype = {
Kinetic.Plugins.Path.prototype = {
_initPath: function(config) {
this.dataArray = [];
var that = this;
@@ -23,9 +23,9 @@
this.shapeType = 'Path';
this._setDrawFuncs();
this.dataArray = Kinetic.Path.parsePathData(this.attrs.data);
this.dataArray = Kinetic.Plugins.Path.parsePathData(this.attrs.data);
this.on('dataChange', function() {
that.dataArray = Kinetic.Path.parsePathData(that.attrs.data);
that.dataArray = Kinetic.Plugins.Path.parsePathData(that.attrs.data);
});
},
drawFunc: function(canvas) {
@@ -72,16 +72,16 @@
canvas.fillStroke(this);
}
};
Kinetic.Global.extend(Kinetic.Path, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Plugins.Path, Kinetic.Shape);
/*
* Utility methods written by jfollas to
* handle length and point measurements
*/
Kinetic.Path.getLineLength = function(x1, y1, x2, y2) {
Kinetic.Plugins.Path.getLineLength = function(x1, y1, x2, y2) {
return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
};
Kinetic.Path.getPointOnLine = function(dist, P1x, P1y, P2x, P2y, fromX, fromY) {
Kinetic.Plugins.Path.getPointOnLine = function(dist, P1x, P1y, P2x, P2y, fromX, fromY) {
if(fromX === undefined) {
fromX = P1x;
}
@@ -129,7 +129,7 @@
return pt;
};
Kinetic.Path.getPointOnCubicBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y, P4x, P4y) {
Kinetic.Plugins.Path.getPointOnCubicBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y, P4x, P4y) {
function CB1(t) {
return t * t * t;
}
@@ -150,7 +150,7 @@
y: y
};
};
Kinetic.Path.getPointOnQuadraticBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y) {
Kinetic.Plugins.Path.getPointOnQuadraticBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y) {
function QB1(t) {
return t * t;
}
@@ -168,7 +168,7 @@
y: y
};
};
Kinetic.Path.getPointOnEllipticalArc = function(cx, cy, rx, ry, theta, psi) {
Kinetic.Plugins.Path.getPointOnEllipticalArc = function(cx, cy, rx, ry, theta, psi) {
var cosPsi = Math.cos(psi), sinPsi = Math.sin(psi);
var pt = {
x: rx * Math.cos(theta),
@@ -185,7 +185,7 @@
* L data for the purpose of high performance Path
* rendering
*/
Kinetic.Path.parsePathData = function(data) {
Kinetic.Plugins.Path.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)
@@ -422,9 +422,9 @@
return ca;
};
Kinetic.Path.calcLength = function(x, y, cmd, points) {
Kinetic.Plugins.Path.calcLength = function(x, y, cmd, points) {
var len, p1, p2;
var path = Kinetic.Path;
var path = Kinetic.Plugins.Path;
switch (cmd) {
case 'L':
@@ -486,7 +486,7 @@
return 0;
};
Kinetic.Path.convertEndpointToCenterParameterization = function(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg) {
Kinetic.Plugins.Path.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;
@@ -543,7 +543,7 @@
return [cx, cy, rx, ry, theta, dTheta, psi, fs];
};
// add getters setters
Kinetic.Node.addGetterSetter(Kinetic.Path, 'data');
Kinetic.Node.addGetterSetter(Kinetic.Plugins.Path, 'data');
/**
* set SVG path data string. This method
@@ -551,13 +551,13 @@
* into a data array. Currently supported SVG data:
* M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z
* @name setData
* @methodOf Kinetic.Path.prototype
* @methodOf Kinetic.Plugins.Path.prototype
* @param {String} SVG path command string
*/
/**
* get SVG path data string
* @name getData
* @methodOf Kinetic.Path.prototype
* @methodOf Kinetic.Plugins.Path.prototype
*/
})();

20
src/plugins/TextPath.js
View File

@@ -44,9 +44,9 @@
this.shapeType = 'TextPath';
this._setDrawFuncs();
this.dataArray = Kinetic.Path.parsePathData(this.attrs.data);
this.dataArray = Kinetic.Plugins.Path.parsePathData(this.attrs.data);
this.on('dataChange', function() {
that.dataArray = Kinetic.Path.parsePathData(this.attrs.data);
that.dataArray = Kinetic.Plugins.Path.parsePathData(this.attrs.data);
});
// update text data for certain attr changes
var attrs = ['text', 'textStroke', 'textStrokeWidth'];
@@ -198,8 +198,8 @@
switch (pathCmd.command) {
case 'L':
if(Kinetic.Path.getLineLength(p0.x, p0.y, pathCmd.points[0], pathCmd.points[1]) > glyphWidth) {
p1 = Kinetic.Path.getPointOnLine(glyphWidth, p0.x, p0.y, pathCmd.points[0], pathCmd.points[1], p0.x, p0.y);
if(Kinetic.Plugins.Path.getLineLength(p0.x, p0.y, pathCmd.points[0], pathCmd.points[1]) > glyphWidth) {
p1 = Kinetic.Plugins.Path.getPointOnLine(glyphWidth, p0.x, p0.y, pathCmd.points[0], pathCmd.points[1], p0.x, p0.y);
}
else
pathCmd = undefined;
@@ -224,7 +224,7 @@
currentT = end;
needNewSegment = true;
}
p1 = Kinetic.Path.getPointOnEllipticalArc(pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], currentT, pathCmd.points[6]);
p1 = Kinetic.Plugins.Path.getPointOnEllipticalArc(pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], currentT, pathCmd.points[6]);
break;
case 'C':
if(currentT === 0) {
@@ -242,7 +242,7 @@
currentT = 1.0;
needNewSegment = true;
}
p1 = Kinetic.Path.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.Path.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)
@@ -256,13 +256,13 @@
currentT = 1.0;
needNewSegment = true;
}
p1 = Kinetic.Path.getPointOnQuadraticBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3]);
p1 = Kinetic.Plugins.Path.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.Path.getLineLength(p0.x, p0.y, p1.x, p1.y);
currLen = Kinetic.Plugins.Path.getLineLength(p0.x, p0.y, p1.x, p1.y);
}
if(needNewSegment) {
@@ -279,7 +279,7 @@
if(p0 === undefined || p1 === undefined)
break;
var width = Kinetic.Path.getLineLength(p0.x, p0.y, p1.x, p1.y);
var width = Kinetic.Plugins.Path.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.
@@ -287,7 +287,7 @@
var kern = 0;
// placeholder for future implementation
var midpoint = Kinetic.Path.getPointOnLine(kern + width / 2.0, p0.x, p0.y, p1.x, p1.y);
var midpoint = Kinetic.Plugins.Path.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({

2
tests/js/unit/containerTests.js
View File

@@ -528,7 +528,7 @@ Test.Modules.CONTAINER = {
data: "M 10,10 300,150 550,150"
});
var path = new Kinetic.Path({
var path = new Kinetic.Plugins.Path({
x: 200,
y: -75,
data: 'M200,100h100v50z',

2
tests/js/unit/plugins/labelTests.js
View File

@@ -1,5 +1,5 @@
Test.Modules.LABEL = {
'*add label': function(containerId) {
'add label': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,

100
tests/js/unit/shapes/pathTests.js → tests/js/unit/plugins/pathTests.js
View File

File diff suppressed because one or more lines are too long

6
tests/js/unit/plugins/textPathTests.js
View File

@@ -13,7 +13,7 @@ Test.Modules['TEXT PATH'] = {
var c = "M 10,10 300,150";
var path = new Kinetic.Path({
var path = new Kinetic.Plugins.Path({
stroke: 'red',
strokeWidth: 1,
data: c
@@ -47,7 +47,7 @@ Test.Modules['TEXT PATH'] = {
var layer = new Kinetic.Layer();
var c = "M10,10 C0,0 10,150 100,100 S300,150 400,50";
var path = new Kinetic.Path({
var path = new Kinetic.Plugins.Path({
stroke: 'red',
strokeWidth: 1,
data: c
@@ -82,7 +82,7 @@ Test.Modules['TEXT PATH'] = {
var layer = new Kinetic.Layer();
var c = "M 250,100 A 100 50 30 1 0 150 150";
var path = new Kinetic.Path({
var path = new Kinetic.Plugins.Path({
stroke: 'red',
strokeWidth: 1,
data: c