mirror of
https://github.com/konvajs/konva.git
synced 2025-12-29 10:04:34 +08:00
Add new method getClientRect(). rethink caching.
This commit is contained in:
lavrton
@@ -350,4 +350,13 @@ suite('Layer', function() {
|
||||
// after drawing group hit cache should be cleared
|
||||
assert.equal(count, 2, 'while creating new cache getImageData should be called');
|
||||
});
|
||||
|
||||
it('get/set layer size', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
assert.deepEqual(layer.size(), stage.size());
|
||||
assert.equal(layer.width(), stage.width());
|
||||
assert.equal(layer.height(), stage.height());
|
||||
});
|
||||
});
|
||||
509
test/unit/Node-cache-test.js
Normal file
509
test/unit/Node-cache-test.js
Normal file
@@ -0,0 +1,509 @@
|
||||
suite('Caching', function() {
|
||||
|
||||
// CACHING SHAPE
|
||||
|
||||
test('cache simple rectangle', function() {
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
x: 100,
|
||||
y: 50,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green'
|
||||
});
|
||||
rect.cache();
|
||||
|
||||
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();
|
||||
compareLayerAndCanvas(layer, canvas, 10);
|
||||
compareSceneAndHit(layer);
|
||||
});
|
||||
|
||||
test('cache simple rectangle with transform', function() {
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
x: 100,
|
||||
y: 50,
|
||||
width: 100,
|
||||
height: 50,
|
||||
rotation : 45,
|
||||
scaleY : 2,
|
||||
fill: 'green'
|
||||
});
|
||||
rect.cache();
|
||||
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
context.translate(100, 50);
|
||||
context.rotate(Math.PI / 4);
|
||||
context.beginPath();
|
||||
context.rect(0, 0, 100, 100);
|
||||
context.closePath();
|
||||
context.fillStyle = 'green';
|
||||
context.fill();
|
||||
|
||||
if (!window.mochaPhantomJS) {
|
||||
compareLayerAndCanvas(layer, canvas, 40);
|
||||
compareSceneAndHit(layer);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
test('cache rectangle with fill and 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 : 20
|
||||
});
|
||||
rect.cache();
|
||||
|
||||
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();
|
||||
context.lineWidth = 20;
|
||||
context.stroke();
|
||||
compareLayerAndCanvas(layer, canvas, 10);
|
||||
compareSceneAndHit(layer);
|
||||
});
|
||||
|
||||
test('cache rectangle with fill and simple 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',
|
||||
shadowColor : 'black',
|
||||
shadowBlur : 10
|
||||
});
|
||||
rect.cache();
|
||||
|
||||
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 = 'black';
|
||||
context.shadowBlur = 10;
|
||||
context.fill();
|
||||
compareLayerAndCanvas(layer, canvas, 10);
|
||||
});
|
||||
|
||||
test('cache rectangle with fill and shadow with offset', function() {
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
x: 100,
|
||||
y: 50,
|
||||
width: 50,
|
||||
height: 25,
|
||||
fill: 'green',
|
||||
shadowOffsetX : 10,
|
||||
shadowOffsetY : 10,
|
||||
shadowColor : 'black',
|
||||
shadowBlur : 10
|
||||
});
|
||||
rect.cache();
|
||||
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
context.translate(100, 50);
|
||||
context.beginPath();
|
||||
context.rect(0, 0, 50, 25);
|
||||
context.closePath();
|
||||
context.fillStyle = 'green';
|
||||
context.shadowColor = 'black';
|
||||
context.shadowBlur = 10;
|
||||
context.shadowOffsetX = 10;
|
||||
context.shadowOffsetY = 10;
|
||||
context.fill();
|
||||
compareLayerAndCanvas(layer, canvas, 50);
|
||||
});
|
||||
|
||||
test('cache rectangle with fill and shadow with negative offset', function() {
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
x: 100,
|
||||
y: 50,
|
||||
width: 50,
|
||||
height: 25,
|
||||
fill: 'green',
|
||||
shadowOffsetX : -10,
|
||||
shadowOffsetY : -10,
|
||||
shadowColor : 'black',
|
||||
shadowBlur : 10
|
||||
});
|
||||
rect.cache();
|
||||
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
context.translate(100, 50);
|
||||
context.beginPath();
|
||||
context.rect(0, 0, 50, 25);
|
||||
context.closePath();
|
||||
context.fillStyle = 'green';
|
||||
context.shadowColor = 'black';
|
||||
context.shadowBlur = 10;
|
||||
context.shadowOffsetX = -10;
|
||||
context.shadowOffsetY = -10;
|
||||
context.fill();
|
||||
compareLayerAndCanvas(layer, canvas, 50);
|
||||
});
|
||||
|
||||
test('cache rectangle with fill and shadow and some transform', function() {
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
x: 100,
|
||||
y: 50,
|
||||
width: 50,
|
||||
height: 25,
|
||||
fill: 'green',
|
||||
shadowOffsetX : -10,
|
||||
shadowOffsetY : -10,
|
||||
shadowColor : 'black',
|
||||
shadowBlur : 10,
|
||||
offsetX : 50,
|
||||
offsetY : 25
|
||||
});
|
||||
rect.cache();
|
||||
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
context.translate(50, 25);
|
||||
context.beginPath();
|
||||
context.rect(0, 0, 50, 25);
|
||||
context.closePath();
|
||||
context.fillStyle = 'green';
|
||||
context.shadowColor = 'black';
|
||||
context.shadowBlur = 10;
|
||||
context.shadowOffsetX = -10;
|
||||
context.shadowOffsetY = -10;
|
||||
context.fill();
|
||||
compareLayerAndCanvas(layer, canvas, 50);
|
||||
});
|
||||
|
||||
|
||||
// CACHING CONTAINERS
|
||||
test('cache group with simple rectangle', function() {
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var group = new Konva.Group({
|
||||
x: 100,
|
||||
y: 50
|
||||
});
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green'
|
||||
});
|
||||
group.add(rect);
|
||||
group.cache();
|
||||
|
||||
layer.add(group);
|
||||
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();
|
||||
compareLayerAndCanvas(layer, canvas, 10);
|
||||
compareSceneAndHit(layer);
|
||||
});
|
||||
|
||||
test('cache group with simple rectangle with transform', function() {
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var group = new Konva.Group({
|
||||
x: 50,
|
||||
y: 25
|
||||
});
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
x : 50,
|
||||
y : 25,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green',
|
||||
rotation : 45
|
||||
});
|
||||
group.add(rect);
|
||||
group.cache();
|
||||
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
context.translate(100, 50);
|
||||
context.rotate(Math.PI / 4);
|
||||
context.beginPath();
|
||||
context.rect(0, 0, 100, 50);
|
||||
context.closePath();
|
||||
context.fillStyle = 'green';
|
||||
context.fill();
|
||||
if (!window.mochaPhantomJS) {
|
||||
compareLayerAndCanvas(layer, canvas, 150);
|
||||
compareSceneAndHit(layer);
|
||||
}
|
||||
});
|
||||
|
||||
test('cache group with several shape with transform', function() {
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var group = new Konva.Group({
|
||||
x: 50,
|
||||
y: 25
|
||||
});
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
x : 50,
|
||||
y : 25,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green',
|
||||
shadowOffsetX : 10,
|
||||
shadowOffsetY : 10,
|
||||
shadowBlur : 10
|
||||
});
|
||||
group.add(rect);
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
x : 250,
|
||||
y : 50,
|
||||
radius : 25,
|
||||
fill: 'red',
|
||||
// rotation on circle should not have any effects
|
||||
rotation : 45,
|
||||
stroke : 2,
|
||||
scaleX : 2,
|
||||
scaleY : 2
|
||||
});
|
||||
group.add(circle);
|
||||
|
||||
group.cache();
|
||||
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
// draw rect
|
||||
context.save();
|
||||
context.beginPath();
|
||||
context.rect(100, 50, 100, 50);
|
||||
context.closePath();
|
||||
context.fillStyle = 'green';
|
||||
context.shadowColor = 'black';
|
||||
context.shadowBlur = 10;
|
||||
context.shadowOffsetX = 10;
|
||||
context.shadowOffsetY = 10;
|
||||
context.fill();
|
||||
context.restore();
|
||||
|
||||
// circle
|
||||
context.save();
|
||||
context.beginPath();
|
||||
context.arc(300, 75, 50, 0, Math.PI * 2);
|
||||
context.closePath();
|
||||
context.fillStyle = 'red';
|
||||
context.lineWidth = 4;
|
||||
context.fill();
|
||||
context.stroke();
|
||||
context.restore();
|
||||
|
||||
|
||||
compareLayerAndCanvas(layer, canvas, 150);
|
||||
|
||||
// recache
|
||||
group.cache();
|
||||
layer.draw();
|
||||
compareLayerAndCanvas(layer, canvas, 150);
|
||||
});
|
||||
|
||||
test('cache layer with several shape with transform', function() {
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer({
|
||||
draggable : true
|
||||
});
|
||||
|
||||
var group = new Konva.Group({
|
||||
x: 50,
|
||||
y: 25
|
||||
});
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
x : 50,
|
||||
y : 25,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green',
|
||||
shadowOffsetX : 10,
|
||||
shadowOffsetY : 10,
|
||||
shadowBlur : 10
|
||||
});
|
||||
group.add(rect);
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
x : 250,
|
||||
y : 50,
|
||||
radius : 25,
|
||||
fill: 'red',
|
||||
// rotation on circle should not have any effects
|
||||
rotation : 45,
|
||||
stroke : 2,
|
||||
scaleX : 2,
|
||||
scaleY : 2
|
||||
});
|
||||
group.add(circle);
|
||||
|
||||
group.cache();
|
||||
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
// draw rect
|
||||
context.save();
|
||||
context.beginPath();
|
||||
context.rect(100, 50, 100, 50);
|
||||
context.closePath();
|
||||
context.fillStyle = 'green';
|
||||
context.shadowColor = 'black';
|
||||
context.shadowBlur = 10;
|
||||
context.shadowOffsetX = 10;
|
||||
context.shadowOffsetY = 10;
|
||||
context.fill();
|
||||
context.restore();
|
||||
|
||||
// circle
|
||||
context.save();
|
||||
context.beginPath();
|
||||
context.arc(300, 75, 50, 0, Math.PI * 2);
|
||||
context.closePath();
|
||||
context.fillStyle = 'red';
|
||||
context.lineWidth = 4;
|
||||
context.fill();
|
||||
context.stroke();
|
||||
context.restore();
|
||||
|
||||
|
||||
compareLayerAndCanvas(layer, canvas, 150);
|
||||
|
||||
// recache
|
||||
group.cache();
|
||||
layer.draw();
|
||||
compareLayerAndCanvas(layer, canvas, 150);
|
||||
});
|
||||
|
||||
test('cache shape that is larger than stage', function(){
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var group = new Konva.Group();
|
||||
var circle = new Konva.Circle({
|
||||
x: 74,
|
||||
y: 74,
|
||||
radius: 300,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
scaleX : 1 /2,
|
||||
scaleY : 1 / 2
|
||||
});
|
||||
|
||||
group.add(circle);
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(circle._cache.canvas, undefined);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
// circle
|
||||
context.save();
|
||||
context.beginPath();
|
||||
context.arc(74, 74, 150, 0, Math.PI * 2);
|
||||
context.closePath();
|
||||
context.fillStyle = 'red';
|
||||
context.lineWidth = 2;
|
||||
context.fill();
|
||||
context.stroke();
|
||||
context.restore();
|
||||
|
||||
|
||||
compareLayerAndCanvas(layer, canvas, 50);
|
||||
});
|
||||
});
|
||||
@@ -2961,358 +2961,6 @@ suite('Node', function() {
|
||||
y : 35
|
||||
});
|
||||
assert.equal(shape, rect, 'rect found');
|
||||
|
||||
assert.equal(layer.canvas.getContext().getTrace(), 'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);drawImage([object HTMLCanvasElement],0,0);restore();');
|
||||
});
|
||||
|
||||
|
||||
test('cache shape inside transformed group', function(){
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var group = new Konva.Group({
|
||||
x: 50,
|
||||
y: 50
|
||||
});
|
||||
var circle = new Konva.Circle({
|
||||
x: 74,
|
||||
y: 74,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
name: 'myCircle',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
group.add(circle);
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(circle._cache.canvas, undefined);
|
||||
|
||||
circle.cache({
|
||||
x: -74,
|
||||
y: -74,
|
||||
width: 148,
|
||||
height: 148
|
||||
}).offset({
|
||||
x: 74,
|
||||
y: 74
|
||||
});
|
||||
|
||||
assert.notEqual(circle._cache.canvas.scene, undefined);
|
||||
assert.notEqual(circle._cache.canvas.hit, undefined);
|
||||
|
||||
layer.draw();
|
||||
|
||||
|
||||
//document.body.appendChild(circle._cache.canvas.scene._canvas);
|
||||
// document.body.appendChild(circle._cache.canvas.hit._canvas);
|
||||
|
||||
showHit(layer)
|
||||
|
||||
assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,124,124);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,50,50);drawImage([object HTMLCanvasElement],0,0);restore();');
|
||||
assert.equal(circle._cache.canvas.scene.getContext().getTrace(), 'save();translate(74,74);translate(-74,-74);save();transform(1,0,0,1,74,74);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();restore();');
|
||||
});
|
||||
|
||||
test('cache shape thats larger than stage', function(){
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var group = new Konva.Group();
|
||||
var circle = new Konva.Circle({
|
||||
x: 74,
|
||||
y: 74,
|
||||
radius: 300,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
name: 'myCircle',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
group.add(circle);
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(circle._cache.canvas, undefined);
|
||||
|
||||
circle.cache({
|
||||
x: -304,
|
||||
y: -304,
|
||||
width: 608,
|
||||
height: 608
|
||||
}).offset({
|
||||
x: 304,
|
||||
y: 304
|
||||
});
|
||||
layer.draw();
|
||||
|
||||
|
||||
});
|
||||
|
||||
test('show cache border', function(){
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var group = new Konva.Group();
|
||||
var circle = new Konva.Circle({
|
||||
x: 200,
|
||||
y: 74,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
name: 'myCircle',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
group.add(circle);
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(circle._cache.canvas, undefined);
|
||||
|
||||
circle.cache({
|
||||
x: -74,
|
||||
y: -74,
|
||||
width: 148,
|
||||
height: 148,
|
||||
drawBorder: true
|
||||
}).offset({
|
||||
x: 74,
|
||||
y: 74
|
||||
});
|
||||
|
||||
assert.notEqual(circle._cache.canvas.scene, undefined);
|
||||
assert.notEqual(circle._cache.canvas.hit, undefined);
|
||||
|
||||
layer.draw();
|
||||
|
||||
|
||||
showHit(layer);
|
||||
|
||||
|
||||
//console.log(circle._cache.canvas.scene.getContext().getTrace());
|
||||
|
||||
// make sure the border rectangle was drawn onto the cached scene canvas
|
||||
assert.equal(circle._cache.canvas.scene.getContext().getTrace(),'save();save();beginPath();rect(0,0,148,148);closePath();strokeStyle=red;lineWidth=5;stroke();restore();translate(74,74);translate(-200,-74);save();transform(1,0,0,1,200,74);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();restore();');
|
||||
});
|
||||
|
||||
test('cache group', function(){
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var group = new Konva.Group({
|
||||
x: 100,
|
||||
y: 100,
|
||||
draggable: true
|
||||
});
|
||||
var top = new Konva.Circle({
|
||||
x: 0,
|
||||
y: -70,
|
||||
radius: 30,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
var right = new Konva.Circle({
|
||||
x: 70,
|
||||
y: 0,
|
||||
radius: 30,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
var bottom = new Konva.Circle({
|
||||
x: 0,
|
||||
y: 70,
|
||||
radius: 30,
|
||||
fill: 'blue',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
var left = new Konva.Circle({
|
||||
x: -70,
|
||||
y: 0,
|
||||
radius: 30,
|
||||
fill: 'yellow',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
group.add(top).add(right).add(bottom).add(left);
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
//console.log('---before cache')
|
||||
|
||||
assert.equal(group._cache.canvas, undefined);
|
||||
|
||||
group.cache({
|
||||
width: 80,
|
||||
height: 80
|
||||
});
|
||||
|
||||
assert.notEqual(group._cache.canvas.scene, undefined);
|
||||
assert.notEqual(group._cache.canvas.hit, undefined);
|
||||
|
||||
//console.log('---before first draw')
|
||||
layer.draw();
|
||||
|
||||
//console.log(layer.getContext().getTrace())
|
||||
|
||||
//document.body.appendChild(group._cache.canvas.scene._canvas);
|
||||
|
||||
//console.log('---before second draw')
|
||||
layer.draw();
|
||||
|
||||
assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,30);beginPath();arc(0,0,30,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,170,100);beginPath();arc(0,0,30,0,6.283,false);closePath();fillStyle=red;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,100,170);beginPath();arc(0,0,30,0,6.283,false);closePath();fillStyle=blue;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,30,100);beginPath();arc(0,0,30,0,6.283,false);closePath();fillStyle=yellow;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);drawImage([object HTMLCanvasElement],0,0);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);drawImage([object HTMLCanvasElement],0,0);restore();');
|
||||
|
||||
showHit(layer);
|
||||
});
|
||||
|
||||
test('cache transformed group', function(){
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var group = new Konva.Group({
|
||||
x: 100,
|
||||
y: 100,
|
||||
draggable: true,
|
||||
rotation: 20,
|
||||
scaleX: 2,
|
||||
scaleY: 2
|
||||
});
|
||||
var top = new Konva.Circle({
|
||||
x: 0,
|
||||
y: -70,
|
||||
radius: 50,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
var right = new Konva.Circle({
|
||||
x: 70,
|
||||
y: 0,
|
||||
radius: 30,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
var bottom = new Konva.Circle({
|
||||
x: 0,
|
||||
y: 70,
|
||||
radius: 30,
|
||||
fill: 'blue',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
var left = new Konva.Circle({
|
||||
x: -70,
|
||||
y: 0,
|
||||
radius: 30,
|
||||
fill: 'yellow',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
group.add(top).add(right).add(bottom).add(left);
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
//console.log('---before cache')
|
||||
|
||||
//console.log(group.getAbsoluteTransform().getTranslation())
|
||||
|
||||
group.cache({
|
||||
x: -104,
|
||||
y: -104,
|
||||
width: 208,
|
||||
height: 208
|
||||
});
|
||||
|
||||
group.offsetX(104).offsetY(104);
|
||||
|
||||
//console.log('--after cache');
|
||||
//console.log(group.getAbsoluteTransform().getTranslation())
|
||||
//console.log(group.getAbsolutePosition());
|
||||
//console.log('---before first draw')
|
||||
layer.draw();
|
||||
|
||||
//document.body.appendChild(group._cache.canvas.scene._canvas);
|
||||
//console.log('---before second draw')
|
||||
layer.draw();
|
||||
|
||||
//console.log(layer.getContext().getTrace())
|
||||
assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1.879,0.684,-0.684,1.879,147.883,-31.557);beginPath();arc(0,0,50,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1.879,0.684,-0.684,1.879,231.557,147.883);beginPath();arc(0,0,30,0,6.283,false);closePath();fillStyle=red;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1.879,0.684,-0.684,1.879,52.117,231.557);beginPath();arc(0,0,30,0,6.283,false);closePath();fillStyle=blue;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1.879,0.684,-0.684,1.879,-31.557,52.117);beginPath();arc(0,0,30,0,6.283,false);closePath();fillStyle=yellow;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(0,0,578,200);save();transform(1.879,0.684,-0.684,1.879,-24.316,-166.596);drawImage([object HTMLCanvasElement],0,0);restore();clearRect(0,0,578,200);save();transform(1.879,0.684,-0.684,1.879,-24.316,-166.596);drawImage([object HTMLCanvasElement],0,0);restore();');
|
||||
showHit(layer);
|
||||
});
|
||||
|
||||
test('cache layer', function(){
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer({
|
||||
x: 100,
|
||||
y: 100,
|
||||
draggable: true
|
||||
});
|
||||
var group = new Konva.Group();
|
||||
var top = new Konva.Circle({
|
||||
x: 0,
|
||||
y: -70,
|
||||
radius: 30,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
var right = new Konva.Circle({
|
||||
x: 70,
|
||||
y: 0,
|
||||
radius: 30,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
var bottom = new Konva.Circle({
|
||||
x: 0,
|
||||
y: 70,
|
||||
radius: 30,
|
||||
fill: 'blue',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
var left = new Konva.Circle({
|
||||
x: -70,
|
||||
y: 0,
|
||||
radius: 30,
|
||||
fill: 'yellow',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
group.add(top).add(right).add(bottom).add(left);
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(layer._cache.canvas, undefined);
|
||||
|
||||
layer.cache({
|
||||
width: 80,
|
||||
height: 80
|
||||
});
|
||||
|
||||
assert.notEqual(layer._cache.canvas.scene, undefined);
|
||||
assert.notEqual(layer._cache.canvas.hit, undefined);
|
||||
|
||||
|
||||
layer.draw();
|
||||
layer.draw();
|
||||
|
||||
//console.log(layer.getContext().getTrace());
|
||||
assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,30);beginPath();arc(0,0,30,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,170,100);beginPath();arc(0,0,30,0,6.283,false);closePath();fillStyle=red;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,100,170);beginPath();arc(0,0,30,0,6.283,false);closePath();fillStyle=blue;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,30,100);beginPath();arc(0,0,30,0,6.283,false);closePath();fillStyle=yellow;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);drawImage([object HTMLCanvasElement],0,0);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);drawImage([object HTMLCanvasElement],0,0);restore();');
|
||||
|
||||
|
||||
// make sure that the hit graph is also rendered after caching the layer
|
||||
assert.equal(layer.hitCanvas.getContext().getTrace(true), 'clearRect();save();transform();beginPath();arc();closePath();save();fillStyle;fill();restore();lineWidth;strokeStyle;stroke();restore();save();transform();beginPath();arc();closePath();save();fillStyle;fill();restore();lineWidth;strokeStyle;stroke();restore();save();transform();beginPath();arc();closePath();save();fillStyle;fill();restore();lineWidth;strokeStyle;stroke();restore();save();transform();beginPath();arc();closePath();save();fillStyle;fill();restore();lineWidth;strokeStyle;stroke();restore();clearRect();clearRect();save();transform();drawImage();restore();clearRect();save();transform();drawImage();restore();');
|
||||
|
||||
showHit(layer);
|
||||
|
||||
});
|
||||
|
||||
test('stage.toObject() when stage contains an image', function(done){
|
||||
|
||||
@@ -99,4 +99,122 @@ suite('Label', function() {
|
||||
assert.equal(stage.find('Label')[0], label);
|
||||
});
|
||||
|
||||
test('cache label', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
// tooltip
|
||||
var tooltip = new Konva.Label({
|
||||
x: 170,
|
||||
y: 75,
|
||||
opacity: 0.75
|
||||
});
|
||||
tooltip.add(new Konva.Tag({
|
||||
fill: 'black',
|
||||
pointerDirection: 'down',
|
||||
pointerWidth: 10,
|
||||
pointerHeight: 10,
|
||||
lineJoin: 'round',
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: 10,
|
||||
shadowOpacity: 0.5
|
||||
}));
|
||||
tooltip.add(new Konva.Text({
|
||||
text: 'Tooltip pointing down',
|
||||
fontFamily: 'Calibri',
|
||||
fontSize: 18,
|
||||
padding: 5,
|
||||
fill: 'white'
|
||||
}));
|
||||
|
||||
var tooltipUp = new Konva.Label({
|
||||
x: 170,
|
||||
y: 75,
|
||||
opacity: 0.75
|
||||
});
|
||||
tooltipUp.add(new Konva.Tag({
|
||||
fill: 'black',
|
||||
pointerDirection: 'up',
|
||||
pointerWidth: 10,
|
||||
pointerHeight: 10,
|
||||
lineJoin: 'round',
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: 10,
|
||||
shadowOpacity: 0.5
|
||||
}));
|
||||
tooltipUp.add(new Konva.Text({
|
||||
text: 'Tooltip pointing up',
|
||||
fontFamily: 'Calibri',
|
||||
fontSize: 18,
|
||||
padding: 5,
|
||||
fill: 'white'
|
||||
}));
|
||||
// label with left pointer
|
||||
var labelLeft = new Konva.Label({
|
||||
x: 20,
|
||||
y: 130,
|
||||
opacity: 0.75
|
||||
});
|
||||
labelLeft.add(new Konva.Tag({
|
||||
fill: 'green',
|
||||
pointerDirection: 'left',
|
||||
pointerWidth: 30,
|
||||
pointerHeight: 28,
|
||||
lineJoin: 'round'
|
||||
}));
|
||||
labelLeft.add(new Konva.Text({
|
||||
text: 'Label pointing left',
|
||||
fontFamily: 'Calibri',
|
||||
fontSize: 18,
|
||||
padding: 5,
|
||||
fill: 'white'
|
||||
}));
|
||||
// label with left pointer
|
||||
var labelRight = new Konva.Label({
|
||||
x: 160,
|
||||
y: 170,
|
||||
offsetX : 20,
|
||||
opacity: 0.75
|
||||
});
|
||||
labelRight.add(new Konva.Tag({
|
||||
fill: 'green',
|
||||
pointerDirection: 'right',
|
||||
pointerWidth: 20,
|
||||
pointerHeight: 28,
|
||||
lineJoin: 'round'
|
||||
}));
|
||||
labelRight.add(new Konva.Text({
|
||||
text: 'Label right',
|
||||
fontFamily: 'Calibri',
|
||||
fontSize: 18,
|
||||
padding: 5,
|
||||
fill: 'white'
|
||||
}));
|
||||
// simple label
|
||||
var simpleLabel = new Konva.Label({
|
||||
x: 180,
|
||||
y: 150,
|
||||
opacity: 0.75
|
||||
});
|
||||
simpleLabel.add(new Konva.Tag({
|
||||
fill: 'yellow'
|
||||
}));
|
||||
simpleLabel.add(new Konva.Text({
|
||||
text: 'Simple label',
|
||||
fontFamily: 'Calibri',
|
||||
fontSize: 18,
|
||||
padding: 5,
|
||||
fill: 'black'
|
||||
}));
|
||||
// add the labels to layer
|
||||
layer.add(tooltip, tooltipUp, labelLeft, labelRight, simpleLabel);
|
||||
layer.children.cache();
|
||||
|
||||
stage.add(layer);
|
||||
|
||||
cloneAndCompareLayer(layer, 150);
|
||||
});
|
||||
|
||||
});
|
||||
@@ -102,6 +102,32 @@ suite('Path', function() {
|
||||
stage.add(layer);
|
||||
|
||||
});
|
||||
|
||||
//=======================================================
|
||||
test('complex path made of many different closed and open paths (Sopwith Camel) cached', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var path = new Konva.Path({
|
||||
data: 'm 15.749277,58.447629 8.495831,-0.05348 m 0.319898,-15.826548 -0.202438,17.295748 0.942206,0.941911 1.345933,-1.816987 0.20211,-11.642611 z m 77.458374,28.680768 c 0,5.308829 -4.303525,9.612686 -9.612485,9.612686 -5.30873,0 -9.612194,-4.303857 -9.612194,-9.612686 0,-5.308829 4.303464,-9.61226 9.612194,-9.61226 5.30896,0 9.612485,4.303431 9.612485,9.61226 z m -3.520874,0 c 0,3.364079 -2.72763,6.091348 -6.091611,6.091348 -3.364243,0 -6.091119,-2.727269 -6.091119,-6.091348 0,-3.363719 2.726876,-6.090791 6.091119,-6.090791 3.363981,0 6.091611,2.727072 6.091611,6.090791 z m -3.997576,0 c 0,1.156718 -0.937743,2.093937 -2.094035,2.093937 -1.156062,0 -2.093871,-0.937219 -2.093871,-2.093937 0,-1.156357 0.937809,-2.093773 2.093871,-2.093773 1.156292,0 2.094035,0.937416 2.094035,2.093773 z m 45.77821,4.283023 c -0.24607,1.90039 5.06492,3.680204 7.61403,5.520093 0.50662,0.514199 0.27889,0.975967 -0.0984,1.427532 l 3.9019,-1.141987 c -0.59258,-0.121397 -1.85951,0.01969 -1.71294,-0.380038 -0.85894,-1.950525 -3.68693,-2.761261 -5.61518,-4.092495 -1.06971,-1.03496 0.0997,-1.60766 0.76126,-2.284203 z M 43.206396,42.60133 55.578964,74.008743 58.71987,73.910313 47.203939,44.40726 c -1.109013,-0.737406 -1.174108,-2.1004 -3.997543,-1.808752 z m -18.654022,-0.570632 12.467721,31.692335 3.140643,0.09843 -12.467656,-31.692927 z m 2.285318,42.353106 -2.636648,-0.06431 0.163066,0.734584 3.709372,9.956142 2.357927,-1.168202 z m 19.411934,0.566268 -6.370726,9.901284 2.090163,1.615665 7.13671,-11.417403 0.303821,-0.4347 -2.942667,-0.02953 z m -12.091915,8.286013 c -5.729323,0 -10.367941,4.560169 -10.367941,10.184405 0,5.62429 4.638618,10.18489 10.367941,10.18489 5.729424,0 10.37654,-4.5606 10.37654,-10.18489 0,-5.624236 -4.647083,-10.184405 -10.37654,-10.184405 z m 0,2.473319 c 4.310029,0 7.811352,3.453552 7.811352,7.711086 0,4.25776 -3.50129,7.71167 -7.811352,7.71167 -4.310157,0 -7.803016,-3.45391 -7.803016,-7.71167 0,-4.257534 3.492859,-7.711086 7.803016,-7.711086 z m 3.528526,-21.795876 c -1.29032,-0.0066 -2.97525,0.03839 -3.402437,1.45155 l -0.01969,7.494437 c 0.586775,0.761915 1.42432,0.688978 2.236565,0.71411 l 26.529545,-0.14502 8.636784,0.761324 0,-7.518487 C 71.56989,75.908478 71.09444,75.467051 70.239377,75.338961 61.126027,73.734287 49.244756,73.929146 37.690371,73.911166 z M 20.959576,41.269176 c -0.0098,0.603377 0.575258,0.881409 0.575258,0.881409 L 58.95771,42.33629 c -4.893946,-0.985482 -16.592629,-2.859625 -32.835015,-2.783473 -1.570354,0.107617 -5.151439,1.109571 -5.163119,1.712718 z m 3.353022,14.276273 c -2.79955,0.01312 -5.595489,0.02953 -8.382964,0.05545 l 0,9.9e-5 0.0033,1.447677 -1.173484,0.01312 0.0066,1.244485 1.184048,0.05807 c -1.34298,0.220812 -2.956414,1.305807 -3.054779,3.476618 0.0098,3.269061 0.01312,6.538943 0.01312,9.808103 l -1.21197,0.0033 -0.01969,-2.361569 -4.6851755,0.0033 0,5.901969 4.6323185,0.0066 -0.02953,-1.7556 1.308596,-0.02297 0.0098,9.180447 c -0.0066,1.315781 2.739048,3.634336 4.542583,3.634336 l 4.811756,-2.995032 c 1.616583,-0.107617 1.758126,0.482078 1.884346,1.076924 l 35.667571,0.318914 6.909664,-0.81031 m 4.994738,-0.585889 85.216614,-9.991675 c 4.93952,-0.487623 14.9162,-22.255511 -3.75098,-25.556727 -5.12814,-0.887479 -15.53194,4.839613 -21.44018,9.104984 -2.31314,1.954593 -1.74166,4.084194 0.0263,5.982879 l -72.209399,-8.111923 -2.12281,-0.0012 c -0.966453,1.390128 -3.158262,3.260465 -4.554559,4.053123 M 49.36027,58.361483 c -1.699757,-1.038536 -2.965602,-2.804438 -4.533856,-2.875275 -3.903936,0.0011 -7.904399,0.0066 -11.882849,0.01312 m -3.081192,0.0066 c -1.043195,0.0033 -2.082715,0.0066 -3.116396,0.0098',
|
||||
stroke: '#000',
|
||||
strokeWidth: 1,
|
||||
lineCap: 'round',
|
||||
lineJoin: 'round',
|
||||
draggable : true
|
||||
});
|
||||
|
||||
layer.add(path);
|
||||
|
||||
stage.add(layer);
|
||||
|
||||
path.cache();
|
||||
layer.draw();
|
||||
// layer.draw();
|
||||
cloneAndCompareLayer(layer, 230);
|
||||
showHit(layer)
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -404,6 +430,29 @@ suite('Path', function() {
|
||||
showHit(layer);
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test.skip('Tiger (RAWR!) cached', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var group = new Konva.Group();
|
||||
|
||||
for(var i = 0; i < tiger.length; i++) {
|
||||
var path = new Konva.Path(tiger[i]);
|
||||
group.add(path);
|
||||
}
|
||||
|
||||
group.setDraggable(true);
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
group.cache();
|
||||
layer.draw();
|
||||
|
||||
showHit(layer);
|
||||
|
||||
cloneAndCompareLayer(layer, 200);
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('Able to determine point on line some distance from another point on line', function() {
|
||||
|
||||
@@ -86,5 +86,65 @@ suite('RegularPolygon', function() {
|
||||
layer.add(poly);
|
||||
stage.add(layer);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('attr sync', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var poly = new Konva.RegularPolygon({
|
||||
x: 200,
|
||||
y: 100,
|
||||
sides: 5,
|
||||
radius: 50,
|
||||
fill: 'green',
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5,
|
||||
name: 'foobar'
|
||||
});
|
||||
|
||||
layer.add(poly);
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(poly.getWidth(), 100);
|
||||
assert.equal(poly.getHeight(), 100);
|
||||
|
||||
poly.setWidth(120);
|
||||
assert.equal(poly.radius(), 60);
|
||||
assert.equal(poly.getHeight(), 120);
|
||||
|
||||
poly.setHeight(140);
|
||||
assert.equal(poly.radius(), 70);
|
||||
assert.equal(poly.getHeight(), 140);
|
||||
});
|
||||
|
||||
test('polygon cache', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var poly = new Konva.RegularPolygon({
|
||||
x: 200,
|
||||
y: 100,
|
||||
sides: 5,
|
||||
radius: 50,
|
||||
fill: 'green',
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5,
|
||||
name: 'foobar'
|
||||
});
|
||||
poly.cache();
|
||||
layer.add(poly);
|
||||
stage.add(layer);
|
||||
|
||||
assert.deepEqual(poly.getSelfRect(), {
|
||||
x : -50,
|
||||
y : -50,
|
||||
height : 100,
|
||||
width : 100
|
||||
});
|
||||
if (!window.mochaPhantomJS) {
|
||||
cloneAndCompareLayer(layer, 50);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -53,7 +53,7 @@ suite('Star', function() {
|
||||
fill: 'green',
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5,
|
||||
lineJoin: "round",
|
||||
lineJoin: 'round',
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: [20, 20],
|
||||
@@ -72,4 +72,77 @@ suite('Star', function() {
|
||||
|
||||
star.setLineJoin('round');
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('attr sync', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var star = new Konva.Star({
|
||||
x: 200,
|
||||
y: 100,
|
||||
numPoints: 5,
|
||||
innerRadius: 30,
|
||||
outerRadius: 50,
|
||||
fill: 'green',
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5,
|
||||
lineJoin: 'round',
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: [20, 20],
|
||||
shadowOpacity: 0.5,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(star);
|
||||
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(star.getWidth(), 100);
|
||||
assert.equal(star.getHeight(), 100);
|
||||
|
||||
star.setWidth(120);
|
||||
assert.equal(star.outerRadius(), 60);
|
||||
assert.equal(star.getHeight(), 120);
|
||||
|
||||
star.setHeight(140);
|
||||
assert.equal(star.outerRadius(), 70);
|
||||
assert.equal(star.getHeight(), 140);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('star cache', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var star = new Konva.Star({
|
||||
x: 200,
|
||||
y: 100,
|
||||
numPoints: 5,
|
||||
innerRadius: 30,
|
||||
outerRadius: 50,
|
||||
fill: 'green',
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5,
|
||||
lineJoin: 'round',
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: [20, 20],
|
||||
shadowOpacity: 0.5,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(star);
|
||||
star.cache();
|
||||
stage.add(layer);
|
||||
|
||||
assert.deepEqual(star.getSelfRect(), {
|
||||
x : -50,
|
||||
y : -50,
|
||||
height : 100,
|
||||
width : 100
|
||||
});
|
||||
cloneAndCompareLayer(layer, 50);
|
||||
});
|
||||
});
|
||||
@@ -188,4 +188,31 @@ suite('TextPath', function() {
|
||||
layer.add(textpath);
|
||||
stage.add(layer);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('Render Text Along complex path cached', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var c = "M10,10 C0,0 10,150 100,100 S300,150 400,50";
|
||||
|
||||
var textpath = new Konva.TextPath({
|
||||
stroke: 'black',
|
||||
strokeWidth: 1,
|
||||
fill: 'orange',
|
||||
fontSize: 10,
|
||||
fontFamily: 'Arial',
|
||||
text: 'All the world\'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.',
|
||||
data: c,
|
||||
draggable : true
|
||||
});
|
||||
|
||||
textpath.cache();
|
||||
|
||||
layer.add(textpath);
|
||||
stage.add(layer);
|
||||
|
||||
cloneAndCompareLayer(layer,50);
|
||||
showHit(layer);
|
||||
});
|
||||
});
|
||||
@@ -26,4 +26,92 @@ suite('Arc', function() {
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,80,0,1.571,false);arc(0,0,50,1.571,0,true);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('attrs sync', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var arc = new Konva.Arc({
|
||||
x: 100,
|
||||
y: 100,
|
||||
innerRadius: 50,
|
||||
outerRadius: 80,
|
||||
angle: 90,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
name: 'myArc',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(arc);
|
||||
stage.add(layer);
|
||||
assert.equal(arc.getWidth(), 160);
|
||||
assert.equal(arc.getHeight(), 160);
|
||||
|
||||
arc.setWidth(100);
|
||||
assert.equal(arc.outerRadius(), 50);
|
||||
assert.equal(arc.getHeight(), 100);
|
||||
|
||||
arc.setHeight(120);
|
||||
assert.equal(arc.outerRadius(), 60);
|
||||
assert.equal(arc.getHeight(), 120);
|
||||
});
|
||||
|
||||
test('getSelfRect', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var arc = new Konva.Arc({
|
||||
x: 100,
|
||||
y: 100,
|
||||
innerRadius: 50,
|
||||
outerRadius: 80,
|
||||
angle: 90,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
name: 'myArc',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(arc);
|
||||
stage.add(layer);
|
||||
|
||||
assert.deepEqual(arc.getSelfRect(), {
|
||||
x : -80,
|
||||
y : -80,
|
||||
width : 160,
|
||||
height : 160
|
||||
});
|
||||
});
|
||||
|
||||
test('cache', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var arc = new Konva.Arc({
|
||||
x: 100,
|
||||
y: 100,
|
||||
innerRadius: 50,
|
||||
outerRadius: 80,
|
||||
angle: 90,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
});
|
||||
|
||||
layer.add(arc);
|
||||
stage.add(layer);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
context.beginPath();
|
||||
context.arc(100, 100, 80, 0, Math.PI / 2, false);
|
||||
context.arc(100, 100, 50, Math.PI / 2, 0, true);
|
||||
context.closePath();
|
||||
context.fillStyle = 'green';
|
||||
context.fill();
|
||||
context.lineWidth = 4;
|
||||
context.stroke();
|
||||
compareLayerAndCanvas(layer, canvas, 10);
|
||||
});
|
||||
|
||||
});
|
||||
@@ -91,4 +91,27 @@ suite('Blob', function(){
|
||||
assert.equal(blob.eventListeners.pointsChange, undefined);
|
||||
assert.equal(blob.eventListeners.tensionChange, undefined);
|
||||
});
|
||||
|
||||
test('cache', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var blob = new Konva.Line({
|
||||
x : 50,
|
||||
y : 50,
|
||||
points: [-25,50,250,-30,150,50,250,110],
|
||||
stroke: 'blue',
|
||||
strokeWidth: 10,
|
||||
draggable: true,
|
||||
fill: '#aaf',
|
||||
tension: 0.3,
|
||||
closed: true
|
||||
});
|
||||
blob.cache();
|
||||
layer.add(blob);
|
||||
stage.add(layer);
|
||||
|
||||
if (!window.mochaPhantomJS) {
|
||||
cloneAndCompareLayer(layer, 50);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -188,7 +188,6 @@ suite('Circle', function(){
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(circle.getWidth(), 140);
|
||||
assert.equal(circle.attrs.height, 140);
|
||||
assert.equal(circle.getHeight(), 140);
|
||||
|
||||
circle.setWidth(100);
|
||||
@@ -218,4 +217,55 @@ suite('Circle', function(){
|
||||
|
||||
stage.add(layer);
|
||||
});
|
||||
|
||||
test('getSelfRect', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var circle = new Konva.Circle({
|
||||
x: 100,
|
||||
y: 100,
|
||||
radius: 50,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
assert.deepEqual(circle.getSelfRect(), {
|
||||
x : -50,
|
||||
y : -50,
|
||||
width : 100,
|
||||
height : 100
|
||||
});
|
||||
});
|
||||
|
||||
test('cache', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var circle = new Konva.Circle({
|
||||
x: 100,
|
||||
y: 100,
|
||||
radius: 50,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
context.beginPath();
|
||||
context.arc(100, 100, 50, 0, Math.PI * 2, false);
|
||||
context.closePath();
|
||||
context.fillStyle = 'green';
|
||||
context.fill();
|
||||
context.lineWidth = 4;
|
||||
context.stroke();
|
||||
compareLayerAndCanvas(layer, canvas, 50);
|
||||
});
|
||||
});
|
||||
@@ -1,7 +1,7 @@
|
||||
suite('Ellipse', function(){
|
||||
|
||||
// ======================================================
|
||||
test('add ellipse', function(){
|
||||
// ======================================================
|
||||
test('add ellipse', function(){
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var ellipse = new Konva.Ellipse({
|
||||
@@ -18,5 +18,84 @@ suite('Ellipse', function(){
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();save();scale(1,0.5);arc(0,0,70,0,6.283,false);restore();closePath();fillStyle=green;fill();lineWidth=8;strokeStyle=black;stroke();restore();');
|
||||
});
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('attrs sync', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var ellipse = new Konva.Ellipse({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: {x:70, y:35},
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 8
|
||||
});
|
||||
layer.add(ellipse);
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(ellipse.getWidth(), 140);
|
||||
assert.equal(ellipse.getHeight(), 70);
|
||||
|
||||
ellipse.setWidth(100);
|
||||
assert.equal(ellipse.radiusX(), 50);
|
||||
assert.equal(ellipse.radiusY(), 35);
|
||||
|
||||
ellipse.setHeight(120);
|
||||
assert.equal(ellipse.radiusX(), 50);
|
||||
assert.equal(ellipse.radiusY(), 60);
|
||||
});
|
||||
|
||||
test('getSelfRect', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var ellipse = new Konva.Ellipse({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: {x:70, y:35},
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 8
|
||||
});
|
||||
layer.add(ellipse);
|
||||
stage.add(layer);
|
||||
|
||||
assert.deepEqual(ellipse.getSelfRect(), {
|
||||
x : -70,
|
||||
y : -35,
|
||||
width : 140,
|
||||
height : 70
|
||||
});
|
||||
});
|
||||
|
||||
test('cache', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var ellipse = new Konva.Ellipse({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: {x:70, y:35},
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 8
|
||||
});
|
||||
ellipse.cache();
|
||||
layer.add(ellipse);
|
||||
stage.add(layer);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
context.save();
|
||||
context.beginPath();
|
||||
context.scale(1, 0.5);
|
||||
context.arc(stage.getWidth() / 2, stage.getHeight(), 70, 0, Math.PI * 2, false);
|
||||
context.closePath();
|
||||
context.restore();
|
||||
context.fillStyle = 'green';
|
||||
context.fill();
|
||||
context.lineWidth = 8;
|
||||
context.stroke();
|
||||
compareLayerAndCanvas(layer, canvas, 50);
|
||||
});
|
||||
});
|
||||
@@ -312,4 +312,38 @@ suite('Image', function(){
|
||||
};
|
||||
imageObj.src = 'assets/darth-vader.jpg';
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('image caching', function(done) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var darth = new Konva.Image({
|
||||
x: 200,
|
||||
y: 60,
|
||||
image: imageObj,
|
||||
width: 100,
|
||||
height: 100,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
darth.cache();
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
assert.deepEqual(darth.getSelfRect(), {
|
||||
x : 0, y : 0, width : 100, height : 100
|
||||
});
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
context.drawImage(imageObj, 200, 60, 100, 100);
|
||||
compareLayerAndCanvas(layer, canvas, 10);
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/darth-vader.jpg';
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
@@ -205,4 +205,73 @@ suite('Line', function() {
|
||||
});
|
||||
assert.equal(shape, line1, 'first line detected');
|
||||
});
|
||||
|
||||
test('line get size', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var line = new Konva.Line({
|
||||
points: [73, 160, 340, 23, 500, 109, 500, 180],
|
||||
stroke: 'blue',
|
||||
|
||||
strokeWidth: 10
|
||||
});
|
||||
|
||||
layer.add(line);
|
||||
stage.add(layer);
|
||||
|
||||
assert.deepEqual(line.size(), {
|
||||
width : 500 - 73,
|
||||
height : 180 - 23
|
||||
});
|
||||
});
|
||||
|
||||
test('getSelfRect', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var blob = new Konva.Line({
|
||||
x : 50,
|
||||
y : 50,
|
||||
points: [-25,50,250,-30,150,50,250,110],
|
||||
stroke: 'blue',
|
||||
strokeWidth: 10,
|
||||
draggable: true,
|
||||
fill: '#aaf',
|
||||
closed: true
|
||||
});
|
||||
|
||||
layer.add(blob);
|
||||
stage.add(layer);
|
||||
|
||||
assert.deepEqual(blob.getSelfRect(), {
|
||||
x : -25,
|
||||
y : -30,
|
||||
width : 275,
|
||||
height : 140
|
||||
});
|
||||
});
|
||||
|
||||
test('line caching', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var blob = new Konva.Line({
|
||||
x : 50,
|
||||
y : 50,
|
||||
points: [-25,50,250,-30,150,50,250,110],
|
||||
stroke: 'blue',
|
||||
strokeWidth: 10,
|
||||
draggable: true,
|
||||
closed : true
|
||||
});
|
||||
|
||||
layer.add(blob);
|
||||
var layer2 = layer.clone();
|
||||
blob.cache({
|
||||
offset : 30
|
||||
});
|
||||
stage.add(layer);
|
||||
stage.add(layer2);
|
||||
layer2.hide();
|
||||
compareLayers(layer, layer2);
|
||||
});
|
||||
});
|
||||
@@ -23,7 +23,6 @@ suite('Ring', function() {
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
// test for https://github.com/ericdrowell/KonvaJS/issues/987
|
||||
test('ring attrs sync', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
@@ -31,8 +30,6 @@ suite('Ring', function() {
|
||||
name: 'ring',
|
||||
x: 30,
|
||||
y: 50,
|
||||
width: 50,
|
||||
height: 50,
|
||||
innerRadius: 15,
|
||||
outerRadius: 30,
|
||||
fill: 'green',
|
||||
@@ -43,11 +40,50 @@ suite('Ring', function() {
|
||||
layer.add(ring);
|
||||
stage.add(layer);
|
||||
|
||||
assert(ring.width(),60);
|
||||
assert(ring.height(), 60);
|
||||
|
||||
var cring = ring.clone();
|
||||
assert.equal(cring.outerRadius(), ring.outerRadius());
|
||||
ring.height(100);
|
||||
assert(ring.width(), 100);
|
||||
assert(ring.outerRadius(), 50);
|
||||
|
||||
assert.equal(ring.attrs.width, ring.outerRadius() * 2);
|
||||
ring.width(120);
|
||||
assert(ring.height(), 120);
|
||||
assert(ring.outerRadius(), 60);
|
||||
});
|
||||
|
||||
test('ring cache', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var ring = new Konva.Ring({
|
||||
name: 'ring',
|
||||
x: 30,
|
||||
y: 50,
|
||||
innerRadius: 15,
|
||||
outerRadius: 30,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(ring);
|
||||
stage.add(layer);
|
||||
|
||||
assert.deepEqual(ring.getSelfRect(), {
|
||||
x : -30,
|
||||
y : -30,
|
||||
width : 60,
|
||||
height : 60
|
||||
});
|
||||
|
||||
var layer2 = layer.clone();
|
||||
stage.add(layer2);
|
||||
layer2.hide();
|
||||
|
||||
compareLayers(layer, layer2);
|
||||
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@@ -344,5 +344,27 @@ suite('Text', function(){
|
||||
compareLayerAndCanvas(layer, canvas);
|
||||
});
|
||||
|
||||
test('text getSelfRect', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var text = new Konva.Text({
|
||||
fontSize: 50,
|
||||
y : 50,
|
||||
x : 50,
|
||||
fill: 'black',
|
||||
text: 'text'
|
||||
});
|
||||
|
||||
layer.add(text);
|
||||
stage.add(layer);
|
||||
|
||||
var rect = text.getSelfRect();
|
||||
|
||||
assert.deepEqual(rect, {
|
||||
x : 0,y : 0, width : text.width(), height : 50
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
@@ -25,4 +25,56 @@ suite('Wedge', function() {
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,1.257,false);lineTo(0,0);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
|
||||
});
|
||||
|
||||
test('attrs sync', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var wedge = new Konva.Wedge({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
angle: 180 * 0.4,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
layer.add(wedge);
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(wedge.getWidth(), 140);
|
||||
assert.equal(wedge.getHeight(), 140);
|
||||
|
||||
wedge.setWidth(100);
|
||||
assert.equal(wedge.radius(), 50);
|
||||
assert.equal(wedge.getHeight(), 100);
|
||||
|
||||
wedge.setHeight(120);
|
||||
assert.equal(wedge.radius(), 60);
|
||||
assert.equal(wedge.getHeight(), 120);
|
||||
});
|
||||
|
||||
test('getSelfRect', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var wedge = new Konva.Wedge({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
angle: 180 * 0.4,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
layer.add(wedge);
|
||||
stage.add(layer);
|
||||
|
||||
assert.deepEqual(wedge.getSelfRect(), {
|
||||
x : -70,
|
||||
y : -70,
|
||||
width : 140,
|
||||
height : 140
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user