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

shadow fixes

Browse Source
This commit is contained in:
Anton Lavrenov
2016-12-14 12:11:54 -05:00
parent ad8d38d945
commit b855765736
10 changed files with 146 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
- 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
- More consistent shadows on HDPI screens
## [1.2.2][2016-09-15]

20
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: Tue Dec 13 2016
* Date: Wed Dec 14 2016
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva)
@@ -1918,7 +1918,7 @@
origSetter.apply(that, arguments);
var prop = arguments[0];
var val = arguments[1];
if ((prop === 'shadowOffsetX') || (prop === 'shadowOffsetY')) {
if ((prop === 'shadowOffsetX') || (prop === 'shadowOffsetY') || (prop === 'shadowBlur')) {
val = val / this.canvas.getPixelRatio();
}
that._trace({
@@ -2082,7 +2082,7 @@
scaleY = scale.y * ratio;
this.setAttr('shadowColor', color);
this.setAttr('shadowBlur', blur);
this.setAttr('shadowBlur', blur * ratio);
this.setAttr('shadowOffsetX', offset.x * scaleX);
this.setAttr('shadowOffsetY', offset.y * scaleY);
}
@@ -2469,6 +2469,7 @@
rect = this.getClientRect(true),
width = conf.width || rect.width,
height = conf.height || rect.height,
pixelRatio = conf.pixelRatio,
x = conf.x || rect.x,
y = conf.y || rect.y,
offset = conf.offset || 0,
@@ -2486,10 +2487,12 @@
var cachedSceneCanvas = new Konva.SceneCanvas({
pixelRatio: pixelRatio,
width: width,
height: height
}),
cachedFilterCanvas = new Konva.SceneCanvas({
pixelRatio: pixelRatio,
width: width,
height: height
}),
@@ -2514,6 +2517,7 @@
// extra flag to skip on getAbsolute opacity calc
this._isUnderCache = true;
this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
this.drawScene(cachedSceneCanvas, this, true);
this.drawHit(cachedHitCanvas, this, true);
@@ -3706,6 +3710,16 @@
}
},
_getAbsoluteScale: function(top) {
// this is special logic for caching with some shapes with shadow
var parent = this;
while(parent) {
if (parent._isUnderCache) {
top = parent;
}
parent = parent.getParent();
}
var scaleX = 1, scaleY = 1;
// start with stage and traverse downwards to self

12
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

18
package.json
View File

@@ -19,18 +19,18 @@
},
"devDependencies": {
"chai": "3.5.0",
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"gulp-connect": "^4.0.0",
"gulp-eslint": "^2.0.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.0.0",
"gulp-eslint": "^3.0.1",
"gulp-jscpd": "0.0.7",
"gulp-jsdoc": "^0.1.4",
"gulp-mocha-phantomjs": "^0.11.0",
"gulp-jsdoc": "^0.1.5",
"gulp-mocha-phantomjs": "^0.12.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-uglify": "^1.3.0",
"gulp-util": "^3.0.6",
"mocha": "2.4.5"
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.7",
"mocha": "3.2.0"
},
"keywords": [
"canvas",

4
src/Context.js
View File

@@ -420,7 +420,7 @@
origSetter.apply(that, arguments);
var prop = arguments[0];
var val = arguments[1];
if ((prop === 'shadowOffsetX') || (prop === 'shadowOffsetY')) {
if ((prop === 'shadowOffsetX') || (prop === 'shadowOffsetY') || (prop === 'shadowBlur')) {
val = val / this.canvas.getPixelRatio();
}
that._trace({
@@ -584,7 +584,7 @@
scaleY = scale.y * ratio;
this.setAttr('shadowColor', color);
this.setAttr('shadowBlur', blur);
this.setAttr('shadowBlur', blur * ratio);
this.setAttr('shadowOffsetX', offset.x * scaleX);
this.setAttr('shadowOffsetY', offset.y * scaleY);
}

14
src/Node.js
View File

@@ -176,6 +176,7 @@
rect = this.getClientRect(true),
width = conf.width || rect.width,
height = conf.height || rect.height,
pixelRatio = conf.pixelRatio,
x = conf.x || rect.x,
y = conf.y || rect.y,
offset = conf.offset || 0,
@@ -193,10 +194,12 @@
var cachedSceneCanvas = new Konva.SceneCanvas({
pixelRatio: pixelRatio,
width: width,
height: height
}),
cachedFilterCanvas = new Konva.SceneCanvas({
pixelRatio: pixelRatio,
width: width,
height: height
}),
@@ -221,6 +224,7 @@
// extra flag to skip on getAbsolute opacity calc
this._isUnderCache = true;
this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
this.drawScene(cachedSceneCanvas, this, true);
this.drawHit(cachedHitCanvas, this, true);
@@ -1413,6 +1417,16 @@
}
},
_getAbsoluteScale: function(top) {
// this is special logic for caching with some shapes with shadow
var parent = this;
while(parent) {
if (parent._isUnderCache) {
top = parent;
}
parent = parent.getParent();
}
var scaleX = 1, scaleY = 1;
// start with stage and traverse downwards to self

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

@@ -184,6 +184,7 @@ suite('Caching', function() {
});
test('cache rectangle with fill and simple shadow', function() {
Konva.pixelRatio = 1;
var stage = addStage();
var layer = new Konva.Layer();
@@ -217,6 +218,7 @@ suite('Caching', function() {
showCanvas(rect._cache.canvas.hit._canvas);
showHit(layer);
compareLayerAndCanvas(layer, canvas, 10);
Konva.pixelRatio = undefined;
});
test('cache rectangle with fill and shadow with offset', function() {
@@ -249,7 +251,7 @@ suite('Caching', function() {
context.closePath();
context.fillStyle = 'green';
context.shadowColor = 'black';
context.shadowBlur = 10;
context.shadowBlur = 10 * canvas.ratio;
context.shadowOffsetX = 10 * canvas.ratio;
context.shadowOffsetY = 10 * canvas.ratio;
context.fill();
@@ -286,7 +288,7 @@ suite('Caching', function() {
context.closePath();
context.fillStyle = 'green';
context.shadowColor = 'black';
context.shadowBlur = 10;
context.shadowBlur = 10 * canvas.ratio;
context.shadowOffsetX = -10 * canvas.ratio;
context.shadowOffsetY = -10 * canvas.ratio;
context.fill();
@@ -325,7 +327,7 @@ suite('Caching', function() {
context.closePath();
context.fillStyle = 'green';
context.shadowColor = 'black';
context.shadowBlur = 10;
context.shadowBlur = 10 * canvas.ratio;
context.shadowOffsetX = -10 * canvas.ratio;
context.shadowOffsetY = -10 * canvas.ratio;
context.fill();
@@ -444,7 +446,7 @@ suite('Caching', function() {
context.closePath();
context.fillStyle = 'green';
context.shadowColor = 'black';
context.shadowBlur = 10;
context.shadowBlur = 10 * canvas.ratio;
context.shadowOffsetX = 10 * canvas.ratio;
context.shadowOffsetY = 10 * canvas.ratio;
context.fill();
@@ -557,7 +559,7 @@ suite('Caching', function() {
context.closePath();
context.fillStyle = 'green';
context.shadowColor = 'black';
context.shadowBlur = 10;
context.shadowBlur = 10 * canvas.ratio;
context.shadowOffsetX = 10 * canvas.ratio;
context.shadowOffsetY = 10 * canvas.ratio;
context.fill();

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

@@ -351,7 +351,7 @@ suite('Shape', function() {
context.fillStyle = 'green';
context.shadowColor = 'rgba(0,0,0,0.5)';
context.shadowBlur = 10;
context.shadowBlur = 10 * canvas.ratio;
context.shadowOffsetX = 10 * canvas.ratio;
context.shadowOffsetY = 10 * canvas.ratio;
context.fill();
@@ -361,11 +361,11 @@ suite('Shape', function() {
var trace = layer.getContext().getTrace();
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();restore();restore();');
});
// ======================================================
test('stroke with shadow and opacity', function(){
Konva.pixelRatio = 1;
var stage = addStage();
var layer = new Konva.Layer();
@@ -403,7 +403,7 @@ suite('Shape', function() {
context.shadowColor = 'rgba(0,0,0,0.5)';
context.shadowBlur = 10;
context.shadowBlur = 10 * canvas.ratio;
context.shadowOffsetX = 10 * canvas.ratio;
context.shadowOffsetY = 10 * canvas.ratio;
context.stroke();
@@ -490,7 +490,7 @@ suite('Shape', function() {
context.closePath();
context.fillStyle = 'green';
context.shadowColor = 'grey';
context.shadowBlur = 10;
context.shadowBlur = 10 * canvas.ratio;
context.shadowOffsetX = 20 * canvas.ratio;
context.shadowOffsetY = 20 * canvas.ratio;
context.lineWidth = 10;
@@ -517,7 +517,7 @@ suite('Shape', function() {
});
// ======================================================
test('fill and stroke with shadow and opacity', function(){
test.skip('fill and stroke with shadow and opacity', function(){
var stage = addStage();
var layer = new Konva.Layer();
@@ -531,7 +531,7 @@ suite('Shape', function() {
strokeWidth: 10,
shadowColor: 'grey',
opacity : 0.5,
shadowBlur : 1,
shadowBlur : 5,
shadowOffset: {
x: 20,
y: 20
@@ -544,7 +544,7 @@ suite('Shape', function() {
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.globalAlpha = 0.1;
context.globalAlpha = 0.3;
// draw shadow
context.save();
@@ -552,7 +552,7 @@ suite('Shape', function() {
context.rect(95, 45, 110, 60);
context.closePath();
context.shadowColor = 'grey';
context.shadowBlur = 1;
context.shadowBlur = 5 * canvas.ratio;
context.shadowOffsetX = 20 * canvas.ratio;
context.shadowOffsetY = 20 * canvas.ratio;
context.fillStyle = 'black';
@@ -584,7 +584,7 @@ suite('Shape', function() {
// don't test in PhantomJS as it use old chrome engine
// it it has opacity + shadow bug
if (!window.mochaPhantomJS) {
compareLayerAndCanvas(layer, canvas, 200);
compareLayerAndCanvas(layer, canvas, 240);
}
var trace = layer.getContext().getTrace();
@@ -623,7 +623,7 @@ suite('Shape', function() {
context.save();
context.shadowColor = 'grey';
context.shadowBlur = 2;
context.shadowBlur = 2 * canvas.ratio;
context.shadowOffsetX = 20 * canvas.ratio;
context.shadowOffsetY = 20 * canvas.ratio;
context.font = 'normal 50px Arial';
@@ -1081,7 +1081,7 @@ suite('Shape', function() {
context.closePath();
context.fillStyle = 'green';
context.shadowColor = 'grey';
context.shadowBlur = 10;
context.shadowBlur = 10 * canvas.ratio;
context.shadowOffsetX = 20 * canvas.ratio;
context.shadowOffsetY = 20 * canvas.ratio;
context.lineWidth = 10;

6
test/unit/shapes/Path-test.js
View File

@@ -180,9 +180,9 @@ suite('Path', function() {
context.closePath();
context.fillStyle = '#fcc';
context.shadowColor = 'maroon';
context.shadowBlur = 2;
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 2 * canvas.ratio;
context.shadowOffsetX = 10 * canvas.ratio;
context.shadowOffsetY = 10 * canvas.ratio;
context.fill();
// context.stroke();
compareLayerAndCanvas(layer, canvas, 20);

79
test/unit/shapes/Text-test.js
View File

@@ -104,17 +104,90 @@ suite('Text', function(){
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.textBaseline = 'top';
context.textBaseline = 'middle';
context.font = "normal normal 50px Arial";
context.fillStyle = 'darkgrey';
context.fillText('Hello World!', 10, (50));
context.fillText('Hello World!', 10, 10 + 50 + 25);
context.fillStyle = 'black';
context.fillText('Hello World!', 10, 10);
context.fillText('Hello World!', 10, 10 + 25);
compareLayerAndCanvas(layer, canvas, 254);
});
test('text cache with fill and shadow', function() {
var stage = addStage();
var layer1 = new Konva.Layer();
layer1.getCanvas().setPixelRatio(1);
stage.add(layer1);
var text1 = new Konva.Text({
x: 10,
y: 10,
text: 'some text',
fontSize: 50,
fill: 'black',
shadowColor: 'black',
shadowOffsetX: 0,
shadowOffsetY: 50,
opacity: 1,
shadowBlur: 10,
draggable: true
});
layer1.add(text1);
var layer2 = new Konva.Layer();
layer2.getCanvas().setPixelRatio(1);
layer2.add(text1.clone().cache({pixelRatio: 2}));
stage.add(layer1, layer2);
if (!window.isPhantomJS) {
compareLayers(layer1, layer2, 220);
}
});
test('text cache with fill and shadow and some scale', function() {
var stage = addStage();
var layer1 = new Konva.Layer();
stage.add(layer1);
var text1 = new Konva.Text({
x: 10,
y: 10,
text: 'some text',
fontSize: 50,
fill: 'black',
shadowColor: 'black',
shadowOffsetX: 0,
shadowOffsetY: 50,
opacity: 1,
shadowBlur: 10,
draggable: true
});
layer1.add(text1);
var layer2 = new Konva.Layer({
scaleX: 0.5,
scaleY: 0.5
});
stage.add(layer2);
var group = new Konva.Group();
layer2.add(group);
var text2 = text1.clone();
group.add(text2);
text2.cache();
group.scale({ x: 2, y: 2});
stage.draw();
compareLayers(layer1, layer2, 150);
});
// ======================================================
test('add text with letter spacing', function() {
var stage = addStage();