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

implemented 'T' and 't'.

Browse Source
This commit is contained in:
Jason Follas
2012-05-29 15:22:06 -04:00
parent 90c07bdaa5
commit 90364408d7
2 changed files with 94 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/shapes/Path.js
View File

@@ -74,13 +74,16 @@ Kinetic.Path.prototype = {
//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
// Note: SVG s,S,t,T,a,A not implemented here
// 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'];
var cc = ['m', 'M', 'l', 'L', 'v', 'V', 'h', 'H', 'z', 'Z', 'c', 'C', 'q', 'Q', 't', 'T'];
// convert white spaces to commas
cs = cs.replace(new RegExp(' ', 'g'), ',');
// create pipes so that we can split the commands
@@ -196,6 +199,30 @@ Kinetic.Path.prototype = {
cmd = 'Q'
points.push(cpx, cpy);
break;
case 'T':
var ctlPtx = cpx, ctlPty = cpy;
var prevCmd = ca[ca.length-1];
if (prevCmd.command === 'Q') {
ctlPtx = cpx + (cpx - prevCmd.points[0]);
ctlPty = cpy + (cpy - prevCmd.points[1]);
}
cpx = p.shift();
cpy = p.shift();
cmd = 'Q';
points.push(ctlPtx, ctlPty, cpx, cpy);
break;
case 't':
var ctlPtx = cpx, ctlPty = cpy;
var prevCmd = ca[ca.length-1];
if (prevCmd.command === 'Q') {
ctlPtx = cpx + (cpx - prevCmd.points[0]);
ctlPty = cpy + (cpy - prevCmd.points[1]);
}
cpx += p.shift();
cpy += p.shift();
cmd = 'Q';
points.push(ctlPtx, ctlPty, cpx, cpy);
break;
}
ca.push({

66
tests/js/unitTests.js
View File

@@ -1346,6 +1346,72 @@ Test.prototype.tests = {
layer.add(path);
stage.add(layer);
},
'SHAPE - Quadradic Curve test from SVG w3c spec': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 1024,
height: 480,
throttle: 80,
scale: 0.25,
x: 50,
y: 10
});
var layer = new Kinetic.Layer();
var c = "M200,300 Q400,50 600,300 T1000,300";
var path = new Kinetic.Path({
commands: c,
stroke: 'red',
strokeWidth: 5,
});
layer.add(path);
layer.add(new Kinetic.Circle({
x: 200,
y: 300,
radius: 10,
fill: 'black'
}));
layer.add(new Kinetic.Circle({
x: 600,
y: 300,
radius: 10,
fill: 'black'
}));
layer.add(new Kinetic.Circle({
x: 1000,
y: 300,
radius: 10,
fill: 'black'
}));
layer.add(new Kinetic.Circle({
x: 400,
y: 50,
radius: 10,
fill: '#888'
}));
layer.add(new Kinetic.Circle({
x: 800,
y: 550,
radius: 10,
fill: '#888'
}));
layer.add(new Kinetic.Path({
commands: "M200,300 L400,50L600,300L800,550L1000,300",
stroke: "#888",
strokeWidth: 2
}));
stage.add(layer);
},
'SHAPE - add shape with custom attr pointing to self': function(containerId) {
var stage = new Kinetic.Stage({