lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-21 18:51:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix automatic shadow scaling. close #230

Browse Source
This commit is contained in:
Anton Lavrenov
2017-04-25 17:19:04 -05:00
parent 18bab59f8b
commit 4924c4024c
4 changed files with 162 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
konva.js
View File

@@ -1626,9 +1626,8 @@
str += DOUBLE_PAREN;
} else {
if (Konva.Util._isArray(args[0])) {
str += OPEN_PAREN_BRACKET +
args.join(COMMA) +
CLOSE_BRACKET_PAREN;
str +=
OPEN_PAREN_BRACKET + args.join(COMMA) + CLOSE_BRACKET_PAREN;
} else {
str += OPEN_PAREN + args.join(COMMA) + CLOSE_PAREN;
}
@@ -1986,7 +1985,7 @@
this.scale(fillPatternScale.x, fillPatternScale.y);
}
if (fillPatternOffset) {
this.translate((-1) * fillPatternOffset.x, (-1) * fillPatternOffset.y);
this.translate(-1 * fillPatternOffset.x, -1 * fillPatternOffset.y);
}
this.setAttr(
@@ -2065,8 +2064,8 @@
_stroke: function(shape) {
var dash = shape.dash(),
// ignore strokeScaleEnabled for Text
strokeScaleEnabled = shape.getStrokeScaleEnabled() ||
shape instanceof Konva.Text;
strokeScaleEnabled =
shape.getStrokeScaleEnabled() || shape instanceof Konva.Text;
if (shape.hasStroke()) {
if (!strokeScaleEnabled) {
@@ -2108,7 +2107,10 @@
scaleY = scale.y * ratio;
this.setAttr('shadowColor', color);
this.setAttr('shadowBlur', blur * ratio * Math.min(scaleX, scaleY));
this.setAttr(
'shadowBlur',
blur * ratio * Math.min(Math.abs(scaleX), Math.abs(scaleY))
);
this.setAttr('shadowOffsetX', offset.x * scaleX);
this.setAttr('shadowOffsetY', offset.y * scaleY);
},
@@ -2135,8 +2137,8 @@
_stroke: function(shape) {
if (shape.hasStroke() && shape.strokeHitEnabled()) {
// ignore strokeScaleEnabled for Text
var strokeScaleEnabled = shape.getStrokeScaleEnabled() ||
shape instanceof Konva.Text;
var strokeScaleEnabled =
shape.getStrokeScaleEnabled() || shape instanceof Konva.Text;
if (!strokeScaleEnabled) {
this.save();
this.setTransform(1, 0, 0, 1, 0, 0);

2
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

20
src/Context.js
View File

@@ -149,9 +149,8 @@
str += DOUBLE_PAREN;
} else {
if (Konva.Util._isArray(args[0])) {
str += OPEN_PAREN_BRACKET +
args.join(COMMA) +
CLOSE_BRACKET_PAREN;
str +=
OPEN_PAREN_BRACKET + args.join(COMMA) + CLOSE_BRACKET_PAREN;
} else {
str += OPEN_PAREN + args.join(COMMA) + CLOSE_PAREN;
}
@@ -509,7 +508,7 @@
this.scale(fillPatternScale.x, fillPatternScale.y);
}
if (fillPatternOffset) {
this.translate((-1) * fillPatternOffset.x, (-1) * fillPatternOffset.y);
this.translate(-1 * fillPatternOffset.x, -1 * fillPatternOffset.y);
}
this.setAttr(
@@ -588,8 +587,8 @@
_stroke: function(shape) {
var dash = shape.dash(),
// ignore strokeScaleEnabled for Text
strokeScaleEnabled = shape.getStrokeScaleEnabled() ||
shape instanceof Konva.Text;
strokeScaleEnabled =
shape.getStrokeScaleEnabled() || shape instanceof Konva.Text;
if (shape.hasStroke()) {
if (!strokeScaleEnabled) {
@@ -631,7 +630,10 @@
scaleY = scale.y * ratio;
this.setAttr('shadowColor', color);
this.setAttr('shadowBlur', blur * ratio * Math.min(scaleX, scaleY));
this.setAttr(
'shadowBlur',
blur * ratio * Math.min(Math.abs(scaleX), Math.abs(scaleY))
);
this.setAttr('shadowOffsetX', offset.x * scaleX);
this.setAttr('shadowOffsetY', offset.y * scaleY);
},
@@ -658,8 +660,8 @@
_stroke: function(shape) {
if (shape.hasStroke() && shape.strokeHitEnabled()) {
// ignore strokeScaleEnabled for Text
var strokeScaleEnabled = shape.getStrokeScaleEnabled() ||
shape instanceof Konva.Text;
var strokeScaleEnabled =
shape.getStrokeScaleEnabled() || shape instanceof Konva.Text;
if (!strokeScaleEnabled) {
this.save();
this.setTransform(1, 0, 0, 1, 0, 0);

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

@@ -279,9 +279,9 @@ suite('Shape', function() {
});
// ======================================================
test(
'set image fill to color then image then linear gradient then back to image',
function(done) {
test('set image fill to color then image then linear gradient then back to image', function(
done
) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
@@ -339,8 +339,7 @@ suite('Shape', function() {
done();
};
imageObj.src = 'assets/darth-vader.jpg';
}
);
});
// ======================================================
test('test enablers and disablers', function() {
@@ -1068,9 +1067,52 @@ suite('Shape', function() {
);
});
test(
'scale of parent container should also effect shadow offset',
function() {
test('scale should also effect shadow offset - negative scale', 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: 10,
shadowOffset: { x: 10, y: 10 }
});
layer.add(rect);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
// rect
context.beginPath();
context.rect(50, 100, 50, 50);
context.closePath();
context.fillStyle = 'green';
context.shadowColor = 'rgba(0,0,0,1)';
context.shadowBlur = 10;
context.shadowOffsetX = -5 * canvas.ratio;
context.shadowOffsetY = 5 * canvas.ratio;
context.fill();
compareLayerAndCanvas(layer, canvas, 150);
// 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=10;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();
@@ -1117,8 +1159,7 @@ suite('Shape', function() {
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();'
);
}
);
});
test('optional disable buffer canvas', function() {
var stage = addStage();