lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-11-18 09:07:30 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fixed closePath bug with Path shape, added getters and setters, and added another path unit test

Browse Source
This commit is contained in:
Eric Rowell
2012-05-28 16:11:43 -07:00
parent a29d1520ae
commit 9fa7949d27
4 changed files with 116 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
dist/kinetic-core.js vendored
View File

@@ -4107,24 +4107,29 @@ Kinetic.Path = function(config) {
context.moveTo(p[0], p[1]);
break;
case 'z':
context.closePath();
context.closePath();
break;
}
}
this.fill();
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
this.setCommandsArray();
this.commandsArray = this.getCommandsArray();
};
/*
* Path methods
*/
Kinetic.Path.prototype = {
setCommandsArray: function() {
/**
* get parsed commands array from the commands
* string. V, v, H, h, and l commands are converted to
* L commands for the purpose of high performance Path
* rendering
*/
getCommandsArray: function() {
var c = this.attrs.commands;
// command chars
var cc = ['M', 'l', 'L', 'v', 'V', 'h', 'H', 'z'];
@@ -4156,7 +4161,7 @@ Kinetic.Path.prototype = {
points: points
});
}
// convert l, h, and v to L
// convert l, H, h, V, and v to L
var cpx = 0;
var cpy = 0;
for(var n = 0; n < ca.length; n++) {
@@ -4191,13 +4196,29 @@ Kinetic.Path.prototype = {
}
// reassign command
if(c !== 'L' && c !== 'M') {
if(c == 'l' || c == 'V' || c == 'v' || c == 'H' || c == 'h') {
ca[n].command = 'L';
ca[n].points[0] = cpx;
ca[n].points[1] = cpy;
}
}
this.commandsArray = ca;
return ca;
},
/**
* get SVG path commands string
*/
getCommands: function() {
return this.attrs.commands;
},
/**
* set SVG path commands string. This method
* also automatically parses the commands string
* into a commands array. Currently supported SVG commands:
* M, L, l, H, h, V, v, z
*/
setCommands: function(commands) {
this.attrs.commands = commands;
this.commandsArray = this.getCommandsArray();
}
};

2
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

35
src/shapes/Path.js
View File

@@ -30,24 +30,29 @@ Kinetic.Path = function(config) {
context.moveTo(p[0], p[1]);
break;
case 'z':
context.closePath();
context.closePath();
break;
}
}
this.fill();
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
this.setCommandsArray();
this.commandsArray = this.getCommandsArray();
};
/*
* Path methods
*/
Kinetic.Path.prototype = {
setCommandsArray: function() {
/**
* get parsed commands array from the commands
* string. V, v, H, h, and l commands are converted to
* L commands for the purpose of high performance Path
* rendering
*/
getCommandsArray: function() {
var c = this.attrs.commands;
// command chars
var cc = ['M', 'l', 'L', 'v', 'V', 'h', 'H', 'z'];
@@ -79,7 +84,7 @@ Kinetic.Path.prototype = {
points: points
});
}
// convert l, h, and v to L
// convert l, H, h, V, and v to L
var cpx = 0;
var cpy = 0;
for(var n = 0; n < ca.length; n++) {
@@ -114,13 +119,29 @@ Kinetic.Path.prototype = {
}
// reassign command
if(c !== 'L' && c !== 'M') {
if(c == 'l' || c == 'V' || c == 'v' || c == 'H' || c == 'h') {
ca[n].command = 'L';
ca[n].points[0] = cpx;
ca[n].points[1] = cpy;
}
}
this.commandsArray = ca;
return ca;
},
/**
* get SVG path commands string
*/
getCommands: function() {
return this.attrs.commands;
},
/**
* set SVG path commands string. This method
* also automatically parses the commands string
* into a commands array. Currently supported SVG commands:
* M, L, l, H, h, V, v, z
*/
setCommands: function(commands) {
this.attrs.commands = commands;
this.commandsArray = this.getCommandsArray();
}
};

70
tests/js/unitTests.js
View File

@@ -183,7 +183,6 @@ Test.prototype.tests = {
group.add(circle);
layer.draw();
var expectedJson = '{"attrs":{"width":578,"height":200,"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"radius":70,"fill":"green","stroke":"black","strokeWidth":4,"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true},"nodeType":"Shape","shapeType":"Circle"}]}]}]}';
test(stage.toJSON() === expectedJson, 'problem with serialization');
},
@@ -306,7 +305,6 @@ Test.prototype.tests = {
group.add(triangle);
layer.draw();
var expectedJson = '{"attrs":{"width":578,"height":200,"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
test(stage.toJSON() === expectedJson, "problem serializing stage with custom shape");
},
@@ -771,7 +769,7 @@ Test.prototype.tests = {
stage.add(layer);
var json = stage.toJSON();
test(json === '{"attrs":{"width":578,"height":200,"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"crop":{"x":0,"y":0},"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listening":true,"alpha":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}');
};
imageObj.src = '../darth-vader.jpg';
@@ -1172,7 +1170,57 @@ Test.prototype.tests = {
});
//stage.start();
},
'SHAPE - add path': function(containerId) {
'SHAPE - add simple path': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 1024,
height: 480,
scale: 0.5,
x: 50,
y: 10
});
var layer = new Kinetic.Layer();
var path = new Kinetic.Path({
commands: 'M200,100h100v50z',
fill: '#ccc',
stroke: '#333',
strokeWidth: 2,
shadow: {
color: 'black',
blur: 2,
offset: [10, 10],
alpha: 0.5
},
draggable: true
});
path.on('mouseover', function() {
this.setFill('red');
layer.draw();
});
path.on('mouseout', function() {
this.setFill('#ccc');
layer.draw();
});
layer.add(path);
stage.add(layer);
test(path.getCommands() === 'M200,100h100v50z', 'commands are incorrect');
test(path.getCommandsArray().length === 4, 'commands array should have 4 elements');
path.setCommands('M200');
test(path.getCommands() === 'M200', 'commands are incorrect');
test(path.getCommandsArray().length === 1, 'commands array should have 1 element');
path.setCommands('M200,100h100v50z');
},
'SHAPE - add map path': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 1024,
@@ -1193,12 +1241,12 @@ Test.prototype.tests = {
stroke: '#999',
strokeWidth: 1,
/*
shadow: {
color: 'black',
blur: 2,
offset: [10, 10]
}
*/
shadow: {
color: 'black',
blur: 2,
offset: [10, 10]
}
*/
});
path.on('mouseover', function() {
@@ -1214,7 +1262,7 @@ Test.prototype.tests = {
mapLayer.add(path);
}
stage.add(mapLayer);
},