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 perfectDrawEnabled property for shape

Browse Source
This commit is contained in:
lavrton 2015-02-09 09:52:42 +07:00
parent da59e1581c
commit 56f76005d7
5 changed files with 91 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -6,6 +6,7 @@
* performance optimization (remove some unnecessary draws)
* more expected drawing when shape has opacity, stroke and shadow
* `scale` now affect to `shadowOffset`
* new `perfectDrawEnabled` property for shape. See [http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html](http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html)
## 0.8.0 2015-02-04

66
konva.js
View File

@ -8191,8 +8191,8 @@ var Konva = {};
},
_useBufferCanvas: function() {
// return false;
return ((this.getAbsoluteOpacity() !== 1) && this.hasFill() && this.hasStroke()) ||
this.hasShadow() && (this.getAbsoluteOpacity() !== 1) && this.hasFill() && this.hasStroke() && this.getStage();
return (this.perfectDrawEnabled() && (this.getAbsoluteOpacity() !== 1) && this.hasFill() && this.hasStroke() && this.getStage()) ||
(this.perfectDrawEnabled() && this.hasShadow() && (this.getAbsoluteOpacity() !== 1) && this.hasFill() && this.hasStroke() && this.getStage());
},
drawScene: function(can, top) {
var layer = this.getLayer(),
@ -8516,6 +8516,25 @@ var Konva = {};
* shape.strokeHitEnabled();
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'perfectDrawEnabled', true);
/**
* get/set perfectDrawEnabled. If a shape has fill, stroke and opacity you may set `perfectDrawEnabled` to improve performance.
* See http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html for more information.
* Default value is true
* @name perfectDrawEnabled
* @method
* @memberof Konva.Shape.prototype
* @param {Boolean} perfectDrawEnabled
* @returns {Boolean}
* @example
* // get perfectDrawEnabled
* var perfectDrawEnabled = shape.perfectDrawEnabled();
*
* // set perfectDrawEnabled
* shape.perfectDrawEnabled();
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'lineJoin');
/**
@ -10336,7 +10355,6 @@ var Konva = {};
*/
clear: function(bounds) {
this.getContext().clear(bounds);
this.getHitCanvas().getContext().clear(bounds);
return this;
},
clearHitCache: function() {
@ -10668,26 +10686,8 @@ var Konva = {};
this.imageData = null; // Clear imageData cache
return this;
},
/**
* clear scene and hit canvas contexts tied to the layer
* @method
* @memberof Konva.Layer.prototype
* @param {Object} [bounds]
* @param {Number} [bounds.x]
* @param {Number} [bounds.y]
* @param {Number} [bounds.width]
* @param {Number} [bounds.height]
* @example
* layer.clear();
* layer.clear({
* x : 0,
* y : 0,
* width : 100,
* height : 100
* });
*/
clear: function(bounds) {
this.getContext().clear(bounds);
Konva.BaseLayer.prototype.clear.call(this, bounds);
this.getHitCanvas().getContext().clear(bounds);
this.imageData = null; // Clear getImageData cache
return this;
@ -10805,28 +10805,6 @@ var Konva = {};
this.drawScene();
return this;
},
/**
* clear scene and hit canvas contexts tied to the layer
* @method
* @memberof Konva.FastLayer.prototype
* @param {Object} [bounds]
* @param {Number} [bounds.x]
* @param {Number} [bounds.y]
* @param {Number} [bounds.width]
* @param {Number} [bounds.height]
* @example
* layer.clear();
* layer.clear({
* x : 0,
* y : 0,
* width : 100,
* height : 100
* });
*/
clear: function(bounds) {
this.getContext().clear(bounds);
return this;
},
// extend Node.prototype.setVisible
setVisible: function(visible) {
Konva.Node.prototype.setVisible.call(this, visible);

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

23
src/Shape.js
View File

@ -144,8 +144,8 @@
},
_useBufferCanvas: function() {
// return false;
return ((this.getAbsoluteOpacity() !== 1) && this.hasFill() && this.hasStroke()) ||
this.hasShadow() && (this.getAbsoluteOpacity() !== 1) && this.hasFill() && this.hasStroke() && this.getStage();
return (this.perfectDrawEnabled() && (this.getAbsoluteOpacity() !== 1) && this.hasFill() && this.hasStroke() && this.getStage()) ||
(this.perfectDrawEnabled() && this.hasShadow() && (this.getAbsoluteOpacity() !== 1) && this.hasFill() && this.hasStroke() && this.getStage());
},
drawScene: function(can, top) {
var layer = this.getLayer(),
@ -469,6 +469,25 @@
* shape.strokeHitEnabled();
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'perfectDrawEnabled', true);
/**
* get/set perfectDrawEnabled. If a shape has fill, stroke and opacity you may set `perfectDrawEnabled` to improve performance.
* See http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html for more information.
* Default value is true
* @name perfectDrawEnabled
* @method
* @memberof Konva.Shape.prototype
* @param {Boolean} perfectDrawEnabled
* @returns {Boolean}
* @example
* // get perfectDrawEnabled
* var perfectDrawEnabled = shape.perfectDrawEnabled();
*
* // set perfectDrawEnabled
* shape.perfectDrawEnabled();
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'lineJoin');
/**

45
test/unit/Shape-test.js
View File

@ -1078,4 +1078,49 @@ suite('Shape', function() {
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(0.25,0,0,0.25,100,100);save();shadowColor=rgba(0,0,0,1);shadowBlur=0;shadowOffsetX=5;shadowOffsetY=5;beginPath();rect(0,0,200,200);closePath();fillStyle=green;fill();restore();restore();');
});
test('optional disable buffer canvas', function() {
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 100,
y: 50,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 10,
opacity : 0.5,
perfectDrawEnabled : false
});
layer.add(rect);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.globalAlpha = 0.5;
// stroke
context.beginPath();
context.rect(100, 50, 100, 50);
context.closePath();
context.lineWidth = 10;
context.strokeStyle = 'black';
context.fillStyle = 'green';
context.fill();
context.stroke();
compareLayerAndCanvas(layer, canvas, 10);
var trace = layer.getContext().getTrace();
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);globalAlpha=0.5;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;strokeStyle=black;stroke();restore();');
});
});