mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
89 lines
2.6 KiB
JavaScript
89 lines
2.6 KiB
JavaScript
suite('Arrow', function() {
|
|
// ======================================================
|
|
test('add arrow', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
var arrow = new Konva.Arrow({
|
|
points: [73, 160, 340, 23],
|
|
stroke: 'blue',
|
|
fill: 'blue',
|
|
strokeWidth: 1,
|
|
draggable: true,
|
|
tension: 0
|
|
});
|
|
|
|
layer.add(arrow);
|
|
stage.add(layer);
|
|
|
|
arrow.setPoints([1, 2, 3, 4]);
|
|
assert.equal(arrow.points()[0], 1);
|
|
|
|
arrow.setPoints([5, 6, 7, 8]);
|
|
assert.equal(arrow.getPoints()[0], 5);
|
|
arrow.setPoints([73, 160, 340, 23, 50, 100, 80, 50]);
|
|
arrow.tension(0);
|
|
|
|
arrow.pointerLength(15);
|
|
assert.equal(arrow.pointerLength(), 15);
|
|
|
|
arrow.pointerWidth(15);
|
|
assert.equal(arrow.pointerWidth(), 15);
|
|
|
|
assert.equal(arrow.getClassName(), 'Arrow');
|
|
|
|
layer.draw();
|
|
showHit(layer);
|
|
});
|
|
|
|
test('do not draw dash for head', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
var arrow = new Konva.Arrow({
|
|
points: [50, 50, 100, 100],
|
|
stroke: 'red',
|
|
fill: 'blue',
|
|
strokeWidth: 5,
|
|
pointerWidth: 20,
|
|
pointerLength: 20,
|
|
dash: [5, 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);beginPath();moveTo(50,50);lineTo(100,100);setLineDash(5,5);lineDashOffset=0;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();fillStyle=blue;fill();lineWidth=5;strokeStyle=red;stroke();restore();'
|
|
);
|
|
});
|
|
|
|
test('direction with tension', function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
var arrow = new Konva.Arrow({
|
|
points: [50, 50, 100, 50, 100, 100],
|
|
stroke: 'red',
|
|
fill: 'red',
|
|
tension: 1,
|
|
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(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();'
|
|
);
|
|
});
|
|
});
|