lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-03-03 16:58:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

hooked opacity rendering into the buffer canvas logic used for shadows so that strokes and fill opacities aren't applied separately

Browse Source
This commit is contained in:
Eric Rowell
2013-09-28 20:34:42 -07:00
parent e530a4697a
commit a8cbc2321d
2 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/Shape.js
View File

@@ -215,10 +215,12 @@
context = canvas.getContext(), context = canvas.getContext(),
drawFunc = this.getDrawFunc(), drawFunc = this.getDrawFunc(),
applyShadow = this.hasShadow() && this.getShadowEnabled(), applyShadow = this.hasShadow() && this.getShadowEnabled(),
applyOpacity = this.getOpacity() !== 1,
stage, bufferCanvas, bufferContext; stage, bufferCanvas, bufferContext;
if(drawFunc && this.isVisible()) { if(drawFunc && this.isVisible()) {
if (applyShadow) { // buffer canvas is needed to apply shadows or opacity
if (applyShadow || applyOpacity) {
stage = this.getStage(); stage = this.getStage();
bufferCanvas = stage.bufferCanvas; bufferCanvas = stage.bufferCanvas;
bufferContext = bufferCanvas.getContext(); bufferContext = bufferCanvas.getContext();
@@ -230,20 +232,27 @@
bufferContext.restore(); bufferContext.restore();
context.save(); context.save();
context.save(); if (applyShadow) {
context._applyShadow(this); context.save();
context.drawImage(bufferCanvas._canvas, 0, 0); context._applyShadow(this);
context.restore(); context.drawImage(bufferCanvas._canvas, 0, 0);
context._applyOpacity(this); context.restore();
}
if (applyOpacity) {
context._applyOpacity(this);
}
context.drawImage(bufferCanvas._canvas, 0, 0); context.drawImage(bufferCanvas._canvas, 0, 0);
context.restore(); context.restore();
} }
// if buffer canvas is not needed
else { else {
context.save(); context.save();
context._applyOpacity(this); context._applyOpacity(this);
context._applyLineJoin(this); context._applyLineJoin(this);
context._applyAncestorTransforms(this); context._applyAncestorTransforms(this);
drawFunc.call(this, context); drawFunc.call(this, context);
context.restore(); context.restore();
} }
} }

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

@@ -1911,12 +1911,22 @@ suite('Node', function() {
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
strokeWidth: 4 strokeWidth: 20,
draggable: true
}); });
circle.setOpacity(0.5); circle.setOpacity(0.5);
layer.add(circle); layer.add(circle);
stage.add(layer); stage.add(layer);
var sceneTrace = layer.getContext().getTrace();
//console.log(sceneTrace);
var bufferTrace = stage.bufferCanvas.getContext().getTrace();
//console.log(bufferTrace);
assert.equal(sceneTrace, 'clearRect(0,0,578,200);save();globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();');
assert.equal(bufferTrace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=20;strokeStyle=black;stroke();restore();');
}); });
// ====================================================== // ======================================================