mirror of
https://github.com/konvajs/konva.git
synced 2025-11-18 17:21:36 +08:00
Changed namespace for "plugin" shapes to Kinetic.Plugins. *This is a breaking change!*
Fixed unit tests. Extracted Path parsing logic into PathHelper so that it's not tied to a particular shape.
This commit is contained in:
Jason Follas
@@ -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: [],
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
* @augments Kinetic.Shape
|
||||
* @param {Object} config
|
||||
*/
|
||||
Kinetic.Path = Kinetic.Shape.extend({
|
||||
Kinetic.Plugins.Path = Kinetic.Shape.extend({
|
||||
init : function (config) {
|
||||
this.shapeType = "Path";
|
||||
this.dataArray = [];
|
||||
@@ -69,278 +69,16 @@ Kinetic.Path = Kinetic.Shape.extend({
|
||||
// call super constructor
|
||||
this._super(config);
|
||||
|
||||
this.dataArray = this._getDataArray();
|
||||
this.dataArray = Kinetic.Plugins.PathHelper.parsePathData(this.attrs.data);
|
||||
|
||||
this.on('dataChange', function () {
|
||||
that.dataArray = that._getDataArray();
|
||||
that.dataArray = Kinetic.Plugins.PathHelper.parsePathData(that.attrs.data);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 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 = 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 = 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();
|
||||
cmd = 'A';
|
||||
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 : Kinetic.PathHelper.calcLength(startX, startY, cmd || c, points)
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
if (c === 'z' || c === 'Z')
|
||||
ca.push({
|
||||
command : 'z',
|
||||
points : [],
|
||||
start : undefined,
|
||||
pathLength : 0
|
||||
});
|
||||
}
|
||||
|
||||
return ca;
|
||||
}
|
||||
});
|
||||
|
||||
// add getters setters
|
||||
Kinetic.Node.addGettersSetters(Kinetic.Path, ['data']);
|
||||
Kinetic.Node.addGettersSetters(Kinetic.Plugins.Path, ['data']);
|
||||
|
||||
/**
|
||||
* set SVG path data string. This method
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
* Path constructor.
|
||||
* @author Jason Follas
|
||||
* @constructor
|
||||
* @augments Kinetic.Path
|
||||
* @augments Kinetic.Shape
|
||||
* @param {Object} config
|
||||
*/
|
||||
Kinetic.TextPath = Kinetic.Shape.extend({
|
||||
Kinetic.Plugins.TextPath = Kinetic.Shape.extend({
|
||||
init : function (config) {
|
||||
|
||||
this.setDefaultAttrs({
|
||||
@@ -24,8 +24,6 @@ Kinetic.TextPath = Kinetic.Shape.extend({
|
||||
this.dataArray = [];
|
||||
var that = this;
|
||||
|
||||
this._getDataArray = Kinetic.Path.prototype._getDataArray;
|
||||
|
||||
config.drawFunc = function (context) {
|
||||
var charArr = this.charArr;
|
||||
|
||||
@@ -70,14 +68,14 @@ Kinetic.TextPath = Kinetic.Shape.extend({
|
||||
// call super constructor
|
||||
this._super(config);
|
||||
|
||||
this.dataArray = this._getDataArray();
|
||||
this.dataArray = Kinetic.Plugins.PathHelper.parsePathData(this.attrs.data);
|
||||
|
||||
this.on('dataChange', function () {
|
||||
that.dataArray = that._getDataArray();
|
||||
that.dataArray = Kinetic.Plugins.PathHelper.parsePathData(that.attrs.data);
|
||||
});
|
||||
|
||||
// update text data for certain attr changes
|
||||
var attrs = ['padding', 'text', 'textStroke', 'textStrokeWidth'];
|
||||
var attrs = ['text', 'textStroke', 'textStrokeWidth'];
|
||||
for (var n = 0; n < attrs.length; n++) {
|
||||
var attr = attrs[n];
|
||||
this.on(attr + 'Change', that._setTextData);
|
||||
@@ -87,12 +85,16 @@ Kinetic.TextPath = Kinetic.Shape.extend({
|
||||
},
|
||||
/**
|
||||
* 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;
|
||||
@@ -175,17 +177,15 @@ Kinetic.TextPath = Kinetic.Shape.extend({
|
||||
}
|
||||
}
|
||||
|
||||
if (pathCmd === {}
|
||||
|
||||
|| p0 === undefined)
|
||||
if (pathCmd === {} || p0 === undefined)
|
||||
return undefined;
|
||||
|
||||
var needNewSegment = false;
|
||||
|
||||
switch (pathCmd.command) {
|
||||
case 'L':
|
||||
if (Kinetic.PathHelper.getLineLength(p0.x, p0.y, pathCmd.points[0], pathCmd.points[1]) > glyphWidth) {
|
||||
p1 = Kinetic.PathHelper.getPointOnLine(glyphWidth, p0.x, p0.y, pathCmd.points[0], pathCmd.points[1], p0.x, p0.y);
|
||||
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;
|
||||
@@ -208,7 +208,7 @@ Kinetic.TextPath = Kinetic.Shape.extend({
|
||||
needNewSegment = true;
|
||||
}
|
||||
|
||||
p1 = Kinetic.PathHelper.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) {
|
||||
@@ -226,7 +226,7 @@ Kinetic.TextPath = Kinetic.Shape.extend({
|
||||
needNewSegment = true;
|
||||
}
|
||||
|
||||
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]);
|
||||
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)
|
||||
@@ -241,13 +241,13 @@ Kinetic.TextPath = Kinetic.Shape.extend({
|
||||
needNewSegment = true;
|
||||
}
|
||||
|
||||
p1 = Kinetic.PathHelper.getPointOnQuadraticBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3]);
|
||||
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.PathHelper.getLineLength(p0.x, p0.y, p1.x, p1.y);
|
||||
currLen = Kinetic.Plugins.PathHelper.getLineLength(p0.x, p0.y, p1.x, p1.y);
|
||||
}
|
||||
|
||||
if (needNewSegment) {
|
||||
@@ -265,14 +265,14 @@ Kinetic.TextPath = Kinetic.Shape.extend({
|
||||
if (p0 === undefined || p1 === undefined)
|
||||
break;
|
||||
|
||||
var width = Kinetic.PathHelper.getLineLength(p0.x, p0.y, p1.x, p1.y);
|
||||
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.PathHelper.getPointOnLine(kern + width / 2.0, p0.x, p0.y, p1.x, p1.y);
|
||||
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({
|
||||
@@ -290,4 +290,95 @@ Kinetic.TextPath = Kinetic.Shape.extend({
|
||||
});
|
||||
|
||||
// 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.Text.prototype
|
||||
* @param {String} fontFamily
|
||||
*/
|
||||
|
||||
/**
|
||||
* set font size
|
||||
* @name setFontSize
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
* @param {int} fontSize
|
||||
*/
|
||||
|
||||
/**
|
||||
* set font style. Can be "normal", "italic", or "bold". "normal" is the default.
|
||||
* @name setFontStyle
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
* @param {String} fontStyle
|
||||
*/
|
||||
|
||||
/**
|
||||
* set text fill color
|
||||
* @name setTextFill
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
* @param {String} textFill
|
||||
*/
|
||||
|
||||
/**
|
||||
* set text stroke color
|
||||
* @name setFontStroke
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
* @param {String} textStroke
|
||||
*/
|
||||
|
||||
/**
|
||||
* set text stroke width
|
||||
* @name setTextStrokeWidth
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
* @param {int} textStrokeWidth
|
||||
*/
|
||||
|
||||
/**
|
||||
* set text
|
||||
* @name setText
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
* @param {String} text
|
||||
*/
|
||||
|
||||
/**
|
||||
* get font family
|
||||
* @name getFontFamily
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get font size
|
||||
* @name getFontSize
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get font style
|
||||
* @name getFontStyle
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get text fill color
|
||||
* @name getTextFill
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get text stroke color
|
||||
* @name getTextStroke
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get text stroke width
|
||||
* @name getTextStrokeWidth
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get text
|
||||
* @name getText
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
*/
|
||||
|
||||
@@ -1,7 +1,271 @@
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
// PathHelper
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
Kinetic.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,
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user