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

caching mechanism no longer auto adjusts offsets. It causes too many side effects

Browse Source
This commit is contained in:
Eric Rowell 2013-12-30 14:34:57 -08:00
parent a47726eb2f
commit e1558c1b40
2 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/Node.js
View File

@ -146,6 +146,8 @@
x: x,
y: y
};
return this;
},
/*
* the default isDraggable method returns false.
@ -601,12 +603,11 @@
getAbsolutePosition: function() {
var absoluteMatrix = this.getAbsoluteTransform().getMatrix(),
absoluteTransform = new Kinetic.Transform(),
o = this.getOffset();
offset = this.offset();
// clone the matrix array
absoluteTransform.m = absoluteMatrix.slice();
absoluteTransform.translate(o.x, o.y);
absoluteTransform.translate(offset.x, offset.y);
return absoluteTransform.getTranslation();
},
@ -1012,7 +1013,6 @@
},
_getTransform: function() {
var m = new Kinetic.Transform(),
cachedCanvas = this._cache.canvas,
x = this.getX(),
y = this.getY(),
rotation = this.getRotation(),
@ -1023,16 +1023,6 @@
offsetX = this.getOffsetX(),
offsetY = this.getOffsetY();
// NOTE: the cached canvas offsets must be handled in this method
// because there are situations where we need to access the original
// offset positions, i.e. setAbsolutePosition() and drag and drop
if (cachedCanvas) {
offsetX -= cachedCanvas.x;
}
if (cachedCanvas) {
offsetY -= cachedCanvas.y;
}
if(x !== 0 || y !== 0) {
m.translate(x, y);
}

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

@ -1535,7 +1535,8 @@ suite('Node', function() {
stroke: 'black',
strokeWidth: 4,
draggable: true,
offset: 30
offsetX: 30,
offsetY: 30
//rotationDeg: 60
//rotationDeg: Math.PI / 3
});
@ -2918,6 +2919,9 @@ suite('Node', function() {
y: -74,
width: 148,
height: 148
}).offset({
x: 74,
y: 74
});
assert.notEqual(circle._cache.canvas.scene, undefined);
@ -3017,7 +3021,7 @@ suite('Node', function() {
showHit(layer);
});
test.only('cache transformed group', function(){
test('cache transformed group', function(){
var stage = addStage();
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
@ -3067,6 +3071,8 @@ suite('Node', function() {
//console.log('---before cache')
//console.log(group.getAbsoluteTransform().getTranslation())
group.cache({
x: -104,
y: -104,
@ -3074,6 +3080,13 @@ suite('Node', function() {
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();
@ -3087,9 +3100,11 @@ suite('Node', function() {
//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();');
//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(){