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

make arrow with tension a bit better

Browse Source
This commit is contained in:
Anton Lavrenov 2019-08-07 11:42:35 +07:00
parent ffe8456496
commit 85d1cdd09c
5 changed files with 86 additions and 1344 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1385
konva.js
View File

File diff suppressed because it is too large Load Diff

8
release.sh
View File

@ -74,14 +74,14 @@ npm publish >/dev/null
echo "copy konva.js into konva-site" echo "copy konva.js into konva-site"
cp ./konva.js ../konva-site/ cp ./konva.js ../konva-site/
# cd ../konva-site cd ../konva-site
# echo "replace CDN links" echo "replace CDN links"
find source themes react-demos vue-demos main-demo -name "*.json|*.html" -exec perl -i -pe "s|${old_version}|${new_version}|g" {} + >/dev/null find source themes react-demos vue-demos main-demo -name "*.json|*.html" -exec perl -i -pe "s|${old_version}|${new_version}|g" {} + >/dev/null
# echo "regenerate site" echo "regenerate site"
# ./deploy.sh >/dev/null ./deploy.sh >/dev/null
echo "DONE!" echo "DONE!"

8
src/shapes/Arrow.ts
View File

@ -53,8 +53,8 @@ export class Arrow extends Line<ArrowConfig> {
var dx, dy; var dx, dy;
if (fromTension) { if (fromTension) {
dx = points[n - 2] - tp[n - 2]; dx = points[n - 2] - (tp[tp.length - 2] + tp[tp.length - 4]) / 2;
dy = points[n - 1] - tp[n - 1]; dy = points[n - 1] - (tp[tp.length - 1] + tp[tp.length - 3]) / 2;
} else { } else {
dx = points[n - 2] - points[n - 4]; dx = points[n - 2] - points[n - 4];
dy = points[n - 1] - points[n - 3]; dy = points[n - 1] - points[n - 3];
@ -78,8 +78,8 @@ export class Arrow extends Line<ArrowConfig> {
ctx.save(); ctx.save();
ctx.translate(points[0], points[1]); ctx.translate(points[0], points[1]);
if (fromTension) { if (fromTension) {
dx = tp[0] - points[0]; dx = (tp[0] + tp[2]) / 2 - points[0];
dy = tp[1] - points[1]; dy = (tp[1] + tp[3]) / 2 - points[1];
} else { } else {
dx = points[2] - points[0]; dx = points[2] - points[0];
dy = points[3] - points[1]; dy = points[3] - points[1];

3
src/shapes/Line.ts
View File

@ -5,6 +5,7 @@ import { getNumberValidator, getNumberArrayValidator } from '../Validators';
import { _registerNode } from '../Global'; import { _registerNode } from '../Global';
import { GetSet } from '../types'; import { GetSet } from '../types';
import { Context } from '../Context';
export interface LineConfig extends ShapeConfig { export interface LineConfig extends ShapeConfig {
points: number[]; points: number[];
@ -50,7 +51,7 @@ export class Line<Config extends LineConfig = LineConfig> extends Shape<
); );
} }
_sceneFunc(context) { _sceneFunc(context: Context) {
var points = this.points(), var points = this.points(),
length = points.length, length = points.length,
tension = this.tension(), tension = this.tension(),

26
test/unit/shapes/Arrow-test.js
View File

@ -82,7 +82,31 @@ suite('Arrow', function() {
assert.equal( assert.equal(
trace, trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(50,50);quadraticCurveTo(75,25,100,50);quadraticCurveTo(125,75,100,100);lineWidth=2;strokeStyle=red;stroke();save();beginPath();translate(100,100);rotate(2.356);moveTo(0,0);lineTo(-10,5);lineTo(-10,-5);closePath();restore();save();translate(50,50);rotate(2.356);moveTo(0,0);lineTo(-10,5);lineTo(-10,-5);closePath();restore();setLineDash();fillStyle=red;fill();lineWidth=2;strokeStyle=red;stroke();restore();' 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(50,50);quadraticCurveTo(75,25,100,50);quadraticCurveTo(125,75,100,100);lineWidth=2;strokeStyle=red;stroke();save();beginPath();translate(100,100);rotate(1.893);moveTo(0,0);lineTo(-10,5);lineTo(-10,-5);closePath();restore();save();translate(50,50);rotate(2.82);moveTo(0,0);lineTo(-10,5);lineTo(-10,-5);closePath();restore();setLineDash();fillStyle=red;fill();lineWidth=2;strokeStyle=red;stroke();restore();'
);
});
test('direction with tension 2', function() {
var stage = addStage();
var layer = new Konva.Layer();
var arrow = new Konva.Arrow({
points: [79, 63, 87, 80, 124, 82, 141, 107, 165, 104],
stroke: 'red',
fill: 'red',
tension: 1,
pointerWidth: 10,
pointerAtBeginning: true
});
layer.add(arrow);
stage.add(layer);
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(79,63);quadraticCurveTo(71.86,73.607,87,80);bezierCurveTo(116.86,92.607,94.263,67.131,124,82);bezierCurveTo(148.263,94.131,118.223,94.778,141,107);quadraticCurveTo(159.223,116.778,165,104);lineWidth=2;strokeStyle=red;stroke();save();beginPath();translate(165,104);rotate(5.796);moveTo(0,0);lineTo(-10,5);lineTo(-10,-5);closePath();restore();save();translate(79,63);rotate(4.681);moveTo(0,0);lineTo(-10,5);lineTo(-10,-5);closePath();restore();setLineDash();fillStyle=red;fill();lineWidth=2;strokeStyle=red;stroke();restore();'
); );
}); });
}); });