lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-03-03 16:58:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

new graph caching mechanism now supports containers as well. added test

Browse Source
This commit is contained in:
Eric Rowell
2013-12-29 19:30:44 -08:00
parent 90b07cea05
commit 0899cdb1a3
2 changed files with 41 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/Container.js
View File

@@ -239,26 +239,35 @@
}); });
}, },
drawScene: function(can) { drawScene: function(can) {
var layer = this.getLayer(),
canvas = can || (layer && layer.getCanvas()),
cachedCanvas = this._cache.canvas,
cachedSceneCanvas = cachedCanvas && cachedCanvas.scene;
if (this.isVisible()) { if (this.isVisible()) {
this._draw(can, 'drawScene'); this._draw(canvas, cachedSceneCanvas, 'drawScene');
} }
return this; return this;
}, },
drawHit: function(can) { drawHit: function(can) {
var layer = this.getLayer(),
canvas = can || (layer && layer.hitCanvas),
cachedCanvas = this._cache.canvas,
cachedHitCanvas = cachedCanvas && cachedCanvas.hit;
if (this.shouldDrawHit()) { if (this.shouldDrawHit()) {
this._draw(can, 'drawHit'); this._draw(canvas, cachedHitCanvas, 'drawHit');
} }
return this; return this;
}, },
_draw: function(can, method) { _draw: function(canvas, cachedCanvas, drawMethod) {
var clipWidth = this.getClipWidth(), var context = canvas && canvas.getContext(),
clipWidth = this.getClipWidth(),
clipHeight = this.getClipHeight(), clipHeight = this.getClipHeight(),
hasClip = clipWidth && clipHeight, hasClip = clipWidth && clipHeight,
canvas, context, clipX, clipY; context, clipX, clipY;
if (hasClip) { if (hasClip) {
canvas = can || this.getLayer().hitCanvas;
context = canvas.getContext();
clipX = this.getClipX(); clipX = this.getClipX();
clipY = this.getClipY(); clipY = this.getClipY();
@@ -270,9 +279,17 @@
context.reset(); context.reset();
} }
if (cachedCanvas) {
context.save();
context._applyTransform(this);
context.drawImage(cachedCanvas._canvas, 0, 0);
context.restore();
}
else {
this.children.each(function(child) { this.children.each(function(child) {
child[method](canvas); child[drawMethod](canvas);
}); });
}
if (hasClip) { if (hasClip) {
context.restore(); context.restore();

16
test/unit/Node-test.js
View File

@@ -2990,18 +2990,30 @@ suite('Node', function() {
layer.add(group); layer.add(group);
stage.add(layer); stage.add(layer);
//console.log('---before cache')
assert.equal(group._cache.canvas, undefined); assert.equal(group._cache.canvas, undefined);
group.cache({ group.cache({
width: 100, width: 80,
height: 100 height: 80
}); });
assert.notEqual(group._cache.canvas.scene, undefined); assert.notEqual(group._cache.canvas.scene, undefined);
assert.notEqual(group._cache.canvas.hit, undefined); assert.notEqual(group._cache.canvas.hit, undefined);
//console.log('---before first draw')
layer.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();');
}); });
}); });