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

better tests

Browse Source
This commit is contained in:
Anton Lavrenov 2020-09-17 13:25:46 -05:00
parent 42562438eb
commit 4ce6800fd9
19 changed files with 174 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
konva.js
View File

@ -13524,7 +13524,11 @@
return _this;
}
Text.prototype._sceneFunc = function (context) {
var padding = this.padding(), fontSize = this.fontSize(), lineHeightPx = this.lineHeight() * fontSize, textArr = this.textArr, textArrLen = textArr.length, verticalAlign = this.verticalAlign(), alignY = 0, align = this.align(), totalWidth = this.getWidth(), letterSpacing = this.letterSpacing(), fill = this.fill(), textDecoration = this.textDecoration(), shouldUnderline = textDecoration.indexOf('underline') !== -1, shouldLineThrough = textDecoration.indexOf('line-through') !== -1, n;
var textArr = this.textArr, textArrLen = textArr.length;
if (!this.text()) {
return;
}
var padding = this.padding(), fontSize = this.fontSize(), lineHeightPx = this.lineHeight() * fontSize, verticalAlign = this.verticalAlign(), alignY = 0, align = this.align(), totalWidth = this.getWidth(), letterSpacing = this.letterSpacing(), fill = this.fill(), textDecoration = this.textDecoration(), shouldUnderline = textDecoration.indexOf('underline') !== -1, shouldLineThrough = textDecoration.indexOf('line-through') !== -1, n;
var translateY = 0;
var translateY = lineHeightPx / 2;
var lineTranslateX = 0;

2
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
src/shapes/Text.ts
View File

@ -167,11 +167,16 @@ export class Text extends Shape<TextConfig> {
}
_sceneFunc(context) {
var textArr = this.textArr,
textArrLen = textArr.length;
if (!this.text()) {
return;
}
var padding = this.padding(),
fontSize = this.fontSize(),
lineHeightPx = this.lineHeight() * fontSize,
textArr = this.textArr,
textArrLen = textArr.length,
verticalAlign = this.verticalAlign(),
alignY = 0,
align = this.align(),

2
test/performance/common/random-squares.js
View File

@ -99,6 +99,6 @@ function make_stage() {
// circlesLayer = new Konva.FastLayer();
circlesLayer = new Konva.Layer({
hitGraphEnabled: false,
listening: false,
});
}

1
test/runner.html
View File

@ -119,7 +119,6 @@
<script src="unit/BaseLayer-test.js"></script>
<script src="unit/Layer-test.js"></script>
<script src="unit/Group-test.js"></script>
<script src="unit/FastLayer-test.js"></script>
<script src="unit/Shape-test.js"></script>
<script src="unit/Collection-test.js"></script>

2
test/runner.js
View File

@ -234,7 +234,7 @@ beforeEach(function () {
this.currentTest.body.toLowerCase().indexOf('compare') !== -1
)
) {
// console.error(this.currentTest.title);
console.error(this.currentTest.title);
}
});

19
test/unit/Container-test.js
View File

@ -726,13 +726,6 @@ suite('Container', function () {
);
});
// ======================================================
test('add layer', function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
});
// ======================================================
test('remove all children from layer', function () {
var stage = addStage();
@ -855,6 +848,12 @@ suite('Container', function () {
group.add(circle);
layer.add(group);
stage.add(layer);
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();'
);
});
// ======================================================
@ -906,6 +905,12 @@ suite('Container', function () {
blueLayer.draw();
blueGroup2.setPosition(100, 0);
blueLayer.draw();
var trace = blueLayer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,389,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=blue;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=blue;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=blue;fill();lineWidth=4;strokeStyle=black;stroke();restore();'
);
});
// ======================================================

97
test/unit/FastLayer-test.js
View File

@ -1,97 +0,0 @@
suite('FastLayer', function () {
// ======================================================
test('basic render', function () {
var stage = addStage();
var layer = new Konva.FastLayer();
var circle = new Konva.Circle({
x: 100,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
});
layer.add(circle);
stage.add(layer);
});
test('should not throw on shape render', function () {
var stage = addStage();
var layer = new Konva.FastLayer();
var circle = new Konva.Circle({
x: 100,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
});
layer.add(circle);
stage.add(layer);
circle.draw();
});
test('transform', function () {
var stage = addStage();
var fastLayer = new Konva.FastLayer({
x: stage.width() / 2,
y: stage.height() / 2,
});
var layer = new Konva.Layer({
x: stage.width() / 2,
y: stage.height() / 2,
});
var circle = new Konva.Circle({
radius: 70,
fill: 'green',
});
fastLayer.add(circle);
layer.add(circle.clone());
stage.add(layer, fastLayer);
compareLayers(fastLayer, layer);
});
test('cache shape on fast layer', function () {
var stage = addStage();
var layer = new Konva.FastLayer();
var circle = new Konva.Circle({
x: 74,
y: 74,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
});
layer.add(circle);
stage.add(layer);
circle
.cache({
x: -74,
y: -74,
width: 148,
height: 148,
})
.offset({
x: 74,
y: 74,
});
layer.draw();
});
});

