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

added support for cached node with transformed ancestors

Browse Source
This commit is contained in:
Eric Rowell 2013-12-29 21:40:37 -08:00
parent c39726101f
commit a47726eb2f
3 changed files with 88 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Container.js
View File

@ -265,7 +265,7 @@
clipWidth = this.getClipWidth(),
clipHeight = this.getClipHeight(),
hasClip = clipWidth && clipHeight,
context, clipX, clipY;
clipX, clipY;
if (hasClip) {
clipX = this.getClipX();

19
src/Node.js
View File

@ -984,17 +984,22 @@
return this._getCache(ABSOLUTE_TRANSFORM, this._getAbsoluteTransform);
},
_getAbsoluteTransform: function() {
// absolute transform
var am = new Kinetic.Transform(),
m;
var at = new Kinetic.Transform(),
transformsEnabled, trans;
// start with stage and traverse downwards to self
this._eachAncestorReverse(function(node) {
if (node.transformsEnabled() === 'all') {
m = node.getTransform();
am.multiply(m);
transformsEnabled = node.transformsEnabled();
trans = node.getTransform();
if (transformsEnabled === 'all') {
at.multiply(trans);
}
else if (transformsEnabled === 'position') {
at.translate(node.x(), node.y());
}
}, true);
return am;
return at;
},
/**
* get transform of the node

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

@ -3017,6 +3017,81 @@ suite('Node', function() {
showHit(layer);
});
test.only('cache transformed group', function(){
var stage = addStage();
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
x: 100,
y: 100,
draggable: true,
rotationDeg: 20,
scaleX: 2,
scaleY: 2
});
var top = new Kinetic.Circle({
x: 0,
y: -70,
radius: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
var right = new Kinetic.Circle({
x: 70,
y: 0,
radius: 30,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
var bottom = new Kinetic.Circle({
x: 0,
y: 70,
radius: 30,
fill: 'blue',
stroke: 'black',
strokeWidth: 4
});
var left = new Kinetic.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')
group.cache({
x: -104,
y: -104,
width: 208,
height: 208
});
//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 Kinetic.Layer({