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

new transformsEnabled property which yields absolute best rendering performance

Browse Source
This commit is contained in:
Eric Rowell 2013-12-10 23:28:46 -08:00
parent 44b5b63263
commit 6d31f6ed08
6 changed files with 180 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/Context.js
View File

@ -224,16 +224,24 @@
}
},
_applyAncestorTransforms: function(shape) {
var stage = shape.getStage(),
m;
var m;
if (stage && stage.isNestedTransformsEnabled()) {
m = shape.getAbsoluteTransform().getMatrix();
if (shape.isTransformsEnabled()) {
if (shape.isAncestorTransformsEnabled()) {
// poor performance
m = shape.getAbsoluteTransform().getMatrix();
}
else {
// better performance
m = shape.getTransform().getMatrix();
}
this.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
else {
m = shape.getTransform().getMatrix();
// best performance
this.translate(shape.getX(), shape.getY());
}
this.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
},
_clip: function(container) {
var clipX = container.getClipX(),

82
src/Node.js
View File

@ -1344,6 +1344,46 @@
this.drawScene();
this.drawHit();
return this;
},
/**
* enable ancestor transforms
* @method
* @memberof Kinetic.Node.prototype
* @returns {Node}
*/
enableAncestorTransforms: function() {
this.setAncestorTransformsEnabled(true);
return this;
},
/**
* disable ancestor transforms
* @method
* @memberof Kinetic.Node.prototype
* @returns {Node}
*/
disableAncestorTransforms: function() {
this.setAncestorTransformsEnabled(false);
return this;
},
/**
* enable transforms
* @method
* @memberof Kinetic.Node.prototype
* @returns {Node}
*/
enableTransforms: function() {
this.setTransformsEnabled(true);
return this;
},
/**
* disable transforms
* @method
* @memberof Kinetic.Node.prototype
* @returns {Node}
*/
disableTransforms: function() {
this.setTransformsEnabled(false);
return this;
}
});
@ -1743,6 +1783,48 @@
* @returns {Boolean}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'ancestorTransformsEnabled', true);
/**
* enable/disable ancestor transforms
* @name setAncestorTransformsEnabled
* @method
* @memberof Kinetic.Node.prototype
* @param {Boolean} enabled
* @returns {Node}
*/
/**
* determine if ancestor transforms are enabled
* @name getAncestorTransformsEnabled
* @method
* @memberof Kinetic.Node.prototype
* @returns {Boolean}
*/
Kinetic.Node.prototype.isAncestorTransformsEnabled = Kinetic.Node.prototype.getAncestorTransformsEnabled;
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'transformsEnabled', true);
/**
* enable/disable transforms
* @name setTransformsEnabled
* @method
* @memberof Kinetic.Node.prototype
* @param {Boolean} enabled
* @returns {Node}
*/
/**
* determine if transforms are enabled
* @name getTransformsEnabled
* @method
* @memberof Kinetic.Node.prototype
* @returns {Boolean}
*/
Kinetic.Node.prototype.isTransformsEnabled = Kinetic.Node.prototype.getTransformsEnabled;
Kinetic.Collection.mapMethods([
'on',
'off',

40
src/Stage.js
View File

@ -643,26 +643,6 @@
baseEvent = types[n];
this.content.addEventListener(baseEvent, handler, false);
}
},
/**
* enable nested transforms
* @method
* @memberof Kinetic.Stage.prototype
* @returns {Node}
*/
enableNestedTransforms: function() {
this.setNestedTransformsEnabled(true);
return this;
},
/**
* disable nested transforms
* @method
* @memberof Kinetic.Stage.prototype
* @returns {Node}
*/
disableNestedTransforms: function() {
this.setNestedTransformsEnabled(false);
return this;
}
});
Kinetic.Util.extend(Kinetic.Stage, Kinetic.Container);
@ -677,24 +657,4 @@
* @memberof Kinetic.Stage.prototype
*/
Kinetic.Factory.addGetterSetter(Kinetic.Stage, 'nestedTransformsEnabled', true);
/**
* enable/disable nested transforms
* @name setNestedTransformsEnabled
* @method
* @memberof Kinetic.Stage.prototype
* @param {Boolean} enabled
* @returns {Node}
*/
/**
* determine if nested transforms are enabled
* @name getNestedTransformsEnabled
* @method
* @memberof Kinetic.Stage.prototype
* @returns {Boolean}
*/
Kinetic.Stage.prototype.isNestedTransformsEnabled = Kinetic.Stage.prototype.getNestedTransformsEnabled;
})();

31
test/performance/common/random-squares.js
View File

@ -85,24 +85,25 @@
function make_shape(color) {
if (VERSION === 'new') {
// return new Kinetic.Rect({
// fill: color,
// width: 10,
// height: 10
// });
return new Kinetic.Rect({
fill: color,
width: 10,
height: 10,
transformsEnabled: false
});
return new Kinetic.Shape({
drawFunc: function(context) {
var _context = context._context;
_context.beginPath();
_context.rect(0, 0, 10, 10);
_context.closePath();
_context.fillStyle = 'red';
_context.fill();
}
});
// return new Kinetic.Shape({
// drawFunc: function(context) {
// var _context = context._context;
// _context.beginPath();
// _context.rect(0, 0, 10, 10);
// _context.closePath();
// _context.fillStyle = 'red';
// _context.fill();
// }
// });
} else {

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

@ -2649,5 +2649,73 @@ suite('Node', function() {
assert.equal(rect.shouldDrawHit(), false);
});
// ======================================================
test('ancestorTransformEnabled', 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.isAncestorTransformsEnabled(), true);
circle.disableAncestorTransforms();
assert.equal(circle.isAncestorTransformsEnabled(), false);
circle.enableAncestorTransforms();
assert.equal(circle.isAncestorTransformsEnabled(), true);
});
// ======================================================
test('transformEnabled', 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.isTransformsEnabled(), true);
circle.disableTransforms();
assert.equal(circle.isTransformsEnabled(), false);
layer.draw();
circle.enableTransforms();
assert.equal(circle.isTransformsEnabled(), true);
});
});

32
test/unit/Stage-test.js
View File

@ -428,36 +428,4 @@ suite('Stage', function() {
//console.log(stage.getStage());
});
// ======================================================
test('stage.nestedTransformEnabled', 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(stage.isNestedTransformsEnabled(), true);
stage.disableNestedTransforms();
assert.equal(stage.isNestedTransformsEnabled(), false);
stage.enableNestedTransforms();
assert.equal(stage.isNestedTransformsEnabled(), true);
});
});