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

scale now affect to shadowOffset

Browse Source
This commit is contained in:
lavrton 2015-02-09 08:33:49 +07:00
parent 493a912245
commit c15e977009
5 changed files with 105 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -4,6 +4,8 @@
* Enhancements
* new methods for working with node's name: `addName`, `removeName`, `hasName`.
* performance optimization (remove some unnecessary draws)
* more expected drawing when shape has opacity, stroke and shadow
* `scale` now affect to `shadowOffset`
## 0.8.0 2015-02-04

9
konva.js
View File

@ -2284,12 +2284,15 @@ var Konva = {};
offset = util.get(shape.getShadowOffset(), {
x: 0,
y: 0
});
}),
m = shape.getAbsoluteTransform().m,
scaleX = m[0],
scaleY = m[3];
this.setAttr('shadowColor', color);
this.setAttr('shadowBlur', blur);
this.setAttr('shadowOffsetX', offset.x);
this.setAttr('shadowOffsetY', offset.y);
this.setAttr('shadowOffsetX', offset.x * scaleX);
this.setAttr('shadowOffsetY', offset.y * scaleY);
}
};

2
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
src/Context.js
View File

@ -551,12 +551,15 @@
offset = util.get(shape.getShadowOffset(), {
x: 0,
y: 0
});
}),
m = shape.getAbsoluteTransform().m,
scaleX = m[0],
scaleY = m[3];
this.setAttr('shadowColor', color);
this.setAttr('shadowBlur', blur);
this.setAttr('shadowOffsetX', offset.x);
this.setAttr('shadowOffsetY', offset.y);
this.setAttr('shadowOffsetX', offset.x * scaleX);
this.setAttr('shadowOffsetY', offset.y * scaleY);
}
};

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

@ -637,7 +637,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, 20);
compareLayerAndCanvas(layer, canvas, 50);
}
var trace = layer.getContext().getTrace();
@ -989,4 +989,93 @@ suite('Shape', function() {
circle.shadowColor(null);
assert.equal(circle.getShadowRGBA(), undefined);
});
test('scale should also effect shadow offset', function() {
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 100,
y: 100,
width: 100,
height: 100,
scaleX : 0.5,
scaleY : 0.5,
fill: 'green',
shadowColor: 'black',
shadowBlur: 0,
shadowOffset: {x:10, y:10}
});
layer.add(rect);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
// rect
context.beginPath();
context.rect(100, 100, 50, 50);
context.closePath();
context.fillStyle = 'green';
context.shadowColor = 'rgba(0,0,0,1)';
context.shadowBlur = 0;
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.fill();
compareLayerAndCanvas(layer, canvas, 10);
var trace = layer.getContext().getTrace();
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(0.5,0,0,0.5,100,100);save();shadowColor=rgba(0,0,0,1);shadowBlur=0;shadowOffsetX=5;shadowOffsetY=5;beginPath();rect(0,0,100,100);closePath();fillStyle=green;fill();restore();restore();');
});
test('scale of parent container should also effect shadow offset', function() {
var stage = addStage();
var layer = new Konva.Layer();
var group = new Konva.Group({
x : 100,
y : 100,
scaleX : 0.5,
scaleY : 0.5
});
var rect = new Konva.Rect({
width: 200,
height: 200,
scaleX : 0.5,
scaleY : 0.5,
fill: 'green',
shadowColor: 'black',
shadowBlur: 0,
shadowOffset: {x:20, y:20}
});
group.add(rect);
layer.add(group);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
// rect
context.beginPath();
context.rect(100, 100, 50, 50);
context.closePath();
context.fillStyle = 'green';
context.shadowColor = 'rgba(0,0,0,1)';
context.shadowBlur = 0;
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.fill();
compareLayerAndCanvas(layer, canvas, 10);
var trace = layer.getContext().getTrace();
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(0.25,0,0,0.25,100,100);save();shadowColor=rgba(0,0,0,1);shadowBlur=0;shadowOffsetX=5;shadowOffsetY=5;beginPath();rect(0,0,200,200);closePath();fillStyle=green;fill();restore();restore();');
});
});