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

Merge branch 'andrewDyakin-master'

Browse Source
This commit is contained in:
Anton Lavrenov 2018-08-30 13:50:07 +03:00
commit 74d83c8465
6 changed files with 288 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -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
View File

@ -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
View File

File diff suppressed because one or more lines are too long

105
src/shapes/Path.js
View File

@ -34,8 +34,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);
@ -116,6 +124,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);

2
src/shapes/Text.js
View File

@ -280,7 +280,7 @@
return this.textWidth;
},
/**
* get text height
* get height of one line text
* @method
* @memberof Konva.Text.prototype
* @returns {Number}

68
test/unit/shapes/Path-test.js
View File

@ -987,6 +987,74 @@ suite('Path', function() {
);
});
// ======================================================
test('get path length', function() {
var path = new Konva.Path({ data: 'M 10,10 L 20,10 L 20,20' });
assert.equal(path.getLength(), 20);
});
// ======================================================
test('get point at path', function() {
var stage = addStage();
var layer = new Konva.Layer();
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'
});
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,
radius: 2,
fill: 'black',
stroke: 'black'
});
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);
});
// ======================================================
test('Borneo Map (has scientific notation: -10e-4)', function() {
var stage = addStage();