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

Merge branch 'fix-unscalable-strokes' of https://github.com/MaxGraey/konva into MaxGraey-fix-unscalable-strokes

Browse Source
This commit is contained in:
Anton Lavrenov
2018-04-18 08:50:28 +07:00
parent a4221df605 1bcea51047
commit 28cef46270
5 changed files with 107 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
konva.js
View File

@@ -2086,19 +2086,32 @@
strokeScaleEnabled = strokeScaleEnabled =
shape.getStrokeScaleEnabled() || shape instanceof Konva.Text; shape.getStrokeScaleEnabled() || shape instanceof Konva.Text;
if (shape.hasStroke()) { var scale = 1;
if (!strokeScaleEnabled) { var pixelRatio = this.getCanvas().getPixelRatio();
this.save();
this.setTransform(1, 0, 0, 1, 0, 0);
}
if (shape.hasStroke()) {
this._applyLineCap(shape); this._applyLineCap(shape);
if (dash && shape.dashEnabled()) { if (dash && shape.dashEnabled()) {
this.setLineDash(dash); if (!strokeScaleEnabled) {
scale = pixelRatio / (this._context.currentTransform ? this._context.currentTransform.a : 1);
var len = dash.length;
var scaledDash = new Array(len);
for (var i = 0; i < len; i++) {
scaledDash[i] = dash[i] * scale;
}
this.setLineDash(scaledDash);
} else {
this.setLineDash(dash);
}
this.setAttr('lineDashOffset', shape.dashOffset()); this.setAttr('lineDashOffset', shape.dashOffset());
} }
this.setAttr('lineWidth', shape.strokeWidth()); if (!strokeScaleEnabled) {
scale = pixelRatio / (this._context.currentTransform ? this._context.currentTransform.a : 1);
this.setAttr('lineWidth', shape.strokeWidth() * scale);
} else {
this.setAttr('lineWidth', shape.strokeWidth());
}
if (!shape.getShadowForStrokeEnabled()) { if (!shape.getShadowForStrokeEnabled()) {
this.setAttr('shadowColor', 'rgba(0,0,0,0)'); this.setAttr('shadowColor', 'rgba(0,0,0,0)');
@@ -2114,10 +2127,6 @@
} }
shape._strokeFunc(this); shape._strokeFunc(this);
if (!strokeScaleEnabled) {
this.restore();
}
} }
}, },
_applyShadow: function(shape) { _applyShadow: function(shape) {
@@ -2167,17 +2176,17 @@
// ignore strokeScaleEnabled for Text // ignore strokeScaleEnabled for Text
var strokeScaleEnabled = var strokeScaleEnabled =
shape.getStrokeScaleEnabled() || shape instanceof Konva.Text; shape.getStrokeScaleEnabled() || shape instanceof Konva.Text;
if (!strokeScaleEnabled) {
this.save();
this.setTransform(1, 0, 0, 1, 0, 0);
}
this._applyLineCap(shape); this._applyLineCap(shape);
this.setAttr('lineWidth', shape.strokeWidth()); if (!strokeScaleEnabled) {
var pixelRatio = this.getCanvas().getPixelRatio();
var scale = pixelRatio / (this._context.currentTransform ? this._context.currentTransform.a : 1);
this.setAttr('lineWidth', shape.strokeWidth() * scale);
} else {
this.setAttr('lineWidth', shape.strokeWidth());
}
this.setAttr('strokeStyle', shape.colorKey); this.setAttr('strokeStyle', shape.colorKey);
shape._strokeFuncHit(this); shape._strokeFuncHit(this);
if (!strokeScaleEnabled) {
this.restore();
}
} }
} }
}; };

9
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

47
src/Context.js
View File

