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

fixed wrong opacity level for cached group with opacity. close #191

Browse Source
This commit is contained in:
Anton Lavrenov 2016-12-13 07:01:51 -05:00
parent 64aef6809e
commit ad8d38d945
6 changed files with 95 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
### Fixed
- Fixed bug when `Konva.Tag` width was not changing its width dynamically
- Fixed "calling remove() for dragging shape will throw an error"
- Fixed wrong opacity level for cached group with opacity
## [1.2.2][2016-09-15]

13
konva.js
View File

@ -3,7 +3,7 @@
* Konva JavaScript Framework v1.2.2
* http://konvajs.github.io/
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Thu Dec 08 2016
* Date: Tue Dec 13 2016
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva)
@ -1715,7 +1715,7 @@
},
_applyOpacity: function(shape) {
var absOpacity = shape.getAbsoluteOpacity();
if(absOpacity !== 1) {
if (absOpacity !== 1) {
this.setAttr('globalAlpha', absOpacity);
}
},
@ -2356,6 +2356,7 @@
this.attrs = {};
this._cache = {};
this._filterUpToDate = false;
this._isUnderCache = false;
this.setAttrs(config);
// event bindings for cache handling
@ -2510,8 +2511,13 @@
sceneContext.translate(-x, -y);
hitContext.translate(-x, -y);
// extra flag to skip on getAbsolute opacity calc
this._isUnderCache = true;
this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
this.drawScene(cachedSceneCanvas, this, true);
this.drawHit(cachedHitCanvas, this, true);
this._isUnderCache = false;
sceneContext.restore();
hitContext.restore();
@ -3431,7 +3437,8 @@
},
_getAbsoluteOpacity: function() {
var absOpacity = this.getOpacity();
if(this.getParent()) {
var parent = this.getParent();
if(parent && !parent._isUnderCache) {
absOpacity *= this.getParent().getAbsoluteOpacity();
}
return absOpacity;

12
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
src/Context.js
View File

@ -217,7 +217,7 @@
},
_applyOpacity: function(shape) {
var absOpacity = shape.getAbsoluteOpacity();
if(absOpacity !== 1) {
if (absOpacity !== 1) {
this.setAttr('globalAlpha', absOpacity);
}
},

9
src/Node.js
View File

@ -63,6 +63,7 @@
this.attrs = {};
this._cache = {};
this._filterUpToDate = false;
this._isUnderCache = false;
this.setAttrs(config);
// event bindings for cache handling
@ -217,8 +218,13 @@
sceneContext.translate(-x, -y);
hitContext.translate(-x, -y);
// extra flag to skip on getAbsolute opacity calc
this._isUnderCache = true;
this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
this.drawScene(cachedSceneCanvas, this, true);
this.drawHit(cachedHitCanvas, this, true);
this._isUnderCache = false;
sceneContext.restore();
hitContext.restore();
@ -1138,7 +1144,8 @@
},
_getAbsoluteOpacity: function() {
var absOpacity = this.getOpacity();
if(this.getParent()) {
var parent = this.getParent();
if(parent && !parent._isUnderCache) {
absOpacity *= this.getParent().getAbsoluteOpacity();
}
return absOpacity;

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

@ -13,7 +13,7 @@ suite('Caching', function() {
width: 100,
height: 50,
fill: 'green',
draggable : true
draggable: true
});
rect.cache();
@ -731,4 +731,72 @@ suite('Caching', function() {
cloneAndCompareLayer(layer, 150);
});
test('test group with opacir', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var group = new Konva.Group({
x: 100,
y: 100,
draggable: true
});
layer.add(group);
var circle = new Konva.Circle({
radius: 10,
// fill: 'white',
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 10,
fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'blue'],
opacity: 0.4,
strokeHitEnabled: false,
stroke: 'rgba(0,0,0,0)'
});
group.add(circle);
group.cache();
stage.draw();
cloneAndCompareLayer(layer, 150);
});
test('cache group with rectangle with fill and opacity', function() {
var stage = addStage();
var layer = new Konva.Layer();
var group = new Konva.Group({
opacity: 0.5
});
var rect = new Konva.Rect({
x: 100,
y: 50,
width: 100,
height: 50,
fill: 'green'
});
group.add(rect);
layer.add(group);
stage.add(layer);
group.cache();
layer.draw();
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.globalAlpha = 0.5;
context.beginPath();
context.rect(100, 50, 100, 50);
context.closePath();
context.fillStyle = 'green';
context.fill();
compareLayerAndCanvas(layer, canvas, 5);
});
});