Use Raphael to draw (quad) path (i) (JavaScript)

This chapter describes the path, I think it is more difficult and the essence of the part.

Introduce the basics first:

can refer to:

Http://www.chinasvg.com/support/svg-tutorial/svg-path-directive-guide.html

/*   command explanation: M = moveto   parameter: (x y)

L = lineto  parameter: (x y)  

H = horizontal LineTo    parameter: (x)

V = vertical LineTo   parameter: (y)  

C = Curveto   

S = Smooth Curveto   

Q = quadratic belzier curve   parameter: (x1 y1 x y)  

T = smooth quadratic belzier curveto   parameter: (x y)  

A = Elliptical ARC    parameter: (Rx ry x-axis-rotation large-arc-flag sweep-flag x y)  

Z = Closepath   parameter (none)  /  

Example:

var p1 = Paper.path (' M250 L180 L350 Z '). attr ({stroke: ' red ', ' stroke-width ': 2});         var p2 = Paper.path (' m350,100 h-100 a100,100 0 1,0 100,-100 z '). attr ({stroke: ' Blue ', ' stroke-width ': 2});         var p3 = Paper.path (' m350,300 a100,100 0 1,0 100,-100 z '). attr ({stroke: ' green ', ' stroke-width ': 2});         var p4 = Paper.path (' M150 L100 Z '). attr ({' Stroke-width ': 2}); var p5 = Paper.path (' M100 L150 Z '). attr ({' Stroke-width ': 2});

Note: example P1 defines a path that starts at position 250 150, arrives at position 150 350, then starts from there to 350 350, and finally closes the path in 250 150.

：

Use Raphael to draw (quad) path (i) (JavaScript)