Paper.path([pathString])

优质

小牛编辑

128浏览

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)+

Catmull-Rom curveto is a not standardSVG command and added to make life easier.

Note: there is a special case when a path consists of only three commands: 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