19
test/unit/Group-test.js
View File

@ -6,7 +6,7 @@ suite('Group', function () {
var layer = new Konva.Layer();
var group = new Konva.Group({
draggable: true,
x: 100,
x: 50,
y: 40,
});
var text = new Konva.Text({
@ -19,9 +19,9 @@ suite('Group', function () {
var rect = new Konva.Rect({
height: 100,
width: 100,
stroke: '#00B80C',
stroke: 'black',
strokeWidth: 10,
cornerRadius: 1,
// cornerRadius: 1,
});
group.add(text);
group.add(rect);
@ -31,15 +31,16 @@ suite('Group', function () {
group
.cache({
x: -5,
y: -5,
width: 110,
height: 110,
drawBorder: true,
x: -15,
y: -15,
width: 150,
height: 150,
})
.offsetX(5)
.offsetY(5);
stage.draw();
layer.draw();
cloneAndCompareLayer(layer, 200);
});
});

10
test/unit/Layer-test.js
View File

@ -364,17 +364,17 @@ suite('Layer', function () {
layer.add(circle);
stage.add(layer);
assert.equal(layer.hitGraphEnabled(), true);
assert.equal(layer.listening(), true);
assert.equal(layer.shouldDrawHit(), true);
layer.disableHitGraph();
layer.listening(false);
assert.equal(layer.hitGraphEnabled(), false);
assert.equal(layer.listening(), false);
assert.equal(layer.shouldDrawHit(), false);
layer.enableHitGraph();
layer.listening(true);
assert.equal(layer.hitGraphEnabled(), true);
assert.equal(layer.listening(), true);
assert.equal(layer.shouldDrawHit(), true);
});

6
test/unit/Node-cache-test.js
View File

@ -740,7 +740,7 @@ suite('Caching', function () {
fillRadialGradientEndRadius: 10,
fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'black'],
opacity: 0.4,
strokeHitEnabled: false,
hitStrokeWidth: 0,
stroke: 'rgba(0,0,0,0)',
});
group.add(circle);
@ -768,7 +768,7 @@ suite('Caching', function () {
fillRadialGradientEndRadius: 10,
fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'black'],
opacity: 0.4,
strokeHitEnabled: false,
hitStrokeWidth: 0,
stroke: 'rgba(0,0,0,0)',
});
group.add(circle);
@ -796,7 +796,7 @@ suite('Caching', function () {
fillRadialGradientEndRadius: 10,
fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'black'],
opacity: 0.4,
strokeHitEnabled: false,
hitStrokeWidth: 0,
stroke: 'rgba(0,0,0,0)',
});
group.add(circle);

33
test/unit/Shape-test.js
View File

@ -133,6 +133,13 @@ suite('Shape', function () {
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();'
);
});
// ======================================================
@ -912,8 +919,8 @@ suite('Shape', function () {
imageObj.onload = function () {
var lion = new Konva.Image({
x: 200,
y: 40,
x: 0,
y: 0,
image: imageObj,
draggable: true,
shadowColor: 'black',
@ -923,28 +930,26 @@ suite('Shape', function () {
});
// override color key with black
lion.colorKey = '#000000';
Konva.shapes['#000000'] = lion;
// lion.colorKey = '#000000';
// Konva.shapes['#000000'] = lion;
layer.add(lion);
stage.add(layer);
lion.cache();
assert.equal(layer.getIntersection({ x: 10, y: 10 }), lion);
//document.body.appendChild(lion._getCanvasCache().hit._canvas);
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();
};
imageObj.src = 'assets/lion.png';
showHit(layer);
layer.hitCanvas._canvas.style.border = '2px solid black';
});
test('test defaults', function () {
@ -1045,10 +1050,10 @@ suite('Shape', function () {
draggable: true,
});
// default value
assert.equal(rect.strokeHitEnabled(), true);
assert.equal(rect.hitStrokeWidth(), 'auto');
rect.strokeHitEnabled(false);
assert.equal(rect.strokeHitEnabled(), false);
rect.hitStrokeWidth(0);
assert.equal(rect.hitStrokeWidth(), 0);
layer.add(rect);
stage.add(layer);
@ -1062,7 +1067,7 @@ suite('Shape', function () {
);
});
test('hitStrokeWidth', function () {
test.skip('hitStrokeWidth', function () {
var stage = addStage();
var layer = new Konva.Layer();

2
test/unit/Stage-test.js
View File

@ -50,6 +50,8 @@ suite('Stage', function () {
width: 578,
height: 200,
});
assert.equal(stage.container(), container);
});
// ======================================================

14
test/unit/shapes/Circle-test.js
View File

@ -196,8 +196,14 @@ suite('Circle', function () {
circle.setOpacity(0.5);
layer.draw();
circle.setOpacity(0.5);
circle.setOpacity(1);
layer.draw();
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=red;fill();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);globalAlpha=0.5;beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=red;fill();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=red;fill();restore();'
);
});
// ======================================================
@ -245,6 +251,12 @@ suite('Circle', function () {
circle.setFill('blue');
stage.add(layer);
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=blue;fill();lineWidth=4;strokeStyle=black;stroke();restore();'
);
});
test('getSelfRect', function () {

64
test/unit/shapes/Label-test.js
View File

@ -55,9 +55,11 @@ suite('Label', function () {
// use relaxed trace because text can be a slightly different size in different browsers,
// resulting in slightly different tag dimensions
var relaxedTrace = layer.getContext().getTrace(true);
// console.log(relaxedTrace);
// assert.equal(relaxedTrace, 'clearRect();save();save();globalAlpha;shadowColor;shadowBlur;shadowOffsetX;shadowOffsetY;drawImage();restore();drawImage();restore();save();transform();font;textBaseline;textAlign;save();translate();save();fillStyle;fillText();restore();translate();restore();restore();clearRect();save();save();globalAlpha;shadowColor;shadowBlur;shadowOffsetX;shadowOffsetY;drawImage();restore();drawImage();restore();save();transform();font;textBaseline;textAlign;save();translate();save();fillStyle;fillText();restore();translate();restore();restore();');
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,100,120);shadowColor=rgba(0,0,0,0.2);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(0,0);lineTo(-10,0);lineTo(0,-20);lineTo(10,0);lineTo(0,0);arc(0,0,0,4.712,0,false);lineTo(0,60);arc(0,60,0,0,1.571,false);lineTo(0,60);arc(0,60,0,1.571,3.142,false);lineTo(0,0);arc(0,0,0,3.142,4.712,false);closePath();fillStyle=#bbb;fill();restore();save();transform(1,0,0,1,100,120);restore();clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,-63.965,120);shadowColor=rgba(0,0,0,0.2);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(5,0);lineTo(153.965,0);lineTo(163.965,-20);lineTo(173.965,0);lineTo(322.93,0);arc(322.93,5,5,4.712,0,false);lineTo(327.93,55);arc(322.93,55,5,0,1.571,false);lineTo(5,60);arc(5,55,5,1.571,3.142,false);lineTo(0,5);arc(5,5,5,3.142,4.712,false);closePath();fillStyle=#bbb;fill();restore();save();transform(1,0,0,1,-63.965,120);font=normal normal 50px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=green;fillText(Hello big world,0,30);restore();restore();'
);
});
// ======================================================
@ -65,13 +67,20 @@ suite('Label', function () {
var stage = addStage();
var json =
'{"attrs":{"x":100,"y":100,"draggable":true},"className":"Label","children":[{"attrs":{"fill":"#bbb","stroke":"#333","shadowColor":"black","shadowBlur":10,"shadowOffsetX":10,"shadowOffsetY":10,"shadowOpacity":0.2,"lineJoin":"round","pointerDirection":"up","pointerWidth":20,"pointerHeight":20,"cornerRadius":5,"x":-151.5,"y":20,"width":303,"height":60},"className":"Tag"},{"attrs":{"text":"Hello big world","fontSize":50,"lineHeight":1.2,"fill":"green","width":"auto","height":"auto","x":-151.5,"y":20},"className":"Text"}]}';
'{"attrs":{"x":100,"y":100,"draggable":true},"className":"Label","children":[{"attrs":{"fill":"#bbb","shadowColor":"black","shadowBlur":10,"shadowOffsetX":10,"shadowOffsetY":10,"shadowOpacity":0.2,"lineJoin":"round","pointerDirection":"up","pointerWidth":20,"pointerHeight":20,"cornerRadius":5,"x":-151.5,"y":20,"width":303,"height":60},"className":"Tag"},{"attrs":{"text":"Hello big world","fontSize":50,"lineHeight":1.2,"fill":"green","width":"auto","height":"auto","x":-151.5,"y":20},"className":"Text"}]}';
var layer = new Konva.Layer();
var label = Konva.Node.create(json);
layer.add(label);
stage.add(layer);
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,-63.965,120);shadowColor=rgba(0,0,0,0.2);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(5,0);lineTo(153.965,0);lineTo(163.965,-20);lineTo(173.965,0);lineTo(322.93,0);arc(322.93,5,5,4.712,0,false);lineTo(327.93,55);arc(322.93,55,5,0,1.571,false);lineTo(5,60);arc(5,55,5,1.571,3.142,false);lineTo(0,5);arc(5,5,5,3.142,4.712,false);closePath();fillStyle=#bbb;fill();restore();save();transform(1,0,0,1,-63.965,120);font=normal normal 50px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=green;fillText(Hello big world,0,30);restore();restore();'
);
});
test('find label class', function () {
@ -270,32 +279,31 @@ suite('Label', function () {
assert.equal(tag.width(), text.width());
});
test("tag cornerRadius", function() {
var stage = addStage();
var layer = new Konva.Layer();
test('tag cornerRadius', function () {
var stage = addStage();
var layer = new Konva.Layer();
var tag = new Konva.Tag({
x: 50,
y: 50,
width: 100,
height: 100,
fill: 'black',
cornerRadius: [0, 10, 20, 30],
});
layer.add(tag);
stage.add(layer);
layer.draw();
var tag = new Konva.Tag({
x: 50,
y: 50,
width: 100,
height: 100,
fill: 'black',
cornerRadius: [0, 10, 20, 30],
});
layer.add(tag);
stage.add(layer);
layer.draw();
assert.equal(tag.cornerRadius()[0], 0);
assert.equal(tag.cornerRadius()[1], 10);
assert.equal(tag.cornerRadius()[2], 20);
assert.equal(tag.cornerRadius()[3], 30);
assert.equal(tag.cornerRadius()[0], 0);
assert.equal(tag.cornerRadius()[1], 10);
assert.equal(tag.cornerRadius()[2], 20);
assert.equal(tag.cornerRadius()[3], 30);
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,50,50);beginPath();moveTo(0,0);lineTo(90,0);arc(90,10,10,4.712,0,false);lineTo(100,80);arc(80,80,20,0,1.571,false);lineTo(30,100);arc(30,70,30,1.571,3.142,false);lineTo(0,0);arc(0,0,0,3.142,4.712,false);closePath();fillStyle=black;fill();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,50,50);beginPath();moveTo(0,0);lineTo(90,0);arc(90,10,10,4.712,0,false);lineTo(100,80);arc(80,80,20,0,1.571,false);lineTo(30,100);arc(30,70,30,1.571,3.142,false);lineTo(0,0);arc(0,0,0,3.142,4.712,false);closePath();fillStyle=black;fill();restore();'
);
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,50,50);beginPath();moveTo(0,0);lineTo(90,0);arc(90,10,10,4.712,0,false);lineTo(100,80);arc(80,80,20,0,1.571,false);lineTo(30,100);arc(30,70,30,1.571,3.142,false);lineTo(0,0);arc(0,0,0,3.142,4.712,false);closePath();fillStyle=black;fill();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,50,50);beginPath();moveTo(0,0);lineTo(90,0);arc(90,10,10,4.712,0,false);lineTo(100,80);arc(80,80,20,0,1.571,false);lineTo(30,100);arc(30,70,30,1.571,3.142,false);lineTo(0,0);arc(0,0,0,3.142,4.712,false);closePath();fillStyle=black;fill();restore();'
);
});
});

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

