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

Fix Konva.Arrow rendering when it has two pointers

Browse Source
This commit is contained in:
Anton Lavrenov 2021-10-06 09:17:11 -05:00
parent e0bc1f9bb2
commit 0c7ea65e22
3 changed files with 38 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -3,6 +3,10 @@
All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).
## 8.2.2
- Fix `Konva.Arrow` rendering when it has two pointers
## 8.2.1
- Fix `package.json` exports.

9
src/shapes/Arrow.ts
View File

@ -101,6 +101,7 @@ export class Arrow extends Line<ArrowConfig> {
ctx.lineTo(-length, -width / 2);
ctx.closePath();
ctx.restore();
this.__fillStroke(ctx);
}
if (this.pointerAtBeginning()) {
@ -121,13 +122,11 @@ export class Arrow extends Line<ArrowConfig> {
ctx.lineTo(-length, -width / 2);
ctx.closePath();
ctx.restore();
this.__fillStroke(ctx);
}
}
const hasPointer = this.pointerAtEnding() || this.pointerAtBeginning();
if (!hasPointer) {
return;
}
__fillStroke(ctx) {
// here is a tricky part
// we need to disable dash for arrow pointers
var isDashEnabled = this.dashEnabled();

32
test/unit/Arrow-test.ts
View File

@ -66,6 +66,34 @@ describe('Arrow', function () {
);
});
it('pointer on both directions', function () {
var stage = addStage();
var layer = new Konva.Layer();
var arrow = new Konva.Arrow({
points: [50, 50, 100, 100],
stroke: 'red',
strokeWidth: 5,
pointerWidth: 20,
pointerLength: 20,
pointerAtBeginning: true,
pointerAtEnding: true,
opacity: 0.5,
});
layer.add(arrow);
stage.add(layer);
var trace = layer.getContext().getTrace();
// console.log(trace);
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);globalAlpha=0.5;beginPath();moveTo(50,50);lineTo(100,100);lineWidth=5;strokeStyle=red;stroke();save();beginPath();translate(100,100);rotate(0.785);moveTo(0,0);lineTo(-20,10);lineTo(-20,-10);closePath();restore();setLineDash();lineWidth=5;strokeStyle=red;stroke();save();beginPath();translate(50,50);rotate(3.927);moveTo(0,0);lineTo(-20,10);lineTo(-20,-10);closePath();restore();setLineDash();lineWidth=5;strokeStyle=red;stroke();restore();'
);
});
it('dash checks', function () {
var stage = addStage();
@ -147,7 +175,7 @@ describe('Arrow', function () {
assert.equal(
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);moveTo(0,0);lineTo(-10,5);lineTo(-10,-5);closePath();restore();save();beginPath();translate(50,50);rotate(2);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(2);moveTo(0,0);lineTo(-10,5);lineTo(-10,-5);closePath();restore();setLineDash();fillStyle=red;fill();lineWidth=2;strokeStyle=red;stroke();save();beginPath();translate(50,50);rotate(2);moveTo(0,0);lineTo(-10,5);lineTo(-10,-5);closePath();restore();setLineDash();fillStyle=red;fill();lineWidth=2;strokeStyle=red;stroke();restore();'
);
});
@ -176,7 +204,7 @@ describe('Arrow', function () {
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(79,63);quadraticCurveTo(72,74,87,80);bezierCurveTo(117,93,94,67,124,82);bezierCurveTo(149,94,119,95,141,107);quadraticCurveTo(159,117,165,104);lineWidth=2;strokeStyle=red;stroke();save();beginPath();translate(165,104);rotate(5);moveTo(0,0);lineTo(-10,5);lineTo(-10,-5);closePath();restore();save();beginPath();translate(79,63);rotate(4);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(79,63);quadraticCurveTo(72,74,87,80);bezierCurveTo(117,93,94,67,124,82);bezierCurveTo(149,94,119,95,141,107);quadraticCurveTo(159,117,165,104);lineWidth=2;strokeStyle=red;stroke();save();beginPath();translate(165,104);rotate(5);moveTo(0,0);lineTo(-10,5);lineTo(-10,-5);closePath();restore();setLineDash();fillStyle=red;fill();lineWidth=2;strokeStyle=red;stroke();save();beginPath();translate(79,63);rotate(4);moveTo(0,0);lineTo(-10,5);lineTo(-10,-5);closePath();restore();setLineDash();fillStyle=red;fill();lineWidth=2;strokeStyle=red;stroke();restore();'
);
});