mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 03:13:41 +08:00
add docs, change tests
This commit is contained in:
Anton Lavrenov
parent
973344a3c6
commit
0a6bd95414
@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
|
||||
|
||||
## [new version][unreleased]
|
||||
|
||||
### Added
|
||||
|
||||
* new methods `path.getLength()` and `path.getPointAtLength(val)`
|
||||
|
||||
## [2.2.2][2018-08-21]
|
||||
|
||||
### Changed
|
||||
|
||||
109
konva.js
109
konva.js
@ -2,7 +2,7 @@
|
||||
* Konva JavaScript Framework v2.2.2
|
||||
* http://konvajs.github.io/
|
||||
* Licensed under the MIT
|
||||
* Date: Tue Aug 21 2018
|
||||
* Date: Thu Aug 30 2018
|
||||
*
|
||||
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
|
||||
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
|
||||
@ -15287,7 +15287,7 @@
|
||||
return this.textWidth;
|
||||
},
|
||||
/**
|
||||
* get text height
|
||||
* get height of one line text
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @returns {Number}
|
||||
@ -16635,8 +16635,16 @@
|
||||
this.className = 'Path';
|
||||
|
||||
this.dataArray = Konva.Path.parsePathData(this.getData());
|
||||
this.pathLength = 0;
|
||||
for (var i = 0; i < this.dataArray.length; ++i) {
|
||||
this.pathLength += this.dataArray[i].pathLength;
|
||||
}
|
||||
this.on('dataChange.konva', function() {
|
||||
that.dataArray = Konva.Path.parsePathData(this.getData());
|
||||
this.pathLength = 0;
|
||||
for (var i = 0; i < this.dataArray.length; ++i) {
|
||||
this.pathLength += this.dataArray[i].pathLength;
|
||||
}
|
||||
});
|
||||
|
||||
this.sceneFunc(this._sceneFunc);
|
||||
@ -16717,6 +16725,103 @@
|
||||
width: Math.round(maxX - minX),
|
||||
height: Math.round(maxY - minY)
|
||||
};
|
||||
},
|
||||
/**
|
||||
* Return length of the path.
|
||||
* @method
|
||||
* @memberof Konva.Path.prototype
|
||||
* @returns {Number} length
|
||||
* @example
|
||||
* var length = path.getLength();
|
||||
*/
|
||||
getLength: function() {
|
||||
return this.pathLength;
|
||||
},
|
||||
/**
|
||||
* Get point on path at specific length of the path
|
||||
* @method
|
||||
* @memberof Konva.Path.prototype
|
||||
* @param {Number} length length
|
||||
* @returns {Object} point {x,y} point
|
||||
* @example
|
||||
* var point = path.getPointAtLength(10);
|
||||
*/
|
||||
getPointAtLength: function(length) {
|
||||
var point,
|
||||
i = 0,
|
||||
ii = this.dataArray.length;
|
||||
|
||||
if (!ii) {
|
||||
return null;
|
||||
}
|
||||
|
||||
while (i < ii && length > this.dataArray[i].pathLength) {
|
||||
length -= this.dataArray[i].pathLength;
|
||||
++i;
|
||||
}
|
||||
|
||||
if (i === ii) {
|
||||
point = this.dataArray[i - 1].points.slice(-2);
|
||||
return {
|
||||
x: point[0],
|
||||
y: point[1]
|
||||
};
|
||||
}
|
||||
|
||||
if (length < 0.01) {
|
||||
point = this.dataArray[i].points.slice(0, 2);
|
||||
return {
|
||||
x: point[0],
|
||||
y: point[1]
|
||||
};
|
||||
}
|
||||
|
||||
var cp = this.dataArray[i];
|
||||
var p = cp.points;
|
||||
switch (cp.command) {
|
||||
case 'L':
|
||||
return Konva.Path.getPointOnLine(
|
||||
length,
|
||||
cp.start.x,
|
||||
cp.start.y,
|
||||
p[0],
|
||||
p[1]
|
||||
);
|
||||
case 'C':
|
||||
return Konva.Path.getPointOnCubicBezier(
|
||||
length / cp.pathLength,
|
||||
cp.start.x,
|
||||
cp.start.y,
|
||||
p[0],
|
||||
p[1],
|
||||
p[2],
|
||||
p[3],
|
||||
p[4],
|
||||
p[5]
|
||||
);
|
||||
case 'Q':
|
||||
return Konva.Path.getPointOnQuadraticBezier(
|
||||
length / cp.pathLength,
|
||||
cp.start.x,
|
||||
cp.start.y,
|
||||
p[0],
|
||||
p[1],
|
||||
p[2],
|
||||
p[3]
|
||||
);
|
||||
case 'A':
|
||||
var cx = p[0],
|
||||
cy = p[1],
|
||||
rx = p[2],
|
||||
ry = p[3],
|
||||
theta = p[4],
|
||||
dTheta = p[5],
|
||||
psi = p[6];
|
||||
theta += dTheta * length / cp.pathLength;
|
||||
return Konva.Path.getPointOnEllipticalArc(cx, cy, rx, ry, theta, psi);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
};
|
||||
Konva.Util.extend(Konva.Path, Konva.Shape);
|
||||
|
||||
6
konva.min.js
vendored
6
konva.min.js
vendored
File diff suppressed because one or more lines are too long
@ -125,11 +125,30 @@
|
||||
height: Math.round(maxY - minY)
|
||||
};
|
||||
},
|
||||
getLength: function () {
|
||||
/**
|
||||
* Return length of the path.
|
||||
* @method
|
||||
* @memberof Konva.Path.prototype
|
||||
* @returns {Number} length
|
||||
* @example
|
||||
* var length = path.getLength();
|
||||
*/
|
||||
getLength: function() {
|
||||
return this.pathLength;
|
||||
},
|
||||
getPointAtLength: function (length) {
|
||||
var point, i = 0, ii = this.dataArray.length;
|
||||
/**
|
||||
* Get point on path at specific length of the path
|
||||
* @method
|
||||
* @memberof Konva.Path.prototype
|
||||
* @param {Number} length length
|
||||
* @returns {Object} point {x,y} point
|
||||
* @example
|
||||
* var point = path.getPointAtLength(10);
|
||||
*/
|
||||
getPointAtLength: function(length) {
|
||||
var point,
|
||||
i = 0,
|
||||
ii = this.dataArray.length;
|
||||
|
||||
if (!ii) {
|
||||
return null;
|
||||
@ -160,19 +179,48 @@
|
||||
var p = cp.points;
|
||||
switch (cp.command) {
|
||||
case 'L':
|
||||
return Konva.Path.getPointOnLine(length, cp.start.x, cp.start.y, p[0], p[1]);
|
||||
return Konva.Path.getPointOnLine(
|
||||
length,
|
||||
cp.start.x,
|
||||
cp.start.y,
|
||||
p[0],
|
||||
p[1]
|
||||
);
|
||||
case 'C':
|
||||
return Konva.Path.getPointOnCubicBezier(length / cp.pathLength, cp.start.x, cp.start.y, p[0], p[1], p[2], p[3], p[4], p[5]);
|
||||
return Konva.Path.getPointOnCubicBezier(
|
||||
length / cp.pathLength,
|
||||
cp.start.x,
|
||||
cp.start.y,
|
||||
p[0],
|
||||
p[1],
|
||||
p[2],
|
||||
p[3],
|
||||
p[4],
|
||||
p[5]
|
||||
);
|
||||
case 'Q':
|
||||
return Konva.Path.getPointOnQuadraticBezier(length / cp.pathLength, cp.start.x, cp.start.y, p[0], p[1], p[2], p[3]);
|
||||
return Konva.Path.getPointOnQuadraticBezier(
|
||||
length / cp.pathLength,
|
||||
cp.start.x,
|
||||
cp.start.y,
|
||||
p[0],
|
||||
p[1],
|
||||
p[2],
|
||||
p[3]
|
||||
);
|
||||
case 'A':
|
||||
var cx = p[0], cy = p[1], rx = p[2], ry = p[3], theta = p[4], dTheta = p[5], psi = p[6];
|
||||
var cx = p[0],
|
||||
cy = p[1],
|
||||
rx = p[2],
|
||||
ry = p[3],
|
||||
theta = p[4],
|
||||
dTheta = p[5],
|
||||
psi = p[6];
|
||||
theta += dTheta * length / cp.pathLength;
|
||||
return Konva.Path.getPointOnEllipticalArc(cx, cy, rx, ry, theta, psi);
|
||||
}
|
||||
|
||||
return null;
|
||||
|
||||
}
|
||||
};
|
||||
Konva.Util.extend(Konva.Path, Konva.Shape);
|
||||
|
||||
@ -280,7 +280,7 @@
|
||||
return this.textWidth;
|
||||
},
|
||||
/**
|
||||
* get text height
|
||||
* get height of one line text
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @returns {Number}
|
||||
|
||||
@ -1002,12 +1002,15 @@ suite('Path', function() {
|
||||
var path = new Konva.Path({
|
||||
stroke: 'red',
|
||||
strokeWidth: 3,
|
||||
data: 'M 300,10 L 250,100 A 100 40 30 1 0 150 150 C 160,100, 290,100, 300,150'
|
||||
data:
|
||||
'M 300,10 L 250,100 A 100 40 30 1 0 150 150 C 160,100, 290,100, 300,150'
|
||||
});
|
||||
layer.add(path);
|
||||
|
||||
var points = [];
|
||||
for (var i = 0; i < path.getLength(); i += 20) {
|
||||
var p = path.getPointAtLength(i);
|
||||
points.push(p);
|
||||
var circle = new Konva.Circle({
|
||||
x: p.x,
|
||||
y: p.y,
|
||||
@ -1018,6 +1021,37 @@ suite('Path', function() {
|
||||
layer.add(circle);
|
||||
}
|
||||
|
||||
assert.deepEqual(points, [
|
||||
{ x: 300, y: 10 },
|
||||
{ x: 290.2871413779118, y: 27.48314552325543 },
|
||||
{ x: 280.57428275582356, y: 44.96629104651086 },
|
||||
{ x: 270.86142413373534, y: 62.4494365697663 },
|
||||
{ x: 261.1485655116471, y: 79.93258209302172 },
|
||||
{ x: 251.43570688955887, y: 97.41572761627717 },
|
||||
{ x: 230.89220826660141, y: 87.23996356219386 },
|
||||
{ x: 207.0639321224534, y: 74.08466390481559 },
|
||||
{ x: 182.87529785963875, y: 63.52674972743341 },
|
||||
{ x: 159.56025996483157, y: 56.104820499018956 },
|
||||
{ x: 138.30820744216845, y: 52.197497135977514 },
|
||||
{ x: 120.20328854394192, y: 52.00410710518156 },
|
||||
{ x: 106.16910423342256, y: 55.53451596967142 },
|
||||
{ x: 96.92159177720502, y: 62.60862410865827 },
|
||||
{ x: 92.93250205472883, y: 72.86555428606191 },
|
||||
{ x: 94.40533374670959, y: 85.78206137467119 },
|
||||
{ x: 101.26495209131289, y: 100.69922508568548 },
|
||||
{ x: 113.1614217949117, y: 116.85606400569954 },
|
||||
{ x: 129.4878585660311, y: 133.42835616090537 },
|
||||
{ x: 149.41138859764925, y: 149.5706857234721 },
|
||||
{ x: 157.23649735164412, y: 135.43198059754286 },
|
||||
{ x: 171.63472376239991, y: 124.16936108372946 },
|
||||
{ x: 191.0783332798296, y: 116.67529781728555 },
|
||||
{ x: 213.53990876948748, y: 112.94979079821127 },
|
||||
{ x: 236.99203309692777, y: 112.99284002650663 },
|
||||
{ x: 259.4072891277046, y: 116.80444550217156 },
|
||||
{ x: 278.75825972737204, y: 124.3846072252061 },
|
||||
{ x: 293.0175277614844, y: 135.7333251956102 }
|
||||
]);
|
||||
|
||||
stage.add(layer);
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user