lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-19 10:47:59 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Implemented 'c', 'C', 'q', 'Q' paths

Browse Source
This commit is contained in:
Jason Follas
2012-05-29 14:41:23 -04:00
parent d0acfb14e1
commit 90c07bdaa5
2 changed files with 107 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/shapes/Path.js
View File

@@ -26,11 +26,13 @@ Kinetic.Path = function(config) {
break; break;
case 'M': case 'M':
context.moveTo(p[0], p[1]); context.moveTo(p[0], p[1]);
c = 'L'; // Subsequent points are treated as lineTo
break; break;
//case 'C': case 'C':
// context.bezierCurveTo(p[0], p[1], p[2], p[3], path[i].p.x, path[i].p.y); context.bezierCurveTo(p[0], p[1], p[2], p[3], p[4], p[5]);
break;
case 'Q':
context.quadraticCurveTo(p[0], p[1], p[2], p[3]);
break;
case 'z': case 'z':
context.closePath(); context.closePath();
break; break;
@@ -71,13 +73,14 @@ Kinetic.Path.prototype = {
//C (x1 y1 x2 y2 x y)+ Absolute Bezier curve //C (x1 y1 x2 y2 x y)+ Absolute Bezier curve
//q (x1 y1 x y)+ Relative Quadratic Bezier //q (x1 y1 x y)+ Relative Quadratic Bezier
//Q (x1 y1 x y)+ Absolute Quadratic Bezier //Q (x1 y1 x y)+ Absolute Quadratic Bezier
// Note: SVG s,S,t,T,a,A not implemented here // Note: SVG s,S,t,T,a,A not implemented here
// command string // command string
var cs = this.attrs.commands; var cs = this.attrs.commands;
// command chars // command chars
var cc = ['m', 'M', 'l', 'L', 'v', 'V', 'h', 'H', 'z', 'Z']; var cc = ['m', 'M', 'l', 'L', 'v', 'V', 'h', 'H', 'z', 'Z', 'c', 'C', 'q', 'Q'];
// convert white spaces to commas // convert white spaces to commas
cs = cs.replace(new RegExp(' ', 'g'), ','); cs = cs.replace(new RegExp(' ', 'g'), ',');
// create pipes so that we can split the commands // create pipes so that we can split the commands
@@ -113,52 +116,91 @@ Kinetic.Path.prototype = {
break; break;
var cmd = undefined; var cmd = undefined;
var points = [];
// convert l, H, h, V, and v to L // convert l, H, h, V, and v to L
switch(c) { switch(c) {
case 'm':
cmd = 'M'; // Note: Keep the lineTo's above the moveTo's in this switch
case 'l':
cpx += p.shift(); cpx += p.shift();
cpy += p.shift(); cpy += p.shift();
cmd = 'L';
points.push(cpx, cpy);
break;
case 'L':
cpx = p.shift();
cpy = p.shift();
points.push(cpx, cpy);
break;
// Note: lineTo handlers need to be above this point
case 'm':
cpx += p.shift();
cpy += p.shift();
cmd = 'M';
points.push(cpx, cpy);
c = 'l'; // subsequent points are treated as relative lineTo c = 'l'; // subsequent points are treated as relative lineTo
break; break;
case 'M': case 'M':
cmd = 'M';
cpx = p.shift(); cpx = p.shift();
cpy = p.shift(); cpy = p.shift();
cmd = 'M';
points.push(cpx, cpy);
c = 'L'; // subsequent points are treated as absolute lineTo c = 'L'; // subsequent points are treated as absolute lineTo
break; break;
case 'l':
cmd = 'L';
cpx += p.shift();
cpy += p.shift();
break;
case 'L':
cmd = 'L';
cpx = p.shift();
cpy = p.shift();
break;
case 'h': case 'h':
cmd = 'L';
cpx += p.shift(); cpx += p.shift();
cmd = 'L';
points.push(cpx, cpy);
break; break;
case 'H': case 'H':
cmd = 'L';
cpx = p.shift(); cpx = p.shift();
cmd = 'L';
points.push(cpx, cpy);
break; break;
case 'v': case 'v':
cmd = 'L';
cpy += p.shift(); cpy += p.shift();
cmd = 'L';
points.push(cpx, cpy);
break; break;
case 'V': case 'V':
cmd = 'L';
cpy = p.shift(); cpy = p.shift();
cmd = 'L';
points.push(cpx, cpy);
break;
case 'C':
points.push(p.shift(), p.shift(), p.shift(), p.shift());
cpx = p.shift();
cpy = p.shift();
points.push(cpx, cpy);
break;
case 'c':
points.push(cpx + p.shift(), cpy + p.shift(), cpx + p.shift(), cpy + p.shift());
cpx += p.shift();
cpy += p.shift();
cmd = 'C'
points.push(cpx, cpy);
break;
case 'Q':
points.push(p.shift(), p.shift());
cpx = p.shift();
cpy = p.shift();
points.push(cpx, cpy);
break;
case 'q':
points.push(cpx + p.shift(), cpy + p.shift());
cpx += p.shift();
cpy += p.shift();
cmd = 'Q'
points.push(cpx, cpy);
break; break;
} }
ca.push({ ca.push({
command: cmd || c, command: cmd || c,
points: [cpx, cpy] // Need to add additional points if curves, etc. points: points
}); });
} }

54
tests/js/unitTests.js
View File

@@ -1227,7 +1227,7 @@ Test.prototype.tests = {
path.setCommands('M200,100h100v50z'); path.setCommands('M200,100h100v50z');
}, },
'SHAPE - moveTo with implied lineTos and trailing comma': function(containerId) { 'SHAPE - moveTo with implied lineTos and trailing comma': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 1024, width: 1024,
@@ -1268,8 +1268,8 @@ Test.prototype.tests = {
test(path.getCommands() === 'm200,100,100,0,0,50,z', 'commands are incorrect'); test(path.getCommands() === 'm200,100,100,0,0,50,z', 'commands are incorrect');
test(path.getCommandsArray().length === 4, 'commands array should have 4 elements'); test(path.getCommandsArray().length === 4, 'commands array should have 4 elements');
test(path.getCommandsArray()[1].command === 'L', 'second command should be an implied lineTo'); test(path.getCommandsArray()[1].command === 'L', 'second command should be an implied lineTo');
}, },
'SHAPE - add map path': function(containerId) { 'SHAPE - add map path': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@@ -1291,17 +1291,12 @@ Test.prototype.tests = {
fill: '#ccc', fill: '#ccc',
stroke: '#999', stroke: '#999',
strokeWidth: 1, strokeWidth: 1,
/*
shadow: {
color: 'black',
blur: 2,
offset: [10, 10]
}
*/
}); });
if (key === 'US')
test(path.getCommandsArray()[0].command === 'M', 'first command should be a moveTo');
path.on('mouseover', function() { path.on('mouseover', function() {
//console.log(1)
this.setFill('red'); this.setFill('red');
mapLayer.draw(); mapLayer.draw();
}); });
@@ -1317,6 +1312,41 @@ Test.prototype.tests = {
stage.add(mapLayer); stage.add(mapLayer);
}, },
'SHAPE - curved arrow path': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 1024,
height: 480,
throttle: 80,
scale: 1.5,
x: 50,
y: 10
});
var layer = new Kinetic.Layer();
var c = "M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z";
var path = new Kinetic.Path({
commands: c,
fill: '#ccc',
stroke: '#999',
strokeWidth: 1,
});
path.on('mouseover', function() {
this.setFill('red');
layer.draw();
});
path.on('mouseout', function() {
this.setFill('#ccc');
layer.draw();
});
layer.add(path);
stage.add(layer);
},
'SHAPE - add shape with custom attr pointing to self': function(containerId) { 'SHAPE - add shape with custom attr pointing to self': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,