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

refactored cache method to work better with containers and also fast layers

Browse Source
This commit is contained in:
Eric Rowell 2014-03-22 00:13:05 -07:00
parent 386971ce70
commit 59a571c635
9 changed files with 150 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/Container.js
View File

@ -282,7 +282,7 @@
child.index = n;
});
},
drawScene: function(can) {
drawScene: function(can, top) {
var layer = this.getLayer(),
canvas = can || (layer && layer.getCanvas()),
context = canvas && canvas.getContext(),
@ -294,12 +294,12 @@
this._drawCachedSceneCanvas(context);
}
else {
this._drawChildren(canvas, 'drawScene');
this._drawChildren(canvas, 'drawScene', top);
}
}
return this;
},
drawHit: function(can) {
drawHit: function(can, top) {
var layer = this.getLayer(),
canvas = can || (layer && layer.hitCanvas),
context = canvas && canvas.getContext(),
@ -311,12 +311,12 @@
this._drawCachedHitCanvas(context);
}
else {
this._drawChildren(canvas, 'drawHit');
this._drawChildren(canvas, 'drawHit', top);
}
}
return this;
},
_drawChildren: function(canvas, drawMethod) {
_drawChildren: function(canvas, drawMethod, top) {
var layer = this.getLayer(),
context = canvas && canvas.getContext(),
clipWidth = this.getClipWidth(),
@ -337,7 +337,7 @@
}
this.children.each(function(child) {
child[drawMethod](canvas);
child[drawMethod](canvas, top);
});
if (hasClip) {

8
src/FastLayer.js
View File

@ -41,9 +41,11 @@
// the apply transform method is handled by the Layer and FastLayer class
// because it is up to the layer to decide if an absolute or relative transform
// should be used
_applyTransform: function(shape, context) {
var m = shape.getTransform().getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
_applyTransform: function(shape, context, top) {
if (!top || top._id !== this._id) {
var m = shape.getTransform().getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
},
draw: function() {
this.drawScene();

12
src/Layer.js
View File

@ -100,7 +100,7 @@
return {};
}
},
drawScene: function(can) {
drawScene: function(can, top) {
var layer = this.getLayer(),
canvas = can || (layer && layer.getCanvas());
@ -112,7 +112,7 @@
canvas.getContext().clear();
}
Kinetic.Container.prototype.drawScene.call(this, canvas);
Kinetic.Container.prototype.drawScene.call(this, canvas, top);
this._fire(DRAW, {
node: this
@ -123,11 +123,11 @@
// the apply transform method is handled by the Layer and FastLayer class
// because it is up to the layer to decide if an absolute or relative transform
// should be used
_applyTransform: function(shape, context) {
var m = shape.getAbsoluteTransform().getMatrix();
_applyTransform: function(shape, context, top) {
var m = shape.getAbsoluteTransform(top).getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
},
drawHit: function(can) {
drawHit: function(can, top) {
var layer = this.getLayer(),
canvas = can || (layer && layer.hitCanvas);
@ -135,7 +135,7 @@
layer.getHitCanvas().getContext().clear();
}
Kinetic.Container.prototype.drawHit.call(this, canvas);
Kinetic.Container.prototype.drawHit.call(this, canvas, top);
return this;
},
/**

66
src/Node.js
View File

@ -172,22 +172,25 @@
origTransEnabled = this.transformsEnabled(),
origX = this.x(),
origY = this.y(),
sceneContext;
sceneContext = cachedSceneCanvas.getContext(),
hitContext = cachedHitCanvas.getContext();
this.clearCache();
sceneContext.save();
hitContext.save();
var layerApplyTrans = layer._applyTransform;
layer._applyTransform = function(shape, context) {
context.translate(x * -1, y * -1);
};
sceneContext.translate(x * -1, y * -1);
hitContext.translate(x * -1, y * -1);
this.drawScene(cachedSceneCanvas);
this.drawHit(cachedHitCanvas);
if (this.nodeType === 'Shape') {
sceneContext.translate(this.x() * -1, this.y() * -1);
hitContext.translate(this.x() * -1, this.y() * -1);
}
// this will draw a red border around the cached box for
// debugging purposes
if (drawBorder) {
sceneContext = cachedSceneCanvas.getContext();
if (drawBorder) {
sceneContext.save();
sceneContext.beginPath();
sceneContext.rect(0, 0, width, height);
@ -197,10 +200,12 @@
sceneContext.stroke();
sceneContext.restore();
}
// set the _applyTransform method back to the original
layer._applyTransform = layerApplyTrans;
this.drawScene(cachedSceneCanvas, this);
this.drawHit(cachedHitCanvas, this);
sceneContext.restore();
hitContext.restore();
this._cache.canvas = {
scene: cachedSceneCanvas,
@ -848,16 +853,22 @@
this.setPosition({x:x, y:y});
return this;
},
_eachAncestorReverse: function(func, includeSelf) {
_eachAncestorReverse: function(func, top) {
var family = [],
parent = this.getParent(),
len, n;
// build family by traversing ancestors
if(includeSelf) {
family.unshift(this);
// if top node is defined, and this node is top node,
// there's no need to build a family tree. just execute
// func with this because it will be the only node
if (top && top._id === this._id) {
func(this);
return true;
}
while(parent) {
family.unshift(this);
while(parent && (!top || parent._id !== top._id)) {
family.unshift(parent);
parent = parent.parent;
}
@ -1126,10 +1137,17 @@
* @memberof Kinetic.Node.prototype
* @returns {Kinetic.Transform}
*/
getAbsoluteTransform: function() {
return this._getCache(ABSOLUTE_TRANSFORM, this._getAbsoluteTransform);
getAbsoluteTransform: function(top) {
// if using an argument, we can't cache the result.
if (top) {
return this._getAbsoluteTransform(top);
}
// if no argument, we can cache the result
else {
return this._getCache(ABSOLUTE_TRANSFORM, this._getAbsoluteTransform);
}
},
_getAbsoluteTransform: function() {
_getAbsoluteTransform: function(top) {
var at = new Kinetic.Transform(),
transformsEnabled, trans;
@ -1144,7 +1162,7 @@
else if (transformsEnabled === 'position') {
at.translate(node.x(), node.y());
}
}, true);
}, top);
return at;
},
/**
@ -1516,9 +1534,9 @@
* @memberof Kinetic.Node.prototype
* @returns {Kinetic.Node}
*/
draw: function() {
this.drawScene();
this.drawHit();
draw: function(top) {
this.drawScene(top);
this.drawHit(top);
return this;
}
});

10
src/Shape.js
View File

@ -132,7 +132,7 @@
_useBufferCanvas: function() {
return (this.hasShadow() || this.getAbsoluteOpacity() !== 1) && this.hasFill() && this.hasStroke() && this.getStage();
},
drawScene: function(can) {
drawScene: function(can, top) {
var layer = this.getLayer(),
canvas = can || layer.getCanvas(),
context = canvas.getContext(),
@ -155,7 +155,7 @@
bufferContext.clear();
bufferContext.save();
bufferContext._applyLineJoin(this);
layer._applyTransform(this, bufferContext);
layer._applyTransform(this, bufferContext, top);
drawFunc.call(this, bufferContext);
bufferContext.restore();
@ -173,7 +173,7 @@
// if buffer canvas is not needed
else {
context._applyLineJoin(this);
layer._applyTransform(this, context);
layer._applyTransform(this, context, top);
if (hasShadow) {
context.save();
@ -191,7 +191,7 @@
return this;
},
drawHit: function(can) {
drawHit: function(can, top) {
var layer = this.getLayer(),
canvas = can || layer.hitCanvas,
context = canvas.getContext(),
@ -207,7 +207,7 @@
else if (drawFunc) {
context.save();
context._applyLineJoin(this);
layer._applyTransform(this, context);
layer._applyTransform(this, context, top);
drawFunc.call(this, context);
context.restore();

1
test/runner.html
View File

@ -49,6 +49,7 @@
<script src="unit/Container-test.js"></script>
<script src="unit/Stage-test.js"></script>
<script src="unit/Layer-test.js"></script>
<script src="unit/Group-test.js"></script>
<script src="unit/FastLayer-test.js"></script>
<script src="unit/Shape-test.js"></script>
<script src="unit/Collection-test.js"></script>

34
test/unit/FastLayer-test.js
View File

@ -21,4 +21,38 @@ suite('FastLayer', function() {
});
test('cache shape on fast layer', function(){
var stage = addStage();
var layer = new Kinetic.FastLayer();
var circle = new Kinetic.Circle({
x: 74,
y: 74,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle'
});
layer.add(circle);
stage.add(layer);
circle.cache({
x: -74,
y: -74,
width: 148,
height: 148
}).offset({
x: 74,
y: 74
});
layer.draw();
});
});

50
test/unit/Group-test.js Normal file
View File

@ -0,0 +1,50 @@
suite('Group', function() {
// ======================================================
test('cache group with text', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
draggable : true,
x: 100,
y: 40
});
var text = new Kinetic.Text({
text : "some text",
fontSize: 20,
fill: "black",
y : 50
});
var rect = new Kinetic.Rect({
height : 100,
width : 100,
stroke : "#00B80C",
strokeWidth: 10,
cornerRadius: 1
});
group.add(text);
group.add(rect);
layer.add(group);
stage.add(layer);
group.cache({
x: -5,
y: -5,
width : 110,
height : 110,
drawBorder: true
}).offsetX(5).offsetY(5);
stage.draw();
});
});

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

@ -2860,7 +2860,7 @@ suite('Node', function() {
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();');
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(){