mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 15:23:44 +08:00
strokeScaleEnabled set to false for Line not create correct hit graph
This commit is contained in:
parent
d6cfd29962
commit
a7863fbf83
@ -1,7 +1,7 @@
|
|||||||
## 5.2.1
|
## 5.2.1
|
||||||
|
|
||||||
* Bug Fixes
|
* Bug Fixes
|
||||||
|
* `strokeScaleEnabled = false` is disabled for text as I can not find way to implement this
|
||||||
* Enhancements
|
* Enhancements
|
||||||
* `cornerRadius` of Rect is limited by `width/2` and `height/2`
|
* `cornerRadius` of Rect is limited by `width/2` and `height/2`
|
||||||
|
|
||||||
|
@ -514,10 +514,11 @@
|
|||||||
},
|
},
|
||||||
_stroke: function(shape) {
|
_stroke: function(shape) {
|
||||||
var dash = shape.dash(),
|
var dash = shape.dash(),
|
||||||
strokeScaleEnabled = shape.getStrokeScaleEnabled();
|
// ignore strokeScaleEnabled for Text
|
||||||
|
strokeScaleEnabled = (shape.getStrokeScaleEnabled() || (shape instanceof Kinetic.Text));
|
||||||
|
|
||||||
if(shape.hasStroke()) {
|
if(shape.hasStroke()) {
|
||||||
if (!strokeScaleEnabled && !(shape instanceof Kinetic.Text)) {
|
if (!strokeScaleEnabled) {
|
||||||
this.save();
|
this.save();
|
||||||
this.setTransform(1, 0, 0, 1, 0, 0);
|
this.setTransform(1, 0, 0, 1, 0, 0);
|
||||||
}
|
}
|
||||||
@ -580,10 +581,19 @@
|
|||||||
},
|
},
|
||||||
_stroke: function(shape) {
|
_stroke: function(shape) {
|
||||||
if(shape.hasStroke()) {
|
if(shape.hasStroke()) {
|
||||||
|
// ignore strokeScaleEnabled for Text
|
||||||
|
var strokeScaleEnabled = (shape.getStrokeScaleEnabled() || (shape instanceof Kinetic.Text));
|
||||||
|
if (!strokeScaleEnabled) {
|
||||||
|
this.save();
|
||||||
|
this.setTransform(1, 0, 0, 1, 0, 0);
|
||||||
|
}
|
||||||
this._applyLineCap(shape);
|
this._applyLineCap(shape);
|
||||||
this.setAttr('lineWidth', shape.strokeWidth());
|
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();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -38,8 +38,7 @@
|
|||||||
if(!cornerRadius) {
|
if(!cornerRadius) {
|
||||||
// simple rect - don't bother doing all that complicated maths stuff.
|
// simple rect - don't bother doing all that complicated maths stuff.
|
||||||
context.rect(0, 0, width, height);
|
context.rect(0, 0, width, height);
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
// arcTo would be nicer, but browser support is patchy (Opera)
|
// arcTo would be nicer, but browser support is patchy (Opera)
|
||||||
cornerRadius = Math.min(cornerRadius, width / 2, height / 2);
|
cornerRadius = Math.min(cornerRadius, width / 2, height / 2);
|
||||||
context.moveTo(cornerRadius, 0);
|
context.moveTo(cornerRadius, 0);
|
||||||
|
@ -138,4 +138,50 @@ suite('Line', function() {
|
|||||||
assert.equal(trace, 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);save();globalAlpha=0.5;shadowColor=black;shadowBlur=20;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();');
|
assert.equal(trace, 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);save();globalAlpha=0.5;shadowColor=black;shadowBlur=20;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();');
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('line hit test with strokeScaleEnabled = false', function() {
|
||||||
|
var stage = addStage();
|
||||||
|
var scale = 0.1;
|
||||||
|
var layer = new Kinetic.Layer();
|
||||||
|
|
||||||
|
var group = new Kinetic.Group({
|
||||||
|
scale: {
|
||||||
|
x :scale,
|
||||||
|
y : scale
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var line1 = new Kinetic.Line({
|
||||||
|
points: [0, 0, 300, 0],
|
||||||
|
stroke: 'red',
|
||||||
|
strokeScaleEnabled: false,
|
||||||
|
strokeWidth: 10,
|
||||||
|
y : 0
|
||||||
|
});
|
||||||
|
group.add(line1);
|
||||||
|
|
||||||
|
var line2 = new Kinetic.Line({
|
||||||
|
points: [0, 0, 300, 0],
|
||||||
|
stroke: 'green',
|
||||||
|
strokeWidth: 40 / scale,
|
||||||
|
y : 60 / scale
|
||||||
|
});
|
||||||
|
group.add(line2);
|
||||||
|
|
||||||
|
layer.add(group);
|
||||||
|
stage.add(layer);
|
||||||
|
showHit(layer);
|
||||||
|
|
||||||
|
var shape = layer.getIntersection({
|
||||||
|
x : 10,
|
||||||
|
y : 60
|
||||||
|
});
|
||||||
|
assert.equal(shape, line2, 'second line detected');
|
||||||
|
|
||||||
|
shape = layer.getIntersection({
|
||||||
|
x : 10,
|
||||||
|
y : 4
|
||||||
|
});
|
||||||
|
assert.equal(shape, line1, 'first line detected');
|
||||||
|
});
|
||||||
});
|
});
|
Loading…
Reference in New Issue
Block a user