Paper.path([pathString])
优质
小牛编辑
127浏览
2023-12-01
Creates a <path>
element using the given string as the path's definition
Parameters
- pathStringstringpath string in SVG format
Path string consists of one-letter commands, followed by comma seprarated arguments in numerical form. Example:
"M10,20L30,40"
This example features two commands: M
, with arguments (10, 20)
and L
with arguments (30, 40)
. Uppercase letter commands express coordinates in absolute terms, while lowercase commands express them in relative terms from the most recently declared coordinates.
Here is short list of commands available, for more details see SVG path string format or article about path strings at MDN.
Command | Name | Parameters |
---|---|---|
M | moveto | (x y)+ |
Z | closepath | (none) |
L | lineto | (x y)+ |
H | horizontal lineto | x+ |
V | vertical lineto | y+ |
C | curveto | (x1 y1 x2 y2 x y)+ |
S | smooth curveto | (x2 y2 x y)+ |
Q | quadratic Bézier curveto | (x1 y1 x y)+ |
T | smooth quadratic Bézier curveto | (x y)+ |
A | elliptical arc | (rx ry x-axis-rotation large-arc-flagsweep-flag x y)+ |
R | Catmull-Rom curveto* | x1 y1 (x y)+ |
M10,10R…z
. In this case the path connects back to its starting point.Usage
var c = paper.path("M10 10L90 90");
// draw a diagonal line:
// move to 10,10, line to 90,90