@@ -620,19 +620,32 @@
strokeScaleEnabled = strokeScaleEnabled =
shape.getStrokeScaleEnabled() || shape instanceof Konva.Text; shape.getStrokeScaleEnabled() || shape instanceof Konva.Text;
if (shape.hasStroke()) { var scale = 1;
if (!strokeScaleEnabled) { var pixelRatio = this.getCanvas().getPixelRatio();
this.save();
this.setTransform(1, 0, 0, 1, 0, 0);
}
if (shape.hasStroke()) {
this._applyLineCap(shape); this._applyLineCap(shape);
if (dash && shape.dashEnabled()) { if (dash && shape.dashEnabled()) {
this.setLineDash(dash); if (!strokeScaleEnabled) {
scale = pixelRatio / (this._context.currentTransform ? this._context.currentTransform.a : 1);
var len = dash.length;
var scaledDash = new Array(len);
for (var i = 0; i < len; i++) {
scaledDash[i] = dash[i] * scale;
}
this.setLineDash(scaledDash);
} else {
this.setLineDash(dash);
}
this.setAttr('lineDashOffset', shape.dashOffset()); this.setAttr('lineDashOffset', shape.dashOffset());
} }
this.setAttr('lineWidth', shape.strokeWidth()); if (!strokeScaleEnabled) {
scale = pixelRatio / (this._context.currentTransform ? this._context.currentTransform.a : 1);
this.setAttr('lineWidth', shape.strokeWidth() * scale);
} else {
this.setAttr('lineWidth', shape.strokeWidth());
}
if (!shape.getShadowForStrokeEnabled()) { if (!shape.getShadowForStrokeEnabled()) {
this.setAttr('shadowColor', 'rgba(0,0,0,0)'); this.setAttr('shadowColor', 'rgba(0,0,0,0)');
@@ -648,10 +661,6 @@
} }
shape._strokeFunc(this); shape._strokeFunc(this);
if (!strokeScaleEnabled) {
this.restore();
}
} }
}, },
_applyShadow: function(shape) { _applyShadow: function(shape) {
@@ -701,17 +710,17 @@
// ignore strokeScaleEnabled for Text // ignore strokeScaleEnabled for Text
var strokeScaleEnabled = var strokeScaleEnabled =
shape.getStrokeScaleEnabled() || shape instanceof Konva.Text; shape.getStrokeScaleEnabled() || shape instanceof Konva.Text;
if (!strokeScaleEnabled) {
this.save();
this.setTransform(1, 0, 0, 1, 0, 0);
}
this._applyLineCap(shape); this._applyLineCap(shape);
this.setAttr('lineWidth', shape.strokeWidth()); if (!strokeScaleEnabled) {
var pixelRatio = this.getCanvas().getPixelRatio();
var scale = pixelRatio / (this._context.currentTransform ? this._context.currentTransform.a : 1);
this.setAttr('lineWidth', shape.strokeWidth() * scale);
} else {
this.setAttr('lineWidth', shape.strokeWidth());
}
this.setAttr('strokeStyle', shape.colorKey); this.setAttr('strokeStyle', shape.colorKey);
shape._strokeFuncHit(this); shape._strokeFuncHit(this);
if (!strokeScaleEnabled) {
this.restore();
}
} }
} }
}; };

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

@@ -1445,4 +1445,47 @@ suite('Shape', function() {
compareLayers(layer1, layer2, 30); compareLayers(layer1, layer2, 30);
} }
}); });
test('text shadow blur should take scale into account', function() {
var stage = addStage();
var layer1 = new Konva.Layer();
stage.add(layer1);
var rect1 = new Konva.Rect({
x: 10,
y: 10,
scaleX: 0.5,
scaleY: 0.5,
width: 80,
height: 80,
fill: 'black',
shadowColor: 'black',
shadowOffsetX: 0,
shadowOffsetY: 50,
shadowBlur: 10
});
layer1.add(rect1);
stage.add(layer1);
var layer2 = new Konva.Layer();
stage.add(layer2);
var rect2 = new Konva.Rect({
x: 10,
y: 10,
fill: 'black',
width: 40,
height: 40,
shadowColor: 'black',
shadowOffsetX: 0,
shadowOffsetY: 25,
shadowBlur: 5
});
layer2.add(rect2);
stage.add(layer2);
if (!window.isPhantomJS) {
compareLayers(layer1, layer2, 30);
}
});
}); });

2
test/unit/shapes/Line-test.js
View File

@@ -1,4 +1,4 @@
suite('Line', function() { suite.only('Line', function() {
// ====================================================== // ======================================================
test('add line', function() { test('add line', function() {
var stage = addStage(); var stage = addStage();