mirror of
https://github.com/konvajs/konva.git
synced 2025-10-15 12:34:52 +08:00
Separated Fill and Stroke operations on Path so that it will only be filled when there's a "fill" attr. This prevents the Canvas path from being unexpectedly closed. https://github.com/ericdrowell/KineticJS/issues/567
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
(function() {
|
||||
(function () {
|
||||
/**
|
||||
* Path constructor.
|
||||
* @author Jason Follas
|
||||
@@ -18,12 +18,12 @@
|
||||
* scale: 2<br>
|
||||
* });
|
||||
*/
|
||||
Kinetic.Path = function(config) {
|
||||
Kinetic.Path = function (config) {
|
||||
this.___init(config);
|
||||
};
|
||||
|
||||
Kinetic.Path.prototype = {
|
||||
___init: function(config) {
|
||||
___init: function (config) {
|
||||
this.dataArray = [];
|
||||
var that = this;
|
||||
|
||||
@@ -32,15 +32,15 @@
|
||||
this.className = 'Path';
|
||||
|
||||
this.dataArray = Kinetic.Path.parsePathData(this.getData());
|
||||
this.on('dataChange.kinetic', function() {
|
||||
this.on('dataChange.kinetic', function () {
|
||||
that.dataArray = Kinetic.Path.parsePathData(this.getData());
|
||||
});
|
||||
},
|
||||
drawFunc: function(canvas) {
|
||||
drawFunc: function (canvas) {
|
||||
var ca = this.dataArray, context = canvas.getContext();
|
||||
// context position
|
||||
context.beginPath();
|
||||
for(var n = 0; n < ca.length; n++) {
|
||||
for (var n = 0; n < ca.length; n++) {
|
||||
var c = ca[n].command;
|
||||
var p = ca[n].points;
|
||||
switch (c) {
|
||||
@@ -77,7 +77,10 @@
|
||||
break;
|
||||
}
|
||||
}
|
||||
canvas.fillStroke(this);
|
||||
if (this.getFill() !== undefined)
|
||||
canvas.fill(this);
|
||||
|
||||
canvas.stroke(this);
|
||||
}
|
||||
};
|
||||
Kinetic.Util.extend(Kinetic.Path, Kinetic.Shape);
|
||||
|
@@ -803,5 +803,38 @@ Test.Modules.PATH = {
|
||||
});
|
||||
layer.add(borneo);
|
||||
stage.add(layer);
|
||||
}
|
||||
},
|
||||
'*Stroke only when no fill': function(containerId) {
|
||||
|
||||
// https://github.com/ericdrowell/KineticJS/issues/567
|
||||
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 1024,
|
||||
height: 480,
|
||||
throttle: 80,
|
||||
scale: 0.75,
|
||||
x: 10,
|
||||
y: 10
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var path = new Kinetic.Path({
|
||||
data: "M 50 0 C 50 150 170 170 200 170",
|
||||
stroke: 'black'
|
||||
});
|
||||
|
||||
path.on('mouseover', function () {
|
||||
this.setStroke("#f00");
|
||||
layer.draw();
|
||||
});
|
||||
|
||||
path.on('mouseout', function(){
|
||||
this.setStroke("#000");
|
||||
layer.draw();
|
||||
});
|
||||
|
||||
layer.add(path);
|
||||
stage.add(layer);
|
||||
}
|
||||
};
|
||||
|
Reference in New Issue
Block a user