@ -61,6 +61,13 @@ suite('Path', function () {
layer.add(path);
stage.add(layer);
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(200,100);lineTo(300,100);lineTo(300,150);lineCap=round;lineWidth=20;strokeStyle=#333;stroke();restore();'
);
});
//=======================================================
@ -80,6 +87,13 @@ suite('Path', function () {
layer.add(path);
stage.add(layer);
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(4.114,28.971);lineTo(12.953,79.176);lineTo(35.934,30.739);closePath();moveTo(-0.482,42.76);lineTo(-0.482,61.145);bezierCurveTo(13.627,48.934,24.095,54.93,34.52,61.145);lineTo(36.824,52.544);lineTo(23.56,52.544);bezierCurveTo(25.787,47.08,30.731,40.71,16.701,40.665);bezierCurveTo(12.781,53.564,7.208,55.308,-0.482,42.76);closePath();lineCap=round;lineWidth=1;strokeStyle=#000;stroke();restore();'
);
});
//=======================================================
@ -99,6 +113,13 @@ suite('Path', function () {
layer.add(path);
stage.add(layer);
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'bezierCurveTo(140.037,77.432,145.348,79.212,147.897,81.051);bezierCurveTo(148.404,81.566,148.176,82.027,147.799,82.479);lineTo(151.701,81.337);bezierCurveTo(151.108,81.216,149.841,81.357,149.988,80.957);bezierCurveTo(149.129,79.006,146.301,78.196,144.373,76.864);bezierCurveTo(143.303,75.83,144.472,75.257,145.134,74.58);closePath();moveTo(43.206,42.601);lineTo(55.579,74.009);lineTo(58.72,73.91);lineTo(47.204,44.407);bezierCurveTo(46.095,43.67,46.03,42.307,43.206,42.599);closePath();moveTo(24.552,42.031);lineTo(37.02,73.723);lineTo(40.161,73.821);lineTo(27.693,42.129);closePath();moveTo(26.838,84.384);lineTo(24.201,84.319);lineTo(24.364,85.054);lineTo(28.073,95.01);lineTo(30.431,93.842);closePath();moveTo(46.25,84.95);lineTo(39.879,94.851);lineTo(41.969,96.467);lineTo(49.106,85.05);lineTo(49.41,84.615);lineTo(46.467,84.585);closePath();moveTo(34.158,93.236);bezierCurveTo(28.428,93.236,23.79,97.796,23.79,103.42);bezierCurveTo(23.79,109.045,28.428,113.605,34.158,113.605);bezierCurveTo(39.887,113.605,44.534,109.045,44.534,103.42);bezierCurveTo(44.534,97.796,39.887,93.236,34.158,93.236);closePath();moveTo(34.158,95.709);bezierCurveTo(38.468,95.709,41.969,99.163,41.969,103.42);bezierCurveTo(41.969,107.678,38.468,111.132,34.158,111.132);bezierCurveTo(29.848,111.132,26.355,107.678,26.355,103.42);bezierCurveTo(26.355,99.163,29.848,95.709,34.158,95.709);closePath();moveTo(37.686,73.914);bezierCurveTo(36.396,73.907,34.711,73.952,34.284,75.365);lineTo(34.264,82.86);bezierCurveTo(34.851,83.621,35.688,83.548,36.501,83.574);lineTo(63.03,83.429);lineTo(71.667,84.19);lineTo(71.667,76.671);bezierCurveTo(71.57,75.908,71.094,75.467,70.239,75.339);bezierCurveTo(61.126,73.734,49.245,73.929,37.69,73.911);closePath();moveTo(20.96,41.269);bezierCurveTo(20.95,41.873,21.535,42.151,21.535,42.151);lineTo(58.958,42.336);bezierCurveTo(54.064,41.351,42.365,39.477,26.123,39.553);bezierCurveTo(24.552,39.66,20.971,40.662,20.96,41.266);closePath();moveTo(24.313,55.545);bezierCurveTo(21.513,55.559,18.717,55.575,15.93,55.601);lineTo(15.93,55.601);lineTo(15.933,57.049);lineTo(14.759,57.062);lineTo(14.766,58.306);lineTo(15.95,58.364);bezierCurveTo(14.607,58.585,12.994,59.67,12.895,61.841);bezierCurveTo(12.905,65.11,12.908,68.38,12.908,71.649);lineTo(11.696,71.652);lineTo(11.677,69.291);lineTo(6.992,69.294);lineTo(6.992,75.196);lineTo(11.624,75.203);lineTo(11.594,73.447);lineTo(12.903,73.424);lineTo(12.913,82.605);bezierCurveTo(12.906,83.92,15.652,86.239,17.455,86.239);lineTo(22.267,83.244);bezierCurveTo(23.884,83.136,24.025,83.726,24.151,84.321);lineTo(59.819,84.64);lineTo(66.729,83.829);moveTo(71.723,83.243);lineTo(156.94,73.252);bezierCurveTo(161.88,72.764,171.856,50.996,153.189,47.695);bezierCurveTo(148.061,46.808,137.657,52.535,131.749,56.8);bezierCurveTo(129.436,58.755,130.007,60.884,131.775,62.783);lineTo(59.566,54.671);lineTo(57.443,54.67);bezierCurveTo(56.477,56.06,54.285,57.93,52.888,58.723);moveTo(49.36,58.361);bezierCurveTo(47.661,57.323,46.395,55.557,44.826,55.486);bezierCurveTo(40.922,55.487,36.922,55.493,32.944,55.499);moveTo(29.862,55.506);bezierCurveTo(28.819,55.509,27.78,55.513,26.746,55.516);lineCap=round;lineWidth=1;strokeStyle=#000;stroke();restore();'
);
});
//=======================================================
@ -246,6 +267,13 @@ suite('Path', function () {
layer.add(path);
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(12.582,9.551);bezierCurveTo(3.251,16.237,0.921,29.021,7.08,38.564);lineTo(4.72,40.253);lineTo(9.613,42.515);lineTo(14.506,44.777);lineTo(13.938,39.417);lineTo(13.371,34.058);lineTo(11.006,35.752);bezierCurveTo(6.349,28.377,8.176,18.567,15.358,13.422);bezierCurveTo(22.809,8.084,33.175,9.797,38.514,17.246);bezierCurveTo(43.851,24.695,42.139,35.059,34.693,40.398);lineTo(37.55,44.386);bezierCurveTo(47.167,37.493,49.377,24.109,42.485,14.49);bezierCurveTo(35.591,4.87,22.204,2.658,12.582,9.551);closePath();fillStyle=#ccc;fill();lineWidth=1;strokeStyle=#999;stroke();restore();'
);
});
// ======================================================

