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

update CHANGELOG with new version

Browse Source
This commit is contained in:
Anton Lavrenov
2020-02-16 07:39:42 -05:00
parent 2d04edef7e
commit 396297bdfc
5 changed files with 137 additions and 23 deletions
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/).
## Not released:
## 4.1.5 - 2020-02-16
* Fixes for `path.getClientRect()` function calculations
## 4.1.4 - 2020-02-10
* Fix wrong internal caching of absolute attributes

40
konva.js
View File

@@ -8,7 +8,7 @@
* Konva JavaScript Framework v4.1.4
* http://konvajs.org/
* Licensed under the MIT
* Date: Mon Feb 10 2020
* Date: Sun Feb 16 2020
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -11587,12 +11587,38 @@
var points = [];
this.dataArray.forEach(function (data) {
if (data.command === 'A') {
points = points.concat([
data.points[0] - data.points[2],
data.points[1] - data.points[3],
data.points[0] + data.points[2],
data.points[1] + data.points[3]
]);
// Approximates by breaking curve into line segments
var start = data.points[4];
// 4 = theta
var dTheta = data.points[5];
// 5 = dTheta
var end = data.points[4] + dTheta;
var inc = Math.PI / 180.0;
// 1 degree resolution
if (Math.abs(start - end) < inc) {
inc = Math.abs(start - end);
}
if (dTheta < 0) {
// clockwise
for (var t = start - inc; t > end; t -= inc) {
var point = Path.getPointOnEllipticalArc(data.points[0], data.points[1], data.points[2], data.points[3], t, 0);
points.push(point.x, point.y);
}
}
else {
// counter-clockwise
for (var t = start + inc; t < end; t += inc) {
var point = Path.getPointOnEllipticalArc(data.points[0], data.points[1], data.points[2], data.points[3], t, 0);
points.push(point.x, point.y);
}
}
}
else if (data.command === 'C') {
// Approximates by breaking curve into 100 line segments
for (var t = 0.0; t <= 1; t += 0.01) {
var point = Path.getPointOnCubicBezier(t, data.start.x, data.start.y, data.points[0], data.points[1], data.points[2], data.points[3], data.points[4], data.points[5]);
points.push(point.x, point.y);
}
}
else {
// TODO: how can we calculate bezier curves better?

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

60
src/shapes/Path.ts
View File

@@ -104,12 +104,60 @@ export class Path extends Shape<PathConfig> {
var points = [];
this.dataArray.forEach(function(data) {
if (data.command === 'A') {
points = points.concat([
data.points[0] - data.points[2],
data.points[1] - data.points[3],
data.points[0] + data.points[2],
data.points[1] + data.points[3]
])
// Approximates by breaking curve into line segments
var start = data.points[4];
// 4 = theta
var dTheta = data.points[5];
// 5 = dTheta
var end = data.points[4] + dTheta;
var inc = Math.PI / 180.0;
// 1 degree resolution
if (Math.abs(start - end) < inc) {
inc = Math.abs(start - end);
}
if (dTheta < 0) {
// clockwise
for (let t = start - inc; t > end; t -= inc) {
const point = Path.getPointOnEllipticalArc(
data.points[0],
data.points[1],
data.points[2],
data.points[3],
t,
0
);
points.push(point.x, point.y);
}
} else {
// counter-clockwise
for (let t = start + inc; t < end; t += inc) {
const point = Path.getPointOnEllipticalArc(
data.points[0],
data.points[1],
data.points[2],
data.points[3],
t,
0
);
points.push(point.x, point.y);
}
}
} else if (data.command === 'C') {
// Approximates by breaking curve into 100 line segments
for (let t = 0.0; t <= 1; t += 0.01) {
const point = Path.getPointOnCubicBezier(
t,
data.start.x,
data.start.y,
data.points[0],
data.points[1],
data.points[2],
data.points[3],
data.points[4],
data.points[5]
);
points.push(point.x, point.y);
}
} else {
// TODO: how can we calculate bezier curves better?
points = points.concat(data.points);

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

@@ -1179,10 +1179,10 @@ suite('Path', function() {
layer.add(back);
layer.draw();
assert.deepEqual(rect, {x: 8, y: 65, width: 95, height: 56});
assert.deepEqual(rect, { x: 9, y: 66, width: 95, height: 55 });
});
test.skip('getClientRect of another complex path', function() {
test('getClientRect of another complex path', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
@@ -1209,7 +1209,41 @@ suite('Path', function() {
layer.add(back);
layer.draw();
assert.deepEqual(rect, {x: 8, y: 65, width: 95, height: 56});
assert.deepEqual(rect, {
x: 49,
y: 49.7,
width: 215,
height: 71.39999999999999
});
});
test('getClientRect of one more path', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var path = new Konva.Path({
x: 50,
y: 50,
data:
'M25.21,2.36C22.11,6.1,19,10.17,22.1,15.52a2.14,2.14,0,0,1,.22.69c.18,1.09-.52,1.31-1.31,1.11C19.88,17,19.29,16,18.55,15.21a12.71,12.71,0,0,0-7.82-4.28c-3.24-.42-7.9,1.26-9,3.68-2.24,5-2.64,10.23.66,14.94a26,26,0,0,0,11.57,9c6.17,2.56,12.6,4.45,18.67,7.28,1.33.62,1.67-.14,2.11-1.12,3.84-8.44,5.64-17.32,6-28.25.53-3.82-1.37-8.64-4.3-13.12C33.91-.58,28.2-1.24,25.21,2.36Z',
fill: 'black',
stroke: 'red'
});
layer.add(path);
var rect = path.getClientRect();
var back = new Konva.Rect({
x: rect.x,
y: rect.y,
width: rect.width,
height: rect.height,
stroke: 'red'
});
layer.add(back);
layer.draw();
assert.deepEqual(rect, { x: 49, y: 49, width: 43, height: 48 });
});
test('getClientRect for arc', function() {
@@ -1229,14 +1263,11 @@ suite('Path', function() {
var scale = stage.height() / rect.height / 2;
path.x(-rect.x * scale);
path.y(-rect.y * scale);
path.scaleX(scale);
path.scaleY(scale);
rect = path.getClientRect();
var back = new Konva.Rect({
@@ -1249,6 +1280,11 @@ suite('Path', function() {
layer.add(back);
layer.draw();
assert.deepEqual(rect, {x: 0, y: 0, width: 132.53012048192795, height: 100});
assert.deepEqual(rect, {
x: 0,
y: 0,
width: 132.53012048192795,
height: 100
});
});
});