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

deprecated transformsEnabled property. Continued developing the new FastLayer class

Browse Source
This commit is contained in:
Eric Rowell 2014-03-09 12:41:16 -07:00
parent df9d6cabd2
commit c623666206
8 changed files with 39 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/Container.js
View File

@ -309,18 +309,19 @@
return this;
},
_drawChildren: function(canvas, drawMethod) {
var context = canvas && canvas.getContext(),
var layer = this.getLayer(),
context = canvas && canvas.getContext(),
clipWidth = this.getClipWidth(),
clipHeight = this.getClipHeight(),
hasClip = clipWidth && clipHeight,
clipX, clipY;
if (hasClip) {
if (hasClip && layer) {
clipX = this.getClipX();
clipY = this.getClipY();
context.save();
context._applyTransform(this);
layer._applyTransform(this, context);
context.beginPath();
context.rect(clipX, clipY, clipWidth, clipHeight);
context.clip();

13
src/Context.js
View File

@ -222,19 +222,6 @@
this.setAttr('lineJoin', lineJoin);
}
},
_applyTransform: function(shape) {
var transformsEnabled = shape.getTransformsEnabled(),
m;
if (transformsEnabled === 'all') {
m = shape.getAbsoluteTransform().getMatrix();
this.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
else if (transformsEnabled === 'position') {
// best performance for position only transforms
this.translate(shape.getX(), shape.getY());
}
},
setAttr: function(attr, val) {
this._context[attr] = val;
},

24
src/FastLayer.js
View File

@ -33,22 +33,22 @@
var layer = this.getLayer(),
canvas = can || (layer && layer.getCanvas());
this._fire(BEFORE_DRAW, {
node: this
});
if(this.getClearBeforeDraw()) {
canvas.getContext().clear();
}
Kinetic.Container.prototype.drawScene.call(this, canvas);
this._fire(DRAW, {
node: this
});
return this;
},
_applyTransform: function(shape, context) {
var m = shape.getTransform().getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
},
draw: function() {
this.drawScene();
return this;
},
/**
* get layer canvas
* @method
@ -79,11 +79,7 @@
* layer.clear(0, 0, 100, 100);
*/
clear: function(bounds) {
var context = this.getContext(),
hitContext = this.getHitCanvas().getContext();
context.clear(bounds);
hitContext.clear(bounds);
this.getContext().clear(bounds);
return this;
},
// extend Node.prototype.setVisible
@ -91,11 +87,9 @@
Kinetic.Node.prototype.setVisible.call(this, visible);
if(visible) {
this.getCanvas()._canvas.style.display = 'block';
this.hitCanvas._canvas.style.display = 'block';
}
else {
this.getCanvas()._canvas.style.display = 'none';
this.hitCanvas._canvas.style.display = 'none';
}
return this;
},

11
src/Layer.js
View File

@ -123,6 +123,10 @@
return this;
},
_applyTransform: function(shape, context) {
var m = shape.getAbsoluteTransform().getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
},
drawHit: function(can) {
var layer = this.getLayer(),
canvas = can || (layer && layer.hitCanvas);
@ -172,11 +176,8 @@
* layer.clear(0, 0, 100, 100);
*/
clear: function(bounds) {
var context = this.getContext(),
hitContext = this.getHitCanvas().getContext();
context.clear(bounds);
hitContext.clear(bounds);
this.getContext().clear(bounds);
this.getHitCanvas().getContext().clear(bounds);
return this;
},
// extend Node.prototype.setVisible

14
src/Node.js
View File

@ -171,9 +171,13 @@
this.clearCache();
this.transformsEnabled('position');
// 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);
this.drawScene(cachedSceneCanvas);
this.drawHit(cachedHitCanvas);
@ -192,9 +196,11 @@
sceneContext.restore();
}
this.x(origX);
this.y(origY);
this.transformsEnabled(origTransEnabled);
//this.transformsEnabled(origTransEnabled);
this._cache.canvas = {
scene: cachedSceneCanvas,
@ -206,7 +212,7 @@
},
_drawCachedSceneCanvas: function(context) {
context.save();
context._applyTransform(this);
this.getLayer()._applyTransform(this, context);
context.drawImage(this._getCachedSceneCanvas()._canvas, 0, 0);
context.restore();
},
@ -252,7 +258,7 @@
hitCanvas = cachedCanvas.hit;
context.save();
context._applyTransform(this);
this.getLayer()._applyTransform(this, context);
context.drawImage(hitCanvas._canvas, 0, 0);
context.restore();
},

12
src/Shape.js
View File

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

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

@ -2598,90 +2598,6 @@ suite('Node', function() {
assert.equal(rect.shouldDrawHit(), false);
});
// ======================================================
test('transformEnabled methods', function(){
var stage = addStage();
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: 100,
y: 100,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
group.add(circle);
layer.add(group);
stage.add(layer);
assert.equal(circle.transformsEnabled(), 'all');
circle.transformsEnabled('position');
assert.equal(circle.transformsEnabled(), 'position');
layer.draw();
});
// ======================================================
test('transformEnabled context tracing', function(){
var stage = addStage();
stage.setX(100);
var layer = new Kinetic.Layer({
x: 100
});
var group = new Kinetic.Group({
x: 100
});
var circle = new Kinetic.Circle({
x: 100,
y: 100,
radius: 40,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
group.add(circle);
layer.add(group);
stage.add(layer);
assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,400,100);beginPath();arc(0,0,40,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
stage.transformsEnabled('none');
layer.getContext().clearTrace();
stage.draw();
assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,300,100);beginPath();arc(0,0,40,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
layer.transformsEnabled('none');
layer.getContext().clearTrace();
stage.draw();
assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,200,100);beginPath();arc(0,0,40,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
group.transformsEnabled('none');
layer.getContext().clearTrace();
stage.draw();
assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,40,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
// disabling a shape transform disables all transforms but x and y. In this case, the Kinetic.Context uses translate instead of transform
circle.transformsEnabled('position');
layer.getContext().clearTrace();
stage.draw();
assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();translate(100,100);beginPath();arc(0,0,40,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
//console.log(layer.getContext().getTrace());
});
// ======================================================
@ -2887,7 +2803,7 @@ suite('Node', function() {
//console.log(circle._cache.canvas.scene.getContext().getTrace());
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();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();');
});
@ -2970,7 +2886,7 @@ suite('Node', function() {
//console.log(circle._cache.canvas.scene.getContext().getTrace());
// make sure the border rectangle was drawn onto the cached scene canvas
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();save();beginPath();rect(0,0,148,148);closePath();strokeStyle=red;lineWidth=5;stroke();restore();');
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();save();beginPath();rect(0,0,148,148);closePath();strokeStyle=red;lineWidth=5;stroke();restore();');
});
test('cache group', function(){

2
test/unit/filters/Blur-test.js
View File

@ -308,7 +308,7 @@ suite('Blur', function() {
//console.log(darth._cache.canvas.hit.getContext().getTrace());
assert.equal(darth._cache.canvas.hit.getContext().getTrace(true), 'save();translate();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();clearRect();getImageData();putImageData();');
assert.equal(darth._cache.canvas.hit.getContext().getTrace(true), 'save();transform();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();clearRect();getImageData();putImageData();');