lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

improve image drawing performance

Browse Source
This commit is contained in:
Лаврёнов Антон 2014-05-04 18:15:35 +08:00
parent bbf1025375
commit a0b98bded0
5 changed files with 43 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
kinetic.js
View File

@ -4,7 +4,7 @@
* http://www.kineticjs.com/ * http://www.kineticjs.com/
* Copyright 2013, Eric Rowell * Copyright 2013, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses. * Licensed under the MIT or GPL Version 2 licenses.
* Date: 2014-05-03 * Date: 2014-05-05
* *
* Copyright (C) 2011 - 2013 by Eric Rowell * Copyright (C) 2011 - 2013 by Eric Rowell
* *
@ -2417,6 +2417,8 @@ var Kinetic = {};
sceneContext = cachedSceneCanvas.getContext(), sceneContext = cachedSceneCanvas.getContext(),
hitContext = cachedHitCanvas.getContext(); hitContext = cachedHitCanvas.getContext();
cachedHitCanvas.isCache = true;
this.clearCache(); this.clearCache();
sceneContext.save(); sceneContext.save();
@ -2438,7 +2440,8 @@ var Kinetic = {};
sceneContext.translate(x * -1, y * -1); sceneContext.translate(x * -1, y * -1);
hitContext.translate(x * -1, y * -1); hitContext.translate(x * -1, y * -1);
if (this.nodeType === 'Shape') { // don't need to translate canvas if shape is not added to layer
if (this.nodeType === 'Shape' && layer) {
sceneContext.translate(this.x() * -1, this.y() * -1); sceneContext.translate(this.x() * -1, this.y() * -1);
hitContext.translate(this.x() * -1, this.y() * -1); hitContext.translate(this.x() * -1, this.y() * -1);
} }
@ -2880,9 +2883,10 @@ var Kinetic = {};
* @memberof Kinetic.Node.prototype * @memberof Kinetic.Node.prototype
* @returns {Boolean} * @returns {Boolean}
*/ */
shouldDrawHit: function() { shouldDrawHit: function(canvas) {
var layer = this.getLayer(); var layer = this.getLayer();
return layer && layer.hitGraphEnabled() && this.isListening() && this.isVisible() && !Kinetic.isDragging(); return ((canvas && canvas.isCache) || (layer && layer.hitGraphEnabled()))
&& this.isListening() && this.isVisible() && !Kinetic.isDragging();
}, },
/** /**
* show node * show node
@ -7600,7 +7604,7 @@ var Kinetic = {};
cachedCanvas = this._cache.canvas, cachedCanvas = this._cache.canvas,
cachedHitCanvas = cachedCanvas && cachedCanvas.hit; cachedHitCanvas = cachedCanvas && cachedCanvas.hit;
if (this.shouldDrawHit()) { if (this.shouldDrawHit(canvas)) {
if (cachedHitCanvas) { if (cachedHitCanvas) {
this._drawCachedHitCanvas(context); this._drawCachedHitCanvas(context);
} }
@ -7940,7 +7944,7 @@ var Kinetic = {};
cachedCanvas = this._cache.canvas, cachedCanvas = this._cache.canvas,
cachedHitCanvas = cachedCanvas && cachedCanvas.hit; cachedHitCanvas = cachedCanvas && cachedCanvas.hit;
if(this.shouldDrawHit()) { if(this.shouldDrawHit(canvas)) {
if (cachedHitCanvas) { if (cachedHitCanvas) {
this._drawCachedHitCanvas(context); this._drawCachedHitCanvas(context);
@ -7948,7 +7952,9 @@ var Kinetic = {};
else if (drawFunc) { else if (drawFunc) {
context.save(); context.save();
context._applyLineJoin(this); context._applyLineJoin(this);
if (layer) {
layer._applyTransform(this, context, top); layer._applyTransform(this, context, top);
}
drawFunc.call(this, context); drawFunc.call(this, context);
context.restore(); context.restore();
@ -11486,29 +11492,30 @@ var Kinetic = {};
this.hitFunc(this._hitFunc); this.hitFunc(this._hitFunc);
}, },
_useBufferCanvas: function() { _useBufferCanvas: function() {
return (this.hasShadow() || this.getAbsoluteOpacity() !== 1) && this.hasStroke(); return (this.hasShadow() || this.getAbsoluteOpacity() !== 1) && this.hasStroke() && this.getStage();
}, },
_sceneFunc: function(context) { _sceneFunc: function(context) {
var width = this.getWidth(), var width = this.getWidth(),
height = this.getHeight(), height = this.getHeight(),
image = this.getImage(), image = this.getImage(),
crop, cropWidth, cropHeight, params; cropWidth, cropHeight, params;
if (image) { if (image) {
crop = this.getCrop(); cropWidth = this.getCropWidth();
cropWidth = crop.width; cropHeight = this.getCropHeight();
cropHeight = crop.height;
if (cropWidth && cropHeight) { if (cropWidth && cropHeight) {
params = [image, crop.x, crop.y, cropWidth, cropHeight, 0, 0, width, height]; params = [image, this.getCropX(), this.getCropY(), cropWidth, cropHeight, 0, 0, width, height];
} else { } else {
params = [image, 0, 0, width, height]; params = [image, 0, 0, width, height];
} }
} }
if (this.hasFill() || this.hasStroke() || this.hasShadow()) {
context.beginPath(); context.beginPath();
context.rect(0, 0, width, height); context.rect(0, 0, width, height);
context.closePath(); context.closePath();
context.fillStrokeShape(this); context.fillStrokeShape(this);
}
if (image) { if (image) {
context.drawImage.apply(context, params); context.drawImage.apply(context, params);

10
kinetic.min.js vendored
View File

File diff suppressed because one or more lines are too long

13
src/shapes/Image.js
View File

@ -39,29 +39,30 @@
this.hitFunc(this._hitFunc); this.hitFunc(this._hitFunc);
}, },
_useBufferCanvas: function() { _useBufferCanvas: function() {
return (this.hasShadow() || this.getAbsoluteOpacity() !== 1) && this.hasStroke(); return (this.hasShadow() || this.getAbsoluteOpacity() !== 1) && this.hasStroke() && this.getStage();
}, },
_sceneFunc: function(context) { _sceneFunc: function(context) {
var width = this.getWidth(), var width = this.getWidth(),
height = this.getHeight(), height = this.getHeight(),
image = this.getImage(), image = this.getImage(),
crop, cropWidth, cropHeight, params; cropWidth, cropHeight, params;
if (image) { if (image) {
crop = this.getCrop(); cropWidth = this.getCropWidth();
cropWidth = crop.width; cropHeight = this.getCropHeight();
cropHeight = crop.height;
if (cropWidth && cropHeight) { if (cropWidth && cropHeight) {
params = [image, crop.x, crop.y, cropWidth, cropHeight, 0, 0, width, height]; params = [image, this.getCropX(), this.getCropY(), cropWidth, cropHeight, 0, 0, width, height];
} else { } else {
params = [image, 0, 0, width, height]; params = [image, 0, 0, width, height];
} }
} }
if (this.hasFill() || this.hasStroke() || this.hasShadow()) {
context.beginPath(); context.beginPath();
context.rect(0, 0, width, height); context.rect(0, 0, width, height);
context.closePath(); context.closePath();
context.fillStrokeShape(this); context.fillStrokeShape(this);
}
if (image) { if (image) {
context.drawImage.apply(context, params); context.drawImage.apply(context, params);

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

@ -2825,7 +2825,8 @@ suite('Node', function() {
stroke: 'black', stroke: 'black',
strokeWidth: 4, strokeWidth: 4,
name: 'myCircle', name: 'myCircle',
draggable: true draggable: true,
shadowBlur : 10,
}); });
group.add(circle); group.add(circle);
assert.equal(circle._cache.canvas, undefined); assert.equal(circle._cache.canvas, undefined);

2
test/unit/shapes/Image-test.js
View File

@ -102,7 +102,7 @@ suite('Image', function(){
var trace = layer.getContext().getTrace(); var trace = layer.getContext().getTrace();
//console.log(trace); //console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);beginPath();rect(0,0,100,100);closePath();drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);beginPath();rect(0,0,100,200);closePath();drawImage([object HTMLImageElement],135,7,167,134,0,0,100,200);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);beginPath();rect(0,0,100,100);closePath();drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();'); assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,200);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();');
done(); done();