lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Implemented 's' and 'S'

Browse Source
This commit is contained in:
Jason Follas 2012-05-29 16:14:58 -04:00
parent 90364408d7
commit 59ee010050
2 changed files with 111 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/shapes/Path.js
View File

@ -73,17 +73,20 @@ Kinetic.Path.prototype = {
//C (x1 y1 x2 y2 x y)+ Absolute Bezier curve
//q (x1 y1 x y)+ Relative Quadratic Bezier
//Q (x1 y1 x y)+ Absolute Quadratic Bezier
//t (x y)+ Shorthand/Smooth Relative Quadratic Bezier
//T (x y)+ Shorthand/Smooth Absolute Quadratic Bezier
//s (x2 y2 x y)+ Shorthand/Smooth Relative Bezier curve
//S (x2 y2 x y)+ Shorthand/Smooth Absolute Bezier curve
// Note: SVG s,S,t,T,a,A not implemented here
// Note: SVG a,A not implemented here
//a (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ Relative Elliptical Arc
//A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ Absolute Elliptical Arc
// command string
var cs = this.attrs.commands;
// command chars
var cc = ['m', 'M', 'l', 'L', 'v', 'V', 'h', 'H', 'z', 'Z', 'c', 'C', 'q', 'Q', 't', 'T'];
var cc = ['m', 'M', 'l', 'L', 'v', 'V', 'h', 'H', 'z', 'Z', 'c', 'C', 'q', 'Q', 't', 'T', 's', 'S'];
// convert white spaces to commas
cs = cs.replace(new RegExp(' ', 'g'), ',');
// create pipes so that we can split the commands
@ -186,6 +189,32 @@ Kinetic.Path.prototype = {
cmd = 'C'
points.push(cpx, cpy);
break;
case 'S':
var ctlPtx = cpx, ctlPty = cpy;
var prevCmd = ca[ca.length-1];
if (prevCmd.command === 'C') {
ctlPtx = cpx + (cpx - prevCmd.points[2]);
ctlPty = cpy + (cpy - prevCmd.points[3]);
}
points.push(ctlPtx, ctlPty, p.shift(), p.shift())
cpx = p.shift();
cpy = p.shift();
cmd = 'C';
points.push(cpx, cpy);
break;
case 's':
var ctlPtx = cpx, ctlPty = cpy;
var prevCmd = ca[ca.length-1];
if (prevCmd.command === 'C') {
ctlPtx = cpx + (cpx - prevCmd.points[2]);
ctlPty = cpy + (cpy - prevCmd.points[3]);
}
points.push(ctlPtx, ctlPty, 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();
@ -223,6 +252,7 @@ Kinetic.Path.prototype = {
cmd = 'Q';
points.push(ctlPtx, ctlPty, cpx, cpy);
break;
}
ca.push({
@ -236,7 +266,6 @@ Kinetic.Path.prototype = {
ca.push( {command: 'z', points: [] });
}
return ca;
},
/**
@ -249,7 +278,7 @@ Kinetic.Path.prototype = {
* 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
* M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, Z, z
* @param {String} SVG path command string
*/
setCommands: function(commands) {

74
tests/js/unitTests.js
View File

@ -1412,6 +1412,80 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPE - Cubic Bezier Curve test from SVG w3c spec': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 1024,
height: 480,
throttle: 80,
scale: 0.5,
x: 50,
y: 10
});
var layer = new Kinetic.Layer();
var c = "M100,200 C100,100 250,100 250,200 S400,300 400,200";
var path = new Kinetic.Path({
commands: c,
stroke: 'red',
strokeWidth: 5,
});
layer.add(path);
layer.add(new Kinetic.Circle({
x: 100,
y: 200,
radius: 10,
stroke: '#888'
}));
layer.add(new Kinetic.Circle({
x: 250,
y: 200,
radius: 10,
stroke: '#888'
}));
layer.add(new Kinetic.Circle({
x: 400,
y: 200,
radius: 10,
stroke: '#888'
}));
layer.add(new Kinetic.Circle({
x: 100,
y: 100,
radius: 10,
fill: '#888'
}));
layer.add(new Kinetic.Circle({
x: 250,
y: 100,
radius: 10,
fill: '#888'
}));
layer.add(new Kinetic.Circle({
x: 400,
y: 300,
radius: 10,
fill: '#888'
}));
layer.add(new Kinetic.Circle({
x: 250,
y: 300,
radius: 10,
stroke: 'blue'
}));
stage.add(layer);
},
'SHAPE - add shape with custom attr pointing to self': function(containerId) {
var stage = new Kinetic.Stage({