mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
2339 lines
57 KiB
TypeScript
2339 lines
57 KiB
TypeScript
import { assert } from 'chai';
|
|
|
|
import {
|
|
addStage,
|
|
simulateMouseDown,
|
|
simulateMouseMove,
|
|
simulateMouseUp,
|
|
createCanvas,
|
|
isBrowser,
|
|
isNode,
|
|
compareLayerAndCanvas,
|
|
compareLayers,
|
|
loadImage,
|
|
Konva,
|
|
compareCanvases,
|
|
} from './test-utils';
|
|
|
|
describe('Shape', function () {
|
|
// ======================================================
|
|
it('test intersects()', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var rect = new Konva.Rect({
|
|
x: 200,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
});
|
|
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
assert.equal(
|
|
rect.intersects({
|
|
x: 201,
|
|
y: 101,
|
|
}),
|
|
true,
|
|
'(201,101) should intersect the shape'
|
|
);
|
|
|
|
assert.equal(
|
|
rect.intersects({
|
|
x: 197,
|
|
y: 97,
|
|
}),
|
|
false,
|
|
'(197, 97) should not intersect the shape'
|
|
);
|
|
|
|
assert.equal(
|
|
rect.intersects({
|
|
x: 250,
|
|
y: 125,
|
|
}),
|
|
true,
|
|
'(250, 125) should intersect the shape'
|
|
);
|
|
|
|
assert.equal(
|
|
rect.intersects({
|
|
x: 300,
|
|
y: 150,
|
|
}),
|
|
true,
|
|
'(300, 150) should intersect the shape'
|
|
);
|
|
|
|
assert.equal(
|
|
rect.intersects({
|
|
x: 303,
|
|
y: 153,
|
|
}),
|
|
false,
|
|
'(303, 153) should not intersect the shape'
|
|
);
|
|
});
|
|
|
|
// ======================================================
|
|
it('test hasShadow() method', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var shape = new Konva.Shape({
|
|
sceneFunc: function (context) {
|
|
context.beginPath();
|
|
context.moveTo(0, 0);
|
|
context.lineTo(100, 0);
|
|
context.lineTo(100, 100);
|
|
context.closePath();
|
|
context.fillStrokeShape(this);
|
|
},
|
|
x: 10,
|
|
y: 10,
|
|
fill: 'green',
|
|
stroke: 'blue',
|
|
strokeWidth: 5,
|
|
shadowColor: 'black',
|
|
shadowOffsetX: 10,
|
|
shadowOpacity: 0,
|
|
});
|
|
|
|
layer.add(shape);
|
|
stage.add(layer);
|
|
|
|
assert.equal(
|
|
shape.hasShadow(),
|
|
false,
|
|
'shape should not have a shadow because opacity is 0'
|
|
);
|
|
|
|
shape.shadowOpacity(0.5);
|
|
|
|
assert.equal(
|
|
shape.hasShadow(),
|
|
true,
|
|
'shape should have a shadow because opacity is nonzero'
|
|
);
|
|
|
|
shape.shadowEnabled(false);
|
|
|
|
assert.equal(
|
|
shape.hasShadow(),
|
|
false,
|
|
'shape should not have a shadow because it is not enabled'
|
|
);
|
|
});
|
|
|
|
// ======================================================
|
|
it('custom shape with fill, stroke, and strokeWidth', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var shape = new Konva.Shape({
|
|
sceneFunc: function (context) {
|
|
context.beginPath();
|
|
context.moveTo(0, 0);
|
|
context.lineTo(100, 0);
|
|
context.lineTo(100, 100);
|
|
context.closePath();
|
|
context.fillStrokeShape(this);
|
|
},
|
|
x: 200,
|
|
y: 100,
|
|
fill: 'green',
|
|
stroke: 'blue',
|
|
strokeWidth: 5,
|
|
});
|
|
|
|
layer.add(shape);
|
|
stage.add(layer);
|
|
|
|
var trace = layer.getContext().getTrace();
|
|
|
|
assert.equal(
|
|
trace,
|
|
'clearRect(0,0,578,200);save();transform(1,0,0,1,200,100);beginPath();moveTo(0,0);lineTo(100,0);lineTo(100,100);closePath();fillStyle=green;fill();lineWidth=5;strokeStyle=blue;stroke();restore();'
|
|
);
|
|
});
|
|
|
|
// ======================================================
|
|
it('add star with translated, scaled, rotated fill', function (done) {
|
|
loadImage('darth-vader.jpg', (imageObj) => {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
var star = new Konva.Star({
|
|
x: 200,
|
|
y: 100,
|
|
numPoints: 5,
|
|
innerRadius: 40,
|
|
outerRadius: 70,
|
|
|
|
fillPatternImage: imageObj,
|
|
fillPatternX: -20,
|
|
fillPatternY: -30,
|
|
fillPatternScale: { x: 0.5, y: 0.5 },
|
|
fillPatternOffset: { x: 219, y: 150 },
|
|
fillPatternRotation: 90,
|
|
fillPatternRepeat: 'no-repeat',
|
|
|
|
stroke: 'blue',
|
|
strokeWidth: 5,
|
|
draggable: true,
|
|
});
|
|
|
|
layer.add(star);
|
|
stage.add(layer);
|
|
|
|
/*
|
|
var anim = new Konva.Animation(function() {
|
|
star.attrs.fill.rotation += 0.02;
|
|
}, layer);
|
|
anim.start();
|
|
*/
|
|
|
|
assert.equal(star.fillPatternX(), -20, 'star fill x should be -20');
|
|
assert.equal(star.fillPatternY(), -30, 'star fill y should be -30');
|
|
assert.equal(
|
|
star.fillPatternScale().x,
|
|
0.5,
|
|
'star fill scale x should be 0.5'
|
|
);
|
|
assert.equal(
|
|
star.fillPatternScale().y,
|
|
0.5,
|
|
'star fill scale y should be 0.5'
|
|
);
|
|
assert.equal(
|
|
star.fillPatternOffset().x,
|
|
219,
|
|
'star fill offset x should be 219'
|
|
);
|
|
assert.equal(
|
|
star.fillPatternOffset().y,
|
|
150,
|
|
'star fill offset y should be 150'
|
|
);
|
|
assert.equal(
|
|
star.fillPatternRotation(),
|
|
90,
|
|
'star fill rotation should be 90'
|
|
);
|
|
|
|
star.fillPatternRotation(180);
|
|
|
|
assert.equal(
|
|
star.fillPatternRotation(),
|
|
180,
|
|
'star fill rotation should be 180'
|
|
);
|
|
|
|
star.fillPatternScale({ x: 1, y: 1 });
|
|
|
|
assert.equal(
|
|
star.fillPatternScale().x,
|
|
1,
|
|
'star fill scale x should be 1'
|
|
);
|
|
assert.equal(
|
|
star.fillPatternScale().y,
|
|
1,
|
|
'star fill scale y should be 1'
|
|
);
|
|
|
|
star.fillPatternOffset({ x: 100, y: 120 });
|
|
|
|
assert.equal(
|
|
star.fillPatternOffset().x,
|
|
100,
|
|
'star fill offset x should be 100'
|
|
);
|
|
assert.equal(
|
|
star.fillPatternOffset().y,
|
|
120,
|
|
'star fill offset y should be 120'
|
|
);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
// ======================================================
|
|
it('test size setters and getters', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
var circle = new Konva.Circle({
|
|
x: stage.width() / 2,
|
|
y: stage.height() / 2,
|
|
radius: 50,
|
|
fill: 'red',
|
|
});
|
|
|
|
var ellipse = new Konva.Circle({
|
|
x: stage.width() / 2,
|
|
y: stage.height() / 2,
|
|
radius: 50,
|
|
fill: 'yellow',
|
|
});
|
|
|
|
layer.add(ellipse);
|
|
layer.add(circle);
|
|
stage.add(layer);
|
|
|
|
// circle tests
|
|
assert.equal(circle.width(), 100, 'circle width should be 100');
|
|
assert.equal(circle.height(), 100, 'circle height should be 100');
|
|
assert.equal(circle.getSize().width, 100, 'circle width should be 100');
|
|
assert.equal(circle.getSize().height, 100, 'circle height should be 100');
|
|
assert.equal(circle.radius(), 50, 'circle radius should be 50');
|
|
|
|
circle.setWidth(200);
|
|
|
|
assert.equal(circle.width(), 200, 'circle width should be 200');
|
|
assert.equal(circle.height(), 200, 'circle height should be 200');
|
|
assert.equal(circle.getSize().width, 200, 'circle width should be 200');
|
|
assert.equal(circle.getSize().height, 200, 'circle height should be 200');
|
|
assert.equal(circle.radius(), 100, 'circle radius should be 100');
|
|
});
|
|
|
|
// ======================================================
|
|
it('set image fill to color then image then linear gradient then back to image', function (done) {
|
|
loadImage('darth-vader.jpg', (imageObj) => {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var circle = new Konva.Circle({
|
|
x: 200,
|
|
y: 60,
|
|
radius: 50,
|
|
fill: 'blue',
|
|
});
|
|
|
|
layer.add(circle);
|
|
stage.add(layer);
|
|
|
|
assert.equal(circle.fill(), 'blue', 'circle fill should be blue');
|
|
|
|
circle.fill(null);
|
|
circle.fillPatternImage(imageObj);
|
|
circle.fillPatternRepeat('no-repeat');
|
|
circle.fillPatternOffset({ x: -200, y: -70 });
|
|
|
|
assert.notEqual(
|
|
circle.fillPatternImage(),
|
|
undefined,
|
|
'circle fill image should be defined'
|
|
);
|
|
assert.equal(
|
|
circle.fillPatternRepeat(),
|
|
'no-repeat',
|
|
'circle fill repeat should be no-repeat'
|
|
);
|
|
assert.equal(
|
|
circle.fillPatternOffset().x,
|
|
-200,
|
|
'circle fill offset x should be -200'
|
|
);
|
|
assert.equal(
|
|
circle.fillPatternOffset().y,
|
|
-70,
|
|
'circle fill offset y should be -70'
|
|
);
|
|
|
|
circle.fillPatternImage(null);
|
|
circle.fillLinearGradientStartPoint({ x: -35, y: -35 });
|
|
circle.fillLinearGradientEndPoint({ x: 35, y: 35 });
|
|
circle.fillLinearGradientColorStops([0, 'red', 1, 'blue']);
|
|
|
|
circle.fillLinearGradientStartPoint({ x: 0, y: 0 });
|
|
circle.fillPatternImage(imageObj);
|
|
circle.fillPatternRepeat('repeat');
|
|
circle.fillPatternOffset({ x: 0, y: 0 });
|
|
|
|
layer.draw();
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('stroke gradient', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer({
|
|
scaleY: 1.5,
|
|
});
|
|
|
|
var shape = new Konva.Rect({
|
|
x: 10,
|
|
y: 10,
|
|
width: 100,
|
|
height: 100,
|
|
fillLinearGradientColorStops: [0, 'yellow', 0.5, 'red', 1, 'white'],
|
|
fillLinearGradientStartPoint: {
|
|
x: 0,
|
|
y: 0,
|
|
},
|
|
scaleX: 3,
|
|
fillLinearGradientEndPoint: {
|
|
x: 100,
|
|
y: 100,
|
|
},
|
|
strokeLinearGradientColorStops: [0, 'red', 0.5, 'blue', 1, 'green'],
|
|
strokeLinearGradientStartPoint: {
|
|
x: 0,
|
|
y: 0,
|
|
},
|
|
strokeLinearGradientEndPoint: {
|
|
x: 100,
|
|
y: 100,
|
|
},
|
|
});
|
|
layer.add(shape);
|
|
stage.add(layer);
|
|
|
|
if (isNode) {
|
|
assert.equal(
|
|
layer.getContext().getTrace(true),
|
|
'clearRect();save();transform();beginPath();rect();closePath();fillStyle;fill();lineWidth;createLinearGradient();strokeStyle;stroke();restore();'
|
|
);
|
|
} else {
|
|
assert.equal(
|
|
layer.getContext().getTrace(),
|
|
'clearRect(0,0,578,200);save();transform(3,0,0,1.5,10,15);beginPath();rect(0,0,100,100);closePath();fillStyle=[object CanvasGradient];fill();lineWidth=2;createLinearGradient(0,0,100,100);strokeStyle=[object CanvasGradient];stroke();restore();'
|
|
);
|
|
}
|
|
});
|
|
|
|
// ======================================================
|
|
it('test enablers and disablers', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var circle = new Konva.Circle({
|
|
x: stage.width() / 2,
|
|
y: stage.height() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffset: { x: 10, y: 10 },
|
|
dash: [10, 10],
|
|
scaleX: 3,
|
|
});
|
|
layer.add(circle);
|
|
stage.add(layer);
|
|
|
|
assert.equal(circle.strokeScaleEnabled(), true);
|
|
assert.equal(circle.fillEnabled(), true, 'fillEnabled should be true');
|
|
assert.equal(circle.strokeEnabled(), true, 'strokeEnabled should be true');
|
|
assert.equal(circle.shadowEnabled(), true, 'shadowEnabled should be true');
|
|
assert.equal(circle.dashEnabled(), true, 'dashEnabled should be true');
|
|
|
|
circle.strokeScaleEnabled(false);
|
|
assert.equal(circle.strokeScaleEnabled(), false);
|
|
|
|
layer.draw();
|
|
// var trace = layer.getContext().getTrace();
|
|
|
|
circle.fillEnabled(false);
|
|
assert.equal(circle.fillEnabled(), false, 'fillEnabled should be false');
|
|
|
|
circle.strokeEnabled(false);
|
|
assert.equal(
|
|
circle.strokeEnabled(),
|
|
false,
|
|
'strokeEnabled should be false'
|
|
);
|
|
|
|
circle.shadowEnabled(false);
|
|
assert.equal(
|
|
circle.shadowEnabled(),
|
|
false,
|
|
'shadowEnabled should be false'
|
|
);
|
|
|
|
circle.dashEnabled(false);
|
|
assert.equal(circle.dashEnabled(), false, 'dashEnabled should be false');
|
|
|
|
// re-enable
|
|
|
|
circle.dashEnabled(true);
|
|
assert.equal(circle.dashEnabled(), true, 'dashEnabled should be true');
|
|
|
|
circle.shadowEnabled(true);
|
|
assert.equal(circle.shadowEnabled(), true, 'shadowEnabled should be true');
|
|
|
|
circle.strokeEnabled(true);
|
|
assert.equal(circle.strokeEnabled(), true, 'strokeEnabled should be true');
|
|
|
|
circle.fillEnabled(true);
|
|
assert.equal(circle.fillEnabled(), true, 'fillEnabled should be true');
|
|
});
|
|
|
|
// ======================================================
|
|
it('fill with shadow and opacity', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 100,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'green',
|
|
opacity: 0.5,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffset: { x: 10, y: 10 },
|
|
shadowOpacity: 0.5,
|
|
});
|
|
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
assert.equal(rect.x(), 100);
|
|
assert.equal(rect.y(), 50);
|
|
|
|
var canvas = createCanvas();
|
|
var context = canvas.getContext('2d');
|
|
context.globalAlpha = 0.5;
|
|
// rect
|
|
context.beginPath();
|
|
context.rect(100, 50, 100, 50);
|
|
context.closePath();
|
|
|
|
context.fillStyle = 'green';
|
|
context.shadowColor = 'rgba(0,0,0,0.5)';
|
|
context.shadowBlur = 10 * Konva.pixelRatio;
|
|
context.shadowOffsetX = 10 * Konva.pixelRatio;
|
|
context.shadowOffsetY = 10 * Konva.pixelRatio;
|
|
context.fill();
|
|
|
|
compareLayerAndCanvas(layer, canvas, 30);
|
|
|
|
var trace = layer.getContext().getTrace();
|
|
|
|
assert.equal(
|
|
trace,
|
|
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);globalAlpha=0.5;shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();restore();'
|
|
);
|
|
});
|
|
|
|
// ======================================================
|
|
it('draw fill after stroke', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 100,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'green',
|
|
stroke: 'red',
|
|
strokeWidth: 10,
|
|
fillAfterStrokeEnabled: true,
|
|
});
|
|
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
var trace = layer.getContext().getTrace();
|
|
|
|
assert.equal(
|
|
trace,
|
|
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();lineWidth=10;strokeStyle=red;stroke();fillStyle=green;fill();restore();'
|
|
);
|
|
});
|
|
|
|
// ======================================================
|
|
it('test strokeWidth = 0', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 100,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'green',
|
|
strokeWidth: 0,
|
|
stroke: 'black',
|
|
});
|
|
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
var canvas = createCanvas();
|
|
var context = canvas.getContext('2d');
|
|
context.beginPath();
|
|
context.rect(100, 50, 100, 50);
|
|
context.closePath();
|
|
|
|
context.fillStyle = 'green';
|
|
context.fill();
|
|
var trace = layer.getContext().getTrace();
|
|
|
|
compareLayerAndCanvas(layer, canvas, 30);
|
|
|
|
assert.equal(
|
|
trace,
|
|
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();restore();'
|
|
);
|
|
});
|
|
|
|
// ======================================================
|
|
it('stroke with shadow and opacity', function () {
|
|
Konva.pixelRatio = 1;
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 100,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
stroke: 'red',
|
|
strokeWidth: 20,
|
|
opacity: 0.5,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffset: { x: 10, y: 10 },
|
|
shadowOpacity: 0.5,
|
|
});
|
|
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
assert.equal(rect.x(), 100);
|
|
assert.equal(rect.y(), 50);
|
|
|
|
var canvas = createCanvas();
|
|
var context = canvas.getContext('2d');
|
|
context.globalAlpha = 0.5;
|
|
// rect
|
|
context.beginPath();
|
|
context.rect(100, 50, 100, 50);
|
|
context.closePath();
|
|
|
|
context.strokeStyle = 'red';
|
|
context.lineWidth = 20;
|
|
|
|
context.shadowColor = 'rgba(0,0,0,0.5)';
|
|
context.shadowBlur = 10 * Konva.pixelRatio;
|
|
context.shadowOffsetX = 10 * Konva.pixelRatio;
|
|
context.shadowOffsetY = 10 * Konva.pixelRatio;
|
|
context.stroke();
|
|
|
|
compareLayerAndCanvas(layer, canvas, 10);
|
|
|
|
var trace = layer.getContext().getTrace();
|
|
//console.log(trace);
|
|
assert.equal(
|
|
trace,
|
|
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);globalAlpha=0.5;shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();lineWidth=20;strokeStyle=red;stroke();restore();'
|
|
);
|
|
});
|
|
|
|
// ======================================================
|
|
it('fill and stroke with opacity', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 100,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 10,
|
|
opacity: 0.5,
|
|
});
|
|
|
|
layer.add(rect);
|
|
|
|
stage.add(layer);
|
|
|
|
var canvas = createCanvas();
|
|
var context = canvas.getContext('2d');
|
|
context.globalAlpha = 0.5;
|
|
// stroke
|
|
context.beginPath();
|
|
context.moveTo(100, 50);
|
|
context.lineTo(200, 50);
|
|
context.lineTo(200, 100);
|
|
context.lineTo(100, 100);
|
|
context.closePath();
|
|
context.lineWidth = 10;
|
|
context.strokeStyle = 'black';
|
|
context.stroke();
|
|
|
|
// rect
|
|
context.fillStyle = 'green';
|
|
context.fillRect(105, 55, 90, 40);
|
|
|
|
compareLayerAndCanvas(layer, canvas, 10);
|
|
});
|
|
|
|
// ======================================================
|
|
it('fill and stroke with shadow', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 100,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 10,
|
|
shadowColor: 'grey',
|
|
shadowBlur: 10,
|
|
shadowOffset: {
|
|
x: 20,
|
|
y: 20,
|
|
},
|
|
});
|
|
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
var canvas = createCanvas();
|
|
var context = canvas.getContext('2d');
|
|
context.beginPath();
|
|
context.rect(100, 50, 100, 50);
|
|
context.closePath();
|
|
context.fillStyle = 'green';
|
|
|
|
context.lineWidth = 10;
|
|
context.fill();
|
|
context.stroke();
|
|
|
|
var c2 = createCanvas();
|
|
var ctx2 = c2.getContext('2d');
|
|
ctx2.shadowColor = 'grey';
|
|
ctx2.shadowBlur = 10 * Konva.pixelRatio;
|
|
ctx2.shadowOffsetX = 20 * Konva.pixelRatio;
|
|
ctx2.shadowOffsetY = 20 * Konva.pixelRatio;
|
|
|
|
ctx2.drawImage(canvas, 0, 0, canvas.width / 2, canvas.height / 2);
|
|
|
|
// compareLayerAndCanvas(layer, c2, 50);
|
|
|
|
if (isBrowser) {
|
|
var trace = layer.getContext().getTrace();
|
|
assert.equal(
|
|
trace,
|
|
'clearRect(0,0,578,200);save();shadowColor=rgba(128,128,128,1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;drawImage([object HTMLCanvasElement],0,0,578,200);restore();'
|
|
);
|
|
} else {
|
|
var trace = layer.getContext().getTrace(true);
|
|
assert.equal(
|
|
trace,
|
|
'clearRect();save();shadowColor;shadowBlur;shadowOffsetX;shadowOffsetY;drawImage();restore();'
|
|
);
|
|
}
|
|
});
|
|
|
|
// ======================================================
|
|
// hard to emulate the same drawing
|
|
it('fill and stroke with shadow and opacity', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 100,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 10,
|
|
shadowColor: 'grey',
|
|
opacity: 0.5,
|
|
shadowBlur: 5,
|
|
shadowOffset: {
|
|
x: 20,
|
|
y: 20,
|
|
},
|
|
});
|
|
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
var canvas = createCanvas();
|
|
var context = canvas.getContext('2d');
|
|
context.globalAlpha = 0.3;
|
|
|
|
// draw shadow
|
|
context.save();
|
|
context.beginPath();
|
|
context.rect(95, 45, 110, 60);
|
|
context.closePath();
|
|
context.shadowColor = 'grey';
|
|
context.shadowBlur = 5 * Konva.pixelRatio;
|
|
context.shadowOffsetX = 20 * Konva.pixelRatio;
|
|
context.shadowOffsetY = 20 * Konva.pixelRatio;
|
|
context.fillStyle = 'black';
|
|
context.fill();
|
|
context.restore();
|
|
|
|
// draw "stroke"
|
|
context.save();
|
|
context.beginPath();
|
|
context.moveTo(100, 50);
|
|
context.lineTo(200, 50);
|
|
context.lineTo(200, 100);
|
|
context.lineTo(100, 100);
|
|
context.closePath();
|
|
context.lineWidth = 10;
|
|
context.strokeStyle = 'black';
|
|
context.stroke();
|
|
context.restore();
|
|
|
|
context.save();
|
|
context.beginPath();
|
|
context.fillStyle = 'green';
|
|
context.rect(105, 55, 90, 40);
|
|
context.closePath();
|
|
context.fill();
|
|
context.restore();
|
|
|
|
compareLayerAndCanvas(layer, canvas, 260);
|
|
|
|
if (isBrowser) {
|
|
var trace = layer.getContext().getTrace();
|
|
assert.equal(
|
|
trace,
|
|
'clearRect(0,0,578,200);save();shadowColor=rgba(128,128,128,1);shadowBlur=5;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0,578,200);restore();'
|
|
);
|
|
} else {
|
|
var trace = layer.getContext().getTrace(true);
|
|
assert.equal(
|
|
trace,
|
|
'clearRect();save();shadowColor;shadowBlur;shadowOffsetX;shadowOffsetY;globalAlpha;drawImage();restore();'
|
|
);
|
|
}
|
|
});
|
|
|
|
// ======================================================
|
|
it('text with fill and stroke with shadow', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var text = new Konva.Text({
|
|
x: 50,
|
|
y: 50,
|
|
text: 'Test TEXT',
|
|
fontSize: 50,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 2,
|
|
shadowColor: 'black',
|
|
shadowBlur: 2,
|
|
shadowOffset: {
|
|
x: 20,
|
|
y: 20,
|
|
},
|
|
});
|
|
|
|
layer.add(text);
|
|
stage.add(layer);
|
|
|
|
var canvas = createCanvas();
|
|
var context = canvas.getContext('2d');
|
|
|
|
context.save();
|
|
context.shadowColor = 'black';
|
|
context.shadowBlur = 2 * Konva.pixelRatio;
|
|
context.shadowOffsetX = 20 * Konva.pixelRatio;
|
|
context.shadowOffsetY = 20 * Konva.pixelRatio;
|
|
context.font = 'normal 50px Arial';
|
|
context.textBaseline = 'middle';
|
|
|
|
context.fillStyle = 'green';
|
|
context.fillText('Test TEXT', 50, 75);
|
|
|
|
context.lineWidth = 2;
|
|
context.strokeStyle = 'black';
|
|
context.strokeText('Test TEXT', 50, 75);
|
|
|
|
context.stroke();
|
|
context.fill();
|
|
context.restore();
|
|
|
|
// draw text again to remove shadow under stroke
|
|
context.font = 'normal 50px Arial';
|
|
context.textBaseline = 'middle';
|
|
context.fillText('Test TEXT', 50, 75);
|
|
context.fillStyle = 'green';
|
|
context.fillText('Test TEXT', 50, 75);
|
|
|
|
context.lineWidth = 2;
|
|
context.strokeStyle = 'black';
|
|
context.strokeText('Test TEXT', 50, 75);
|
|
|
|
compareLayerAndCanvas(layer, canvas, 254, 10);
|
|
});
|
|
|
|
// ======================================================
|
|
it('shape intersect with shadow', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
fill: '#ff0000',
|
|
x: 50,
|
|
y: 50,
|
|
width: 200,
|
|
height: 200,
|
|
draggable: true,
|
|
shadowColor: '#000', // if all shadow properties removed, works fine
|
|
});
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
//error here
|
|
assert.equal(rect.intersects({ x: 52, y: 52 }), true);
|
|
assert.equal(rect.intersects({ x: 45, y: 45 }), false);
|
|
});
|
|
|
|
// ======================================================
|
|
it('shape intersect while dragging', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
fill: '#ff0000',
|
|
x: 50,
|
|
y: 50,
|
|
width: 200,
|
|
height: 200,
|
|
draggable: true,
|
|
shadowColor: '#000', // if all shadow properties removed, works fine
|
|
});
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
simulateMouseDown(stage, { x: 55, y: 55 });
|
|
simulateMouseMove(stage, { x: 65, y: 65 });
|
|
|
|
//error here
|
|
assert.equal(rect.intersects({ x: 65, y: 65 }), true);
|
|
simulateMouseUp(stage, { x: 65, y: 65 });
|
|
});
|
|
|
|
// ======================================================
|
|
it('overloaded getters and setters', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 100,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'green',
|
|
stroke: 'red',
|
|
strokeWidth: 20,
|
|
draggable: true,
|
|
});
|
|
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
rect.stroke('blue');
|
|
assert.equal(rect.stroke(), 'blue');
|
|
|
|
rect.lineJoin('bevel');
|
|
assert.equal(rect.lineJoin(), 'bevel');
|
|
|
|
rect.lineCap('square');
|
|
assert.equal(rect.lineCap(), 'square');
|
|
|
|
rect.strokeWidth(8);
|
|
assert.equal(rect.strokeWidth(), 8);
|
|
|
|
const f = () => {};
|
|
rect.sceneFunc(f);
|
|
assert.equal(rect.sceneFunc(), f);
|
|
|
|
rect.hitFunc(f);
|
|
assert.equal(rect.hitFunc(), f);
|
|
|
|
rect.dash([1]);
|
|
assert.equal(rect.dash()[0], 1);
|
|
|
|
// NOTE: skipping the rest because it would take hours to test all possible methods.
|
|
// This should hopefully be enough to test Factor overloaded methods
|
|
});
|
|
|
|
// ======================================================
|
|
it('create image hit region', function (done) {
|
|
loadImage('lion.png', (imageObj) => {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var lion = new Konva.Image({
|
|
x: 0,
|
|
y: 0,
|
|
image: imageObj,
|
|
draggable: true,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 20,
|
|
shadowOpacity: 0.2,
|
|
});
|
|
|
|
// override color key with black
|
|
// lion.colorKey = '#000000';
|
|
// Konva.shapes['#000000'] = lion;
|
|
|
|
layer.add(lion);
|
|
|
|
stage.add(layer);
|
|
|
|
assert.equal(layer.getIntersection({ x: 10, y: 10 }), lion);
|
|
|
|
lion.cache();
|
|
|
|
lion.drawHitFromCache();
|
|
|
|
layer.draw();
|
|
|
|
assert.equal(layer.getIntersection({ x: 10, y: 10 }), null);
|
|
assert.equal(layer.getIntersection({ x: 50, y: 50 }), lion);
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('test defaults', function () {
|
|
var shape = new Konva.Shape();
|
|
|
|
assert.equal(shape.strokeWidth(), 2);
|
|
assert.equal(shape.shadowOffsetX(), 0);
|
|
assert.equal(shape.shadowOffsetY(), 0);
|
|
assert.equal(shape.fillPatternX(), 0);
|
|
assert.equal(shape.fillPatternY(), 0);
|
|
assert.equal(shape.fillRadialGradientStartRadius(), 0);
|
|
assert.equal(shape.fillRadialGradientEndRadius(), 0);
|
|
assert.equal(shape.fillPatternRepeat(), 'repeat');
|
|
assert.equal(shape.fillEnabled(), true);
|
|
assert.equal(shape.strokeEnabled(), true);
|
|
assert.equal(shape.shadowEnabled(), true);
|
|
assert.equal(shape.dashEnabled(), true);
|
|
assert.equal(shape.dashOffset(), 0);
|
|
assert.equal(shape.strokeScaleEnabled(), true);
|
|
assert.equal(shape.fillPriority(), 'color');
|
|
assert.equal(shape.fillPatternOffsetX(), 0);
|
|
assert.equal(shape.fillPatternOffsetY(), 0);
|
|
assert.equal(shape.fillPatternScaleX(), 1);
|
|
assert.equal(shape.fillPatternScaleY(), 1);
|
|
assert.equal(shape.fillLinearGradientStartPointX(), 0);
|
|
assert.equal(shape.fillLinearGradientStartPointY(), 0);
|
|
assert.equal(shape.fillLinearGradientEndPointX(), 0);
|
|
assert.equal(shape.fillLinearGradientEndPointY(), 0);
|
|
assert.equal(shape.fillRadialGradientStartPointX(), 0);
|
|
assert.equal(shape.fillRadialGradientStartPointY(), 0);
|
|
assert.equal(shape.fillRadialGradientEndPointX(), 0);
|
|
assert.equal(shape.fillRadialGradientEndPointY(), 0);
|
|
assert.equal(shape.fillPatternRotation(), 0);
|
|
});
|
|
|
|
// ======================================================
|
|
it('hit graph when shape cached before adding to Layer', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var rect = new Konva.Rect({
|
|
x: 290,
|
|
y: 111,
|
|
width: 50,
|
|
height: 50,
|
|
fill: 'black',
|
|
});
|
|
rect.cache();
|
|
|
|
var click = false;
|
|
|
|
rect.on('click', function () {
|
|
click = true;
|
|
});
|
|
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
simulateMouseDown(stage, {
|
|
x: 300,
|
|
y: 120,
|
|
});
|
|
|
|
simulateMouseUp(stage, {
|
|
x: 300,
|
|
y: 120,
|
|
});
|
|
|
|
assert.equal(
|
|
click,
|
|
true,
|
|
'click event should have been fired when mousing down and then up on rect'
|
|
);
|
|
});
|
|
|
|
it('class inherence', function () {
|
|
var rect = new Konva.Rect();
|
|
assert.equal(rect instanceof Konva.Rect, true);
|
|
assert.equal(rect instanceof Konva.Shape, true);
|
|
assert.equal(rect instanceof Konva.Node, true);
|
|
});
|
|
|
|
it('disable stroke for hit', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 100,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
stroke: 'red',
|
|
strokeWidth: 20,
|
|
draggable: true,
|
|
});
|
|
// default value
|
|
assert.equal(rect.hitStrokeWidth(), 'auto');
|
|
|
|
rect.hitStrokeWidth(0);
|
|
assert.equal(rect.hitStrokeWidth(), 0);
|
|
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
assert.equal(rect.y(), 50);
|
|
|
|
var trace = layer.getHitCanvas().getContext().getTrace(true);
|
|
assert.equal(
|
|
trace,
|
|
'clearRect();save();transform();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();'
|
|
);
|
|
});
|
|
|
|
it('hitStrokeWidth', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 10,
|
|
y: 10,
|
|
width: 100,
|
|
height: 100,
|
|
stroke: 'red',
|
|
strokeWidth: 2,
|
|
});
|
|
// default value
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
// default value is auto
|
|
assert.equal(rect.hitStrokeWidth(), 'auto');
|
|
|
|
// try to hit test near edge
|
|
assert.equal(stage.getIntersection({ x: 5, y: 5 }), null);
|
|
|
|
rect.hitStrokeWidth(20);
|
|
layer.draw();
|
|
// no we should hit the rect
|
|
assert.equal(stage.getIntersection({ x: 5, y: 5 }), rect);
|
|
|
|
rect.strokeHitEnabled(false);
|
|
|
|
assert.equal(rect.hitStrokeWidth(), 0);
|
|
|
|
rect.strokeHitEnabled(true);
|
|
|
|
assert.equal(rect.hitStrokeWidth(), 'auto');
|
|
|
|
rect.hitStrokeWidth(0);
|
|
|
|
assert.equal(rect.strokeHitEnabled(), false);
|
|
|
|
// var trace = layer
|
|
// .getHitCanvas()
|
|
// .getContext()
|
|
// .getTrace(true);
|
|
// assert.equal(
|
|
// trace,
|
|
// 'clearRect();save();transform();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();'
|
|
// );
|
|
});
|
|
|
|
it('enable hitStrokeWidth even if we have no stroke on scene', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 10,
|
|
y: 10,
|
|
width: 100,
|
|
height: 100,
|
|
});
|
|
// default value
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
// try to hit test near edge
|
|
assert.equal(stage.getIntersection({ x: 5, y: 5 }), null);
|
|
|
|
rect.hitStrokeWidth(20);
|
|
layer.draw();
|
|
// no we should hit the rect
|
|
assert.equal(stage.getIntersection({ x: 5, y: 5 }), rect);
|
|
});
|
|
|
|
it('cache shadow color rgba', function () {
|
|
var circle = new Konva.Circle({
|
|
fill: 'green',
|
|
radius: 50,
|
|
});
|
|
// no shadow on start
|
|
assert.equal(circle.hasShadow(), false);
|
|
assert.equal(circle.getShadowRGBA(), undefined);
|
|
|
|
// set shadow
|
|
circle.shadowColor('black');
|
|
assert.equal(circle.hasShadow(), true);
|
|
assert.equal(circle.getShadowRGBA(), 'rgba(0,0,0,1)');
|
|
|
|
// set another shadow property
|
|
circle.shadowOpacity(0.2);
|
|
assert.equal(circle.getShadowRGBA(), 'rgba(0,0,0,0.2)');
|
|
|
|
circle.shadowColor('rgba(10,10,10,0.5)');
|
|
assert.equal(circle.getShadowRGBA(), 'rgba(10,10,10,0.1)');
|
|
|
|
// reset shadow
|
|
circle.shadowColor(null);
|
|
assert.equal(circle.getShadowRGBA(), undefined);
|
|
|
|
// illegal color
|
|
circle.shadowColor('#0000f');
|
|
assert.equal(circle.hasShadow(), true);
|
|
assert.equal(circle.getShadowRGBA(), undefined);
|
|
});
|
|
|
|
it('scale should also effect shadow offset', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 100,
|
|
y: 100,
|
|
width: 100,
|
|
height: 100,
|
|
scaleX: 0.5,
|
|
scaleY: 0.5,
|
|
fill: 'green',
|
|
shadowColor: 'black',
|
|
shadowBlur: 0,
|
|
shadowOffset: { x: 10, y: 10 },
|
|
});
|
|
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
var canvas = createCanvas();
|
|
var context = canvas.getContext('2d');
|
|
// rect
|
|
context.beginPath();
|
|
context.rect(100, 100, 50, 50);
|
|
context.closePath();
|
|
|
|
context.fillStyle = 'green';
|
|
context.shadowColor = 'rgba(0,0,0,1)';
|
|
context.shadowBlur = 0;
|
|
context.shadowOffsetX = 5 * Konva.pixelRatio;
|
|
context.shadowOffsetY = 5 * Konva.pixelRatio;
|
|
context.fill();
|
|
|
|
compareLayerAndCanvas(layer, canvas, 10);
|
|
|
|
var trace = layer.getContext().getTrace();
|
|
|
|
assert.equal(
|
|
trace,
|
|
'clearRect(0,0,578,200);save();transform(0.5,0,0,0.5,100,100);shadowColor=rgba(0,0,0,1);shadowBlur=0;shadowOffsetX=5;shadowOffsetY=5;beginPath();rect(0,0,100,100);closePath();fillStyle=green;fill();restore();'
|
|
);
|
|
});
|
|
|
|
// TODO: restore it!
|
|
it.skip('scale should also effect shadow offset - negative scale', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 100,
|
|
y: 100,
|
|
width: 100,
|
|
height: 100,
|
|
scaleX: -0.5,
|
|
scaleY: 0.5,
|
|
fill: 'green',
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffset: { x: 10, y: 10 },
|
|
});
|
|
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
var canvas = createCanvas();
|
|
var context = canvas.getContext('2d');
|
|
// rect
|
|
context.beginPath();
|
|
context.rect(50, 100, 50, 50);
|
|
context.closePath();
|
|
|
|
context.fillStyle = 'green';
|
|
context.shadowColor = 'rgba(0,0,0,1)';
|
|
context.shadowBlur = 10;
|
|
context.shadowOffsetX = -5 * Konva.pixelRatio;
|
|
context.shadowOffsetY = 5 * Konva.pixelRatio;
|
|
context.fill();
|
|
|
|
compareLayerAndCanvas(layer, canvas, 150);
|
|
|
|
// var trace = layer.getContext().getTrace();
|
|
|
|
// assert.equal(
|
|
// trace,
|
|
// 'clearRect(0,0,578,200);save();transform(-0.5,0,0,0.5,100,100);save();shadowColor=rgba(0,0,0,1);shadowBlur=10;shadowOffsetX=-5;shadowOffsetY=5;beginPath();rect(0,0,100,100);closePath();fillStyle=green;fill();restore();restore();'
|
|
// );
|
|
});
|
|
|
|
it('scale of parent container should also effect shadow offset', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
var group = new Konva.Group({
|
|
x: 100,
|
|
y: 100,
|
|
scaleX: 0.5,
|
|
scaleY: 0.5,
|
|
});
|
|
var rect = new Konva.Rect({
|
|
width: 200,
|
|
height: 200,
|
|
scaleX: 0.5,
|
|
scaleY: 0.5,
|
|
fill: 'green',
|
|
shadowColor: 'black',
|
|
shadowBlur: 0,
|
|
shadowOffset: { x: 20, y: 20 },
|
|
});
|
|
|
|
group.add(rect);
|
|
layer.add(group);
|
|
stage.add(layer);
|
|
|
|
var canvas = createCanvas();
|
|
var context = canvas.getContext('2d');
|
|
// rect
|
|
context.beginPath();
|
|
context.rect(100, 100, 50, 50);
|
|
context.closePath();
|
|
|
|
context.fillStyle = 'green';
|
|
context.shadowColor = 'rgba(0,0,0,1)';
|
|
context.shadowBlur = 0;
|
|
context.shadowOffsetX = 5 * Konva.pixelRatio;
|
|
context.shadowOffsetY = 5 * Konva.pixelRatio;
|
|
context.fill();
|
|
|
|
compareLayerAndCanvas(layer, canvas, 10);
|
|
|
|
var trace = layer.getContext().getTrace();
|
|
|
|
assert.equal(
|
|
trace,
|
|
'clearRect(0,0,578,200);save();transform(0.25,0,0,0.25,100,100);shadowColor=rgba(0,0,0,1);shadowBlur=0;shadowOffsetX=5;shadowOffsetY=5;beginPath();rect(0,0,200,200);closePath();fillStyle=green;fill();restore();'
|
|
);
|
|
});
|
|
|
|
it('optional disable buffer canvas', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 100,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 10,
|
|
opacity: 0.5,
|
|
perfectDrawEnabled: false,
|
|
});
|
|
|
|
layer.add(rect);
|
|
|
|
stage.add(layer);
|
|
|
|
var canvas = createCanvas();
|
|
var context = canvas.getContext('2d');
|
|
context.globalAlpha = 0.5;
|
|
// stroke
|
|
context.beginPath();
|
|
context.rect(100, 50, 100, 50);
|
|
context.closePath();
|
|
context.lineWidth = 10;
|
|
context.strokeStyle = 'black';
|
|
context.fillStyle = 'green';
|
|
context.fill();
|
|
context.stroke();
|
|
|
|
compareLayerAndCanvas(layer, canvas, 10);
|
|
|
|
var trace = layer.getContext().getTrace();
|
|
|
|
assert.equal(
|
|
trace,
|
|
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);globalAlpha=0.5;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;strokeStyle=black;stroke();restore();'
|
|
);
|
|
});
|
|
|
|
it('check lineJoin in buffer canvas', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 100,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 10,
|
|
opacity: 0.5,
|
|
lineJoin: 'round',
|
|
});
|
|
|
|
layer.add(rect);
|
|
|
|
stage.add(layer);
|
|
|
|
var canvas = createCanvas();
|
|
var context = canvas.getContext('2d');
|
|
|
|
// stroke
|
|
context.beginPath();
|
|
context.rect(100, 50, 100, 50);
|
|
context.closePath();
|
|
context.lineWidth = 10;
|
|
context.strokeStyle = 'black';
|
|
context.fillStyle = 'green';
|
|
context.lineJoin = 'round';
|
|
context.fill();
|
|
context.stroke();
|
|
|
|
var canvas2 = createCanvas();
|
|
var context2 = canvas2.getContext('2d');
|
|
context2.globalAlpha = 0.5;
|
|
context2.drawImage(canvas, 0, 0, canvas.width / 2, canvas.height / 2);
|
|
|
|
compareLayerAndCanvas(layer, canvas2, 150);
|
|
|
|
if (isBrowser) {
|
|
var trace = layer.getContext().getTrace();
|
|
|
|
assert.equal(
|
|
trace,
|
|
'clearRect(0,0,578,200);save();globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0,578,200);restore();'
|
|
);
|
|
} else {
|
|
var trace = layer.getContext().getTrace(true);
|
|
|
|
assert.equal(
|
|
trace,
|
|
'clearRect();save();globalAlpha;drawImage();restore();'
|
|
);
|
|
}
|
|
});
|
|
|
|
it('export when buffer canvas is used should handle scaling correctly', async function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
stage.add(layer);
|
|
|
|
var group = new Konva.Group();
|
|
layer.add(group);
|
|
|
|
var text = new Konva.Text({
|
|
text: 'hello',
|
|
fontSize: 300,
|
|
fill: 'green',
|
|
shadowColor: 'black',
|
|
});
|
|
group.add(text);
|
|
|
|
const canvas1 = group.toCanvas({
|
|
x: group.x(),
|
|
y: group.y(),
|
|
width: text.width(),
|
|
height: text.height(),
|
|
});
|
|
text.stroke('transparent');
|
|
const canvas2 = group.toCanvas({
|
|
x: group.x(),
|
|
y: group.y(),
|
|
width: text.width(),
|
|
height: text.height(),
|
|
});
|
|
|
|
compareCanvases(canvas2, canvas1, 255, 10);
|
|
});
|
|
|
|
it('export when buffer canvas is used should handle scaling correctly another time', async function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
stage.add(layer);
|
|
|
|
var group = new Konva.Group({
|
|
x: 400,
|
|
});
|
|
layer.add(group);
|
|
|
|
var text = new Konva.Text({
|
|
text: 'hello',
|
|
fontSize: 300,
|
|
fill: 'green',
|
|
shadowColor: 'black',
|
|
});
|
|
group.add(text);
|
|
|
|
const canvas1 = group.toCanvas({
|
|
x: group.x(),
|
|
y: group.y(),
|
|
width: text.width(),
|
|
height: text.height(),
|
|
});
|
|
text.stroke('transparent');
|
|
const canvas2 = group.toCanvas({
|
|
x: group.x(),
|
|
y: group.y(),
|
|
width: text.width(),
|
|
height: text.height(),
|
|
});
|
|
|
|
compareCanvases(canvas2, canvas1, 240, 110);
|
|
});
|
|
|
|
// ======================================================
|
|
it('optional disable shadow for stroke', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var rect = new Konva.Rect({
|
|
x: 100,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 10,
|
|
shadowColor: 'grey',
|
|
shadowBlur: 10,
|
|
shadowOffset: {
|
|
x: 20,
|
|
y: 20,
|
|
},
|
|
shadowForStrokeEnabled: false,
|
|
});
|
|
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
var canvas = createCanvas();
|
|
var context = canvas.getContext('2d');
|
|
context.beginPath();
|
|
context.rect(100, 50, 100, 50);
|
|
context.closePath();
|
|
context.fillStyle = 'green';
|
|
context.shadowColor = 'grey';
|
|
context.shadowBlur = 10 * Konva.pixelRatio;
|
|
context.shadowOffsetX = 20 * Konva.pixelRatio;
|
|
context.shadowOffsetY = 20 * Konva.pixelRatio;
|
|
context.lineWidth = 10;
|
|
context.fill();
|
|
|
|
context.shadowColor = 'rgba(0,0,0,0)';
|
|
context.stroke();
|
|
|
|
compareLayerAndCanvas(layer, canvas, 10);
|
|
|
|
var trace = layer.getContext().getTrace();
|
|
assert.equal(
|
|
trace,
|
|
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);shadowColor=rgba(128,128,128,1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;shadowColor=rgba(0,0,0,0);strokeStyle=black;stroke();restore();'
|
|
);
|
|
});
|
|
|
|
it('clone custom shape', function () {
|
|
var className = 'myCustomName';
|
|
class CustomShape extends Konva.Shape {
|
|
foo() {}
|
|
}
|
|
CustomShape.prototype.className = className;
|
|
// var CustomShape = function () {
|
|
// CustomShape.super.apply(this, arguments);
|
|
// this.className = className;
|
|
// };
|
|
|
|
// CustomShape.prototype.foo = function () {};
|
|
|
|
// Konva.Util.extend(CustomShape, Konva.Shape);
|
|
|
|
var myShape = new CustomShape({
|
|
fill: 'grey',
|
|
});
|
|
|
|
var clone = myShape.clone();
|
|
assert.equal(clone instanceof CustomShape, true);
|
|
assert.equal(clone instanceof Konva.Shape, true);
|
|
assert.equal(clone.className, className);
|
|
assert.equal(clone.fill(), 'grey');
|
|
assert.equal(clone.foo, CustomShape.prototype.foo);
|
|
});
|
|
|
|
it('getClientRect should skip disabled attributes', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var shape = new Konva.Rect({
|
|
x: 200,
|
|
y: 100,
|
|
width: 100,
|
|
height: 100,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
strokeEnabled: false,
|
|
shadowOffsetX: 10,
|
|
shadowEnabled: false,
|
|
});
|
|
|
|
layer.add(shape);
|
|
stage.add(layer);
|
|
|
|
var rect = shape.getClientRect();
|
|
|
|
assert.equal(rect.width, 100, 'should not effect width');
|
|
assert.equal(rect.height, 100, 'should not effect width');
|
|
});
|
|
|
|
it('getClientRect should not use cached values', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
var shape = new Konva.Rect({
|
|
x: 100,
|
|
y: 100,
|
|
width: 100,
|
|
height: 100,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
strokeEnabled: false,
|
|
shadowOffsetX: 10,
|
|
shadowEnabled: false,
|
|
});
|
|
|
|
layer.add(shape);
|
|
stage.add(layer);
|
|
|
|
layer.cache();
|
|
|
|
layer.scaleX(2);
|
|
|
|
const rect = shape.getClientRect();
|
|
|
|
assert.equal(rect.x, 200);
|
|
});
|
|
|
|
it('getClientRect for shape in transformed parent', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
stage.add(layer);
|
|
|
|
var group = new Konva.Group({
|
|
x: 110,
|
|
y: 0,
|
|
rotation: 90,
|
|
});
|
|
layer.add(group);
|
|
|
|
var shape = new Konva.Rect({
|
|
x: 0,
|
|
y: 0,
|
|
width: 100,
|
|
height: 100,
|
|
fill: 'green',
|
|
});
|
|
group.add(shape);
|
|
|
|
var relativeRect = shape.getClientRect({ relativeTo: group });
|
|
|
|
assert.equal(relativeRect.x, 0);
|
|
assert.equal(relativeRect.y, 0);
|
|
assert.equal(relativeRect.width, 100);
|
|
assert.equal(relativeRect.height, 100);
|
|
|
|
var absRect = shape.getClientRect();
|
|
|
|
assert.equal(absRect.x, 10);
|
|
assert.equal(absRect.y, 0);
|
|
assert.equal(absRect.width, 100);
|
|
assert.equal(absRect.height, 100);
|
|
});
|
|
|
|
it('getClientRect with skew', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
stage.add(layer);
|
|
|
|
var shape = new Konva.Rect({
|
|
x: 0,
|
|
y: 0,
|
|
width: 200,
|
|
height: 100,
|
|
skewX: 0.5,
|
|
scaleX: 2,
|
|
fill: 'green',
|
|
});
|
|
layer.add(shape);
|
|
|
|
var back = new Konva.Rect({
|
|
stroke: 'red',
|
|
});
|
|
back.setAttrs(shape.getClientRect());
|
|
layer.add(back);
|
|
layer.draw();
|
|
|
|
var absRect = shape.getClientRect();
|
|
|
|
assert.equal(absRect.x, 0);
|
|
assert.equal(absRect.y, 0);
|
|
assert.equal(absRect.width, 450);
|
|
assert.equal(absRect.height, 100);
|
|
});
|
|
|
|
it('decompose transform', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
stage.add(layer);
|
|
|
|
var shape = new Konva.Rect({
|
|
x: 0,
|
|
y: 0,
|
|
width: 200,
|
|
height: 100,
|
|
skewX: 0.5,
|
|
scaleX: 2,
|
|
scaleY: 2,
|
|
fill: 'green',
|
|
});
|
|
layer.add(shape);
|
|
layer.draw();
|
|
|
|
assert.equal(shape.getTransform().decompose().scaleX, 2);
|
|
assert.equal(shape.getTransform().decompose().scaleY, 2);
|
|
assert.equal(shape.getTransform().decompose().skewX, 0.5);
|
|
|
|
shape.skewX(2);
|
|
shape.scaleX(0.5);
|
|
|
|
assert.equal(shape.getTransform().decompose().skewX, 2);
|
|
assert.equal(shape.getTransform().decompose().scaleX, 0.5);
|
|
assert.equal(shape.getTransform().decompose().scaleY, 2);
|
|
});
|
|
|
|
it('shadow should respect pixel ratio', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
layer.getCanvas().setPixelRatio(2);
|
|
var shape = new Konva.Rect({
|
|
width: 100,
|
|
height: 100,
|
|
fill: 'black',
|
|
shadowColor: 'green',
|
|
shadowOffsetX: 20,
|
|
shadowOffsetY: 20,
|
|
shadowBlur: 0,
|
|
});
|
|
|
|
layer.add(shape);
|
|
stage.add(layer);
|
|
var data = layer.getContext().getImageData(15 * 2, (100 + 5) * 2, 1, 1);
|
|
assert.equal(data.data[3], 0, 'pixel should be empty, no shadow here');
|
|
});
|
|
|
|
it('text shadow blur should take scale into account', function () {
|
|
var stage = addStage();
|
|
var layer1 = new Konva.Layer();
|
|
stage.add(layer1);
|
|
|
|
var rect1 = new Konva.Rect({
|
|
x: 10,
|
|
y: 10,
|
|
scaleX: 0.5,
|
|
scaleY: 0.5,
|
|
width: 80,
|
|
height: 80,
|
|
fill: 'black',
|
|
shadowColor: 'black',
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 50,
|
|
shadowBlur: 10,
|
|
});
|
|
layer1.add(rect1);
|
|
stage.add(layer1);
|
|
|
|
var layer2 = new Konva.Layer();
|
|
stage.add(layer2);
|
|
|
|
var rect2 = new Konva.Rect({
|
|
x: 10,
|
|
y: 10,
|
|
fill: 'black',
|
|
width: 40,
|
|
height: 40,
|
|
shadowColor: 'black',
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 25,
|
|
shadowBlur: 5,
|
|
});
|
|
layer2.add(rect2);
|
|
stage.add(layer2);
|
|
|
|
compareLayers(layer1, layer2, 30);
|
|
});
|
|
|
|
// ======================================================
|
|
it('sceneFunc and hitFunc should have shape as second argument', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var shape = new Konva.Shape({
|
|
sceneFunc: function (context, shape) {
|
|
assert.equal(this, shape);
|
|
context.beginPath();
|
|
context.moveTo(0, 0);
|
|
context.lineTo(100, 0);
|
|
context.lineTo(100, 100);
|
|
context.closePath();
|
|
context.fillStrokeShape(shape);
|
|
},
|
|
x: 200,
|
|
y: 100,
|
|
fill: 'green',
|
|
stroke: 'blue',
|
|
strokeWidth: 5,
|
|
});
|
|
layer.add(shape);
|
|
|
|
var rect = new Konva.Rect({
|
|
hitFunc: function (ctx, shape) {
|
|
assert.equal(this, shape);
|
|
},
|
|
});
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
});
|
|
|
|
// ======================================================
|
|
it('cache fill pattern', function (done) {
|
|
loadImage('darth-vader.jpg', (imageObj) => {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
var star = new Konva.Star({
|
|
x: 200,
|
|
y: 100,
|
|
numPoints: 5,
|
|
innerRadius: 40,
|
|
outerRadius: 70,
|
|
|
|
fillPatternImage: imageObj,
|
|
fillPatternX: -20,
|
|
fillPatternY: -30,
|
|
fillPatternScale: { x: 0.5, y: 0.5 },
|
|
fillPatternOffset: { x: 219, y: 150 },
|
|
fillPatternRotation: 90,
|
|
fillPatternRepeat: 'no-repeat',
|
|
|
|
stroke: 'blue',
|
|
strokeWidth: 5,
|
|
draggable: true,
|
|
});
|
|
|
|
layer.add(star);
|
|
stage.add(layer);
|
|
|
|
var ctx = layer.getContext();
|
|
var oldCreate = ctx.createPattern;
|
|
|
|
var callCount = 0;
|
|
ctx.createPattern = function () {
|
|
callCount += 1;
|
|
return oldCreate.apply(this, arguments);
|
|
};
|
|
|
|
layer.draw();
|
|
layer.draw();
|
|
assert.equal(callCount, 0);
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('recache fill pattern on changes', function (done) {
|
|
loadImage('darth-vader.jpg', (imageObj) => {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
var star = new Konva.Star({
|
|
x: 200,
|
|
y: 100,
|
|
numPoints: 5,
|
|
innerRadius: 40,
|
|
outerRadius: 70,
|
|
|
|
fillPatternImage: imageObj,
|
|
fillPatternX: -20,
|
|
fillPatternY: -30,
|
|
fillPatternScale: { x: 0.5, y: 0.5 },
|
|
fillPatternOffset: { x: 219, y: 150 },
|
|
fillPatternRotation: 90,
|
|
fillPatternRepeat: 'no-repeat',
|
|
|
|
stroke: 'blue',
|
|
strokeWidth: 5,
|
|
draggable: true,
|
|
});
|
|
|
|
layer.add(star);
|
|
stage.add(layer);
|
|
|
|
var pattern1 = star._getFillPattern();
|
|
|
|
star.fillPatternImage(Konva.Util.createCanvasElement());
|
|
|
|
var pattern2 = star._getFillPattern();
|
|
|
|
assert.notEqual(pattern1, pattern2);
|
|
|
|
star.fillPatternRepeat('repeat');
|
|
|
|
var pattern3 = star._getFillPattern();
|
|
|
|
assert.notEqual(pattern2, pattern3);
|
|
|
|
star.fillPatternX(10);
|
|
|
|
var pattern4 = star._getFillPattern();
|
|
|
|
assert.notEqual(pattern4, pattern3);
|
|
|
|
star.fillPatternOffsetX(10);
|
|
|
|
var pattern5 = star._getFillPattern();
|
|
|
|
assert.notEqual(pattern4, pattern5);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
// ======================================================
|
|
it('cache linear gradient', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
var star = new Konva.Star({
|
|
x: 200,
|
|
y: 100,
|
|
numPoints: 5,
|
|
innerRadius: 40,
|
|
outerRadius: 70,
|
|
|
|
fillLinearGradientStartPoint: { x: -50, y: -50 },
|
|
fillLinearGradientEndPoint: { x: 50, y: 50 },
|
|
fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
|
|
|
|
stroke: 'blue',
|
|
strokeWidth: 5,
|
|
draggable: true,
|
|
});
|
|
|
|
layer.add(star);
|
|
stage.add(layer);
|
|
|
|
var ctx = layer.getContext();
|
|
var oldCreate = ctx.createLinearGradient;
|
|
|
|
var callCount = 0;
|
|
ctx.createLinearGradient = function () {
|
|
callCount += 1;
|
|
return oldCreate.apply(this, arguments);
|
|
};
|
|
|
|
layer.draw();
|
|
layer.draw();
|
|
assert.equal(callCount, 0);
|
|
});
|
|
|
|
it('recache linear gradient on changes', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
var star = new Konva.Star({
|
|
x: 200,
|
|
y: 100,
|
|
numPoints: 5,
|
|
innerRadius: 40,
|
|
outerRadius: 70,
|
|
|
|
fillLinearGradientStartPoint: { x: -50, y: -50 },
|
|
fillLinearGradientEndPoint: { x: 50, y: 50 },
|
|
fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
|
|
|
|
stroke: 'blue',
|
|
strokeWidth: 5,
|
|
draggable: true,
|
|
});
|
|
|
|
layer.add(star);
|
|
stage.add(layer);
|
|
|
|
var gradient1 = star._getLinearGradient();
|
|
|
|
star.fillLinearGradientStartPointX(-10);
|
|
|
|
var gradient2 = star._getLinearGradient();
|
|
|
|
assert.notEqual(gradient1, gradient2);
|
|
|
|
star.fillLinearGradientStartPointY(-10);
|
|
|
|
var gradient3 = star._getLinearGradient();
|
|
|
|
assert.notEqual(gradient2, gradient3);
|
|
|
|
star.fillLinearGradientEndPointX(100);
|
|
|
|
var gradient4 = star._getLinearGradient();
|
|
|
|
assert.notEqual(gradient3, gradient4);
|
|
|
|
star.fillLinearGradientEndPointY(100);
|
|
|
|
var gradient5 = star._getLinearGradient();
|
|
|
|
assert.notEqual(gradient4, gradient5);
|
|
|
|
star.fillLinearGradientColorStops([0, 'red', 1, 'green']);
|
|
|
|
var gradient6 = star._getLinearGradient();
|
|
|
|
assert.notEqual(gradient5, gradient6);
|
|
|
|
layer.draw();
|
|
});
|
|
|
|
// ======================================================
|
|
it('cache radial gradient', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
var star = new Konva.Star({
|
|
x: 200,
|
|
y: 100,
|
|
numPoints: 5,
|
|
innerRadius: 40,
|
|
outerRadius: 70,
|
|
|
|
fillRadialGradientStartPoint: { x: 0, y: 0 },
|
|
fillRadialGradientStartRadius: 0,
|
|
fillRadialGradientEndPoint: { x: 0, y: 0 },
|
|
fillRadialGradientEndRadius: 70,
|
|
fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'blue'],
|
|
|
|
stroke: 'blue',
|
|
strokeWidth: 5,
|
|
draggable: true,
|
|
});
|
|
|
|
layer.add(star);
|
|
stage.add(layer);
|
|
|
|
var ctx = layer.getContext();
|
|
var oldCreate = ctx.createRadialGradient;
|
|
|
|
var callCount = 0;
|
|
ctx.createRadialGradient = function () {
|
|
callCount += 1;
|
|
return oldCreate.apply(this, arguments);
|
|
};
|
|
|
|
layer.draw();
|
|
layer.draw();
|
|
assert.equal(callCount, 0);
|
|
});
|
|
|
|
it('recache linear gradient on changes', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
var star = new Konva.Star({
|
|
x: 200,
|
|
y: 100,
|
|
numPoints: 5,
|
|
innerRadius: 40,
|
|
outerRadius: 70,
|
|
|
|
fillRadialGradientStartPoint: { x: 0, y: 0 },
|
|
fillRadialGradientStartRadius: 0,
|
|
fillRadialGradientEndPoint: { x: 0, y: 0 },
|
|
fillRadialGradientEndRadius: 70,
|
|
fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'blue'],
|
|
|
|
stroke: 'blue',
|
|
strokeWidth: 5,
|
|
draggable: true,
|
|
});
|
|
|
|
layer.add(star);
|
|
stage.add(layer);
|
|
|
|
var gradient1 = star._getRadialGradient();
|
|
|
|
star.fillRadialGradientStartPointX(-10);
|
|
|
|
var gradient2 = star._getRadialGradient();
|
|
|
|
assert.notEqual(gradient1, gradient2);
|
|
|
|
star.fillRadialGradientStartPointY(-10);
|
|
|
|
var gradient3 = star._getRadialGradient();
|
|
|
|
assert.notEqual(gradient2, gradient3);
|
|
|
|
star.fillRadialGradientEndPointX(100);
|
|
|
|
var gradient4 = star._getRadialGradient();
|
|
|
|
assert.notEqual(gradient3, gradient4);
|
|
|
|
star.fillRadialGradientEndPointY(100);
|
|
|
|
var gradient5 = star._getRadialGradient();
|
|
|
|
assert.notEqual(gradient4, gradient5);
|
|
|
|
star.fillRadialGradientColorStops([0, 'red', 1, 'green']);
|
|
|
|
var gradient6 = star._getRadialGradient();
|
|
|
|
assert.notEqual(gradient5, gradient6);
|
|
|
|
star.fillRadialGradientStartRadius(10);
|
|
|
|
var gradient7 = star._getRadialGradient();
|
|
|
|
assert.notEqual(gradient6, gradient7);
|
|
|
|
star.fillRadialGradientEndRadius(200);
|
|
|
|
var gradient8 = star._getRadialGradient();
|
|
|
|
assert.notEqual(gradient7, gradient8);
|
|
|
|
layer.draw();
|
|
});
|
|
|
|
it('try to add destroyed shape', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
stage.add(layer);
|
|
|
|
var star = new Konva.Star({
|
|
x: 200,
|
|
y: 100,
|
|
numPoints: 5,
|
|
innerRadius: 40,
|
|
outerRadius: 70,
|
|
|
|
stroke: 'blue',
|
|
strokeWidth: 5,
|
|
draggable: true,
|
|
});
|
|
|
|
star.destroy();
|
|
|
|
var callCount = 0;
|
|
var oldWarn = Konva.Util.warn;
|
|
Konva.Util.warn = function () {
|
|
callCount += 1;
|
|
};
|
|
|
|
layer.add(star);
|
|
|
|
layer.draw();
|
|
|
|
assert.equal(callCount, 1);
|
|
Konva.Util.warn = oldWarn;
|
|
});
|
|
|
|
it('hasFill getter', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
stage.add(layer);
|
|
|
|
var shape = new Konva.Shape({
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
sceneFunc: function (context) {
|
|
context.beginPath();
|
|
context.moveTo(20, 50);
|
|
context.quadraticCurveTo(550, 0, 500, 500);
|
|
context.fillStrokeShape(shape);
|
|
},
|
|
fill: 'red',
|
|
fillEnabled: false,
|
|
});
|
|
|
|
layer.add(shape);
|
|
assert.equal(shape.hasFill(), false);
|
|
});
|
|
|
|
it('test hit of non filled shape', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
stage.add(layer);
|
|
|
|
var line = new Konva.Shape({
|
|
sceneFunc: function (context) {
|
|
context.beginPath();
|
|
context.moveTo(20, 50);
|
|
context.quadraticCurveTo(550, 0, 500, 500);
|
|
|
|
context.fillStrokeShape(line);
|
|
},
|
|
});
|
|
|
|
layer.add(line);
|
|
layer.draw();
|
|
|
|
// we still should register shape here
|
|
// like for a non filled rectangle (with just stroke),
|
|
// we need fill it for full events
|
|
var shape = layer.getIntersection({ x: 50, y: 70 });
|
|
assert.equal(shape, line);
|
|
});
|
|
|
|
it('validation on stroke should accept gradients', function () {
|
|
var callCount = 0;
|
|
var oldWarn = Konva.Util.warn;
|
|
Konva.Util.warn = function () {
|
|
callCount += 1;
|
|
};
|
|
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
stage.add(layer);
|
|
|
|
var canvas = createCanvas();
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
var gradient = ctx.createLinearGradient(0, 75, 100, 75);
|
|
gradient.addColorStop(0.0, 'rgba(255,255,255,1)');
|
|
gradient.addColorStop(1 / 6, 'rgba(255,255,255,0.8)');
|
|
gradient.addColorStop(2 / 6, 'rgba(255,255,255,0.6)');
|
|
gradient.addColorStop(3 / 6, 'rgba(255,255,255,0.4)');
|
|
gradient.addColorStop(4 / 6, 'rgba(255,255,255,0.3)');
|
|
gradient.addColorStop(5 / 6, 'rgba(255,255,255,0.2)');
|
|
gradient.addColorStop(1.0, 'rgba(255,255,255, 0)');
|
|
|
|
var star = new Konva.Star({
|
|
x: 200,
|
|
y: 100,
|
|
numPoints: 5,
|
|
innerRadius: 40,
|
|
outerRadius: 70,
|
|
|
|
stroke: gradient,
|
|
strokeWidth: 5,
|
|
draggable: true,
|
|
});
|
|
layer.add(star);
|
|
|
|
layer.draw();
|
|
|
|
assert.equal(callCount, 0);
|
|
Konva.Util.warn = oldWarn;
|
|
});
|
|
|
|
it('fill rule on hit graph', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
stage.add(layer);
|
|
|
|
var mask = new Konva.Shape({
|
|
sceneFunc: function (ctx, shape) {
|
|
ctx.beginPath();
|
|
ctx.rect(0, 0, 500, 500);
|
|
ctx.rect(100, 100, 100, 100);
|
|
ctx.closePath();
|
|
ctx.fillShape(shape);
|
|
},
|
|
draggable: true,
|
|
fill: 'red',
|
|
fillRule: 'evenodd',
|
|
});
|
|
|
|
layer.add(mask);
|
|
layer.draw();
|
|
const trace = layer.getContext().getTrace();
|
|
|
|
assert.equal(
|
|
trace,
|
|
'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();rect(0,0,500,500);rect(100,100,100,100);closePath();fillStyle=red;fill(evenodd);restore();'
|
|
);
|
|
|
|
const hitShape = layer.getIntersection({ x: 150, y: 150 });
|
|
assert.equal(hitShape, null);
|
|
});
|
|
});
|