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

fix caching issues. close #581

Browse Source
This commit is contained in:
Anton Lavrenov 2019-02-18 12:38:17 -05:00
parent 7b22a7ae50
commit 74210cbc79
4 changed files with 47 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
konva.js
View File

@ -5263,7 +5263,10 @@
context.restore();
}
else {
this._drawChildren(canvas, 'drawScene', top, false, caching);
// TODO: comment all arguments here
// describe why we use false for caching
// and why we use caching for skipBuffer, skipComposition
this._drawChildren(canvas, 'drawScene', top, false, caching, caching);
}
}
return this;
@ -5278,13 +5281,16 @@
context.restore();
}
else {
this._drawChildren(canvas, 'drawHit', top, false, caching);
// TODO: comment all arguments here
// describe why we use false for caching
// and why we use caching for skipBuffer, skipComposition
this._drawChildren(canvas, 'drawHit', top, false, caching, caching);
}
}
return this;
};
// TODO: create ClipContainer
Container.prototype._drawChildren = function (canvas, drawMethod, top, caching, skipBuffer) {
Container.prototype._drawChildren = function (canvas, drawMethod, top, caching, skipBuffer, skipComposition) {
var layer = this.getLayer(), context = canvas && canvas.getContext(), clipWidth = this.clipWidth(), clipHeight = this.clipHeight(), clipFunc = this.clipFunc(), hasClip = (clipWidth && clipHeight) || clipFunc, clipX, clipY;
if (hasClip && layer) {
context.save();
@ -5307,7 +5313,7 @@
.getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
var hasComposition = this.globalCompositeOperation() !== 'source-over' && !caching;
var hasComposition = this.globalCompositeOperation() !== 'source-over' && !skipComposition;
if (hasComposition && layer) {
context.save();
context._applyGlobalCompositeOperation(this);

2
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

21
src/Container.ts
View File

@ -414,7 +414,10 @@ export abstract class Container extends Node {
this._drawCachedSceneCanvas(context);
context.restore();
} else {
this._drawChildren(canvas, 'drawScene', top, false, caching);
// TODO: comment all arguments here
// describe why we use false for caching
// and why we use caching for skipBuffer, skipComposition
this._drawChildren(canvas, 'drawScene', top, false, caching, caching);
}
}
return this;
@ -433,13 +436,23 @@ export abstract class Container extends Node {
this._drawCachedHitCanvas(context);
context.restore();
} else {
this._drawChildren(canvas, 'drawHit', top, false, caching);
// TODO: comment all arguments here
// describe why we use false for caching
// and why we use caching for skipBuffer, skipComposition
this._drawChildren(canvas, 'drawHit', top, false, caching, caching);
}
}
return this;
}
// TODO: create ClipContainer
_drawChildren(canvas, drawMethod, top, caching?, skipBuffer?) {
_drawChildren(
canvas,
drawMethod,
top,
caching?,
skipBuffer?,
skipComposition?
) {
var layer = this.getLayer(),
context = canvas && canvas.getContext(),
clipWidth = this.clipWidth(),
@ -471,7 +484,7 @@ export abstract class Container extends Node {
}
var hasComposition =
this.globalCompositeOperation() !== 'source-over' && !caching;
this.globalCompositeOperation() !== 'source-over' && !skipComposition;
if (hasComposition && layer) {
context.save();
context._applyGlobalCompositeOperation(this);

41
test/unit/Node-cache-test.js
View File

@ -1028,7 +1028,7 @@ suite('Caching', function() {
assert.equal(callCount, 1);
});
it.skip('check caching with global composite operation', function() {
it('check caching with global composite operation', function() {
var stage = addStage();
const layer = new Konva.Layer();
@ -1069,37 +1069,34 @@ suite('Caching', function() {
maskgroup.add(mask);
maskgroup.cache();
var canvasBefore = maskgroup._cache.canvas.scene._canvas;
var canvasBefore = maskgroup._cache.get('canvas').scene._canvas;
maskgroup.globalCompositeOperation('destination-in');
maskgroup.cache();
var canvasAfter = maskgroup._cache.canvas.scene._canvas;
var canvasAfter = maskgroup._cache.get('canvas').scene._canvas;
compareCanvases(canvasBefore, canvasAfter);
console.log(maskgroup);
// maskgroup.clearCache();
maskgroup.clearCache();
// layer.draw();
// // // no caches - mask group clipped all drawing
// assert.equal(stage.getIntersection({ x: 5, y: 20 }), null);
// assert.equal(stage.getIntersection({ x: 55, y: 20 }), rect);
layer.draw();
// no caches - mask group clipped all drawing
assert.equal(stage.getIntersection({ x: 5, y: 20 }), null);
assert.equal(stage.getIntersection({ x: 55, y: 20 }), rect);
// // cache inner mask group - same result
// maskgroup.cache();
// layer.draw();
// assert.equal(stage.getIntersection({ x: 5, y: 20 }), null);
// assert.equal(stage.getIntersection({ x: 55, y: 20 }), rect);
// cache inner mask group - same result
maskgroup.cache();
layer.draw();
assert.equal(stage.getIntersection({ x: 5, y: 20 }), null);
assert.equal(stage.getIntersection({ x: 55, y: 20 }), rect);
// cache group
// background will be visible now, because globalCompositeOperation
// will work inside cached parent only
// debugger;
// group.cache();
// layer.draw();
group.cache();
layer.draw();
// console.log(group);
// assert.equal(stage.getIntersection({ x: 5, y: 20 }), bg);
// assert.equal(stage.getIntersection({ x: 55, y: 20 }), rect);
throw '';
assert.equal(stage.getIntersection({ x: 5, y: 20 }), bg);
assert.equal(stage.getIntersection({ x: 55, y: 20 }), rect);
});
});