lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-31 16:46:43 +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 =
shape.getStrokeScaleEnabled() || shape instanceof Konva.Text;
if (shape.hasStroke()) {
if (!strokeScaleEnabled) {
this.save();
this.setTransform(1, 0, 0, 1, 0, 0);
}
var scale = 1;
var pixelRatio = this.getCanvas().getPixelRatio();
if (shape.hasStroke()) {
this._applyLineCap(shape);
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('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()) {
this.setAttr('shadowColor', 'rgba(0,0,0,0)');
@@ -2114,10 +2127,6 @@
}
shape._strokeFunc(this);
if (!strokeScaleEnabled) {
this.restore();
}
}
},
_applyShadow: function(shape) {
@@ -2167,17 +2176,17 @@
// ignore strokeScaleEnabled for Text
var strokeScaleEnabled =
shape.getStrokeScaleEnabled() || shape instanceof Konva.Text;
if (!strokeScaleEnabled) {
this.save();
this.setTransform(1, 0, 0, 1, 0, 0);
}
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);
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 =
shape.getStrokeScaleEnabled() || shape instanceof Konva.Text;
if (shape.hasStroke()) {
if (!strokeScaleEnabled) {
this.save();
this.setTransform(1, 0, 0, 1, 0, 0);
}
var scale = 1;
var pixelRatio = this.getCanvas().getPixelRatio();
if (shape.hasStroke()) {
this._applyLineCap(shape);
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('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()) {
this.setAttr('shadowColor', 'rgba(0,0,0,0)');
@@ -648,10 +661,6 @@
}
shape._strokeFunc(this);
if (!strokeScaleEnabled) {
this.restore();
}
}
},
_applyShadow: function(shape) {
@@ -701,17 +710,17 @@
// ignore strokeScaleEnabled for Text
var strokeScaleEnabled =
shape.getStrokeScaleEnabled() || shape instanceof Konva.Text;
if (!strokeScaleEnabled) {
this.save();
this.setTransform(1, 0, 0, 1, 0, 0);
}
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);
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);
}
});
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() {
var stage = addStage();