lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed up caching now that transformsEnabled attr has been removed

Browse Source
This commit is contained in:
Eric Rowell 2014-03-09 22:59:53 -07:00
parent a2ec418fe8
commit aa7f56be26
2 changed files with 57 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/Node.js
View File

@ -150,6 +150,7 @@
width = conf.width || this.width(),
height = conf.height || this.height(),
drawBorder = conf.drawBorder || false,
layer = this.getLayer(),
cachedSceneCanvas = new Kinetic.SceneCanvas({
pixelRatio: 1,
width: width,
@ -171,13 +172,10 @@
this.clearCache();
// TODO: removing transformsEnabled property because it's weird.
// need to find another way to handle this
//this.transformsEnabled('position');
this.x(x * -1);
this.y(y * -1);
var layerApplyTrans = layer._applyTransform;
layer._applyTransform = function(shape, context) {
context.translate(x * -1, y * -1);
};
this.drawScene(cachedSceneCanvas);
this.drawHit(cachedHitCanvas);
@ -196,10 +194,8 @@
sceneContext.restore();
}
this.x(origX);
this.y(origY);
//this.transformsEnabled(origTransEnabled);
// set the _applyTransform method back to the original
layer._applyTransform = layerApplyTrans;
this._cache.canvas = {

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

@ -2770,18 +2770,62 @@ suite('Node', function() {
// document.body.appendChild(circle._cache.canvas.hit._canvas);
showHit(layer)
//console.log(layer.getContext().getTrace());
assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);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();clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);drawImage([object HTMLCanvasElement],0,0);restore();');
//console.log(circle._cache.canvas.scene.getContext().getTrace());
assert.equal(circle._cache.canvas.scene.getContext().getTrace(), '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();');
});
test('cache shape inside transformed group', function(){
var stage = addStage();
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
x: 50,
y: 50
});
var circle = new Kinetic.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);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
});
test('cache shape thats larger than stage', function(){
var stage = addStage();
var layer = new Kinetic.Layer();