21
test/unit/shapes/RegularPolygon-test.js
View File

@ -44,6 +44,13 @@ suite('RegularPolygon', function () {
layer.add(poly);
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,-50);lineTo(50,0);lineTo(0,50);lineTo(-50,0);closePath();fillStyle=green;fill();lineWidth=5;strokeStyle=blue;stroke();restore();'
);
});
// ======================================================
@ -64,6 +71,13 @@ suite('RegularPolygon', function () {
layer.add(poly);
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,-50);lineTo(47.553,-15.451);lineTo(29.389,40.451);lineTo(-29.389,40.451);lineTo(-47.553,-15.451);closePath();fillStyle=green;fill();lineWidth=5;strokeStyle=blue;stroke();restore();'
);
});
// ======================================================
@ -84,6 +98,13 @@ suite('RegularPolygon', function () {
layer.add(poly);
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,-50);lineTo(35.355,-35.355);lineTo(50,0);lineTo(35.355,35.355);lineTo(0,50);lineTo(-35.355,35.355);lineTo(-50,0);lineTo(-35.355,-35.355);closePath();fillStyle=green;fill();lineWidth=5;strokeStyle=blue;stroke();restore();'
);
});
// ======================================================

11
test/unit/shapes/Text-test.js
View File

@ -11,6 +11,11 @@ suite('Text', function () {
layer.add(text);
layer.draw();
var trace =
'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);restore();';
assert.equal(layer.getContext().getTrace(), trace);
});
// ======================================================
@ -644,7 +649,11 @@ suite('Text', function () {
layer.add(text);
stage.add(layer);
//console.log(layer.getContext().getTrace());
assert.equal(
layer.getContext().getTrace(),
"clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);shadowColor=rgba(255,0,0,0.5);shadowBlur=1;shadowOffsetX=10;shadowOffsetY=10;font=normal normal 16px Calibri;textBaseline=middle;textAlign=left;translate(20,20);save();fillStyle=#555;fillText(HEADING,133.563,8);restore();save();fillStyle=#555;fillText(,170,24);restore();save();fillStyle=#555;fillText(All the world's a stage, and all the men and women,6.602,40);restore();save();fillStyle=#555;fillText(merely players. They have their exits and their,21.168,56);restore();save();fillStyle=#555;fillText(entrances; And one man in his time plays many,18.035,72);restore();save();fillStyle=#555;fillText(parts.,152.449,88);restore();restore();"
);
});
// ======================================================

1
test/worker.js
View File

@ -119,7 +119,6 @@ async function runBunnies() {
var bunny = new Konva.Image({
image: img,
transformsEnabled: 'position',
hitGraphEnabled: false,
x: 10,
y: 10,
listening: false,