UNPKG

4.18 kBJavaScriptView Raw
1var pi = Math.PI,
2 tau = 2 * pi,
3 epsilon = 1e-6,
4 tauEpsilon = tau - epsilon;
5
6function Path() {
7 this._x0 = this._y0 = // start of current subpath
8 this._x1 = this._y1 = null; // end of current subpath
9 this._ = "";
10}
11
12function path() {
13 return new Path;
14}
15
16Path.prototype = path.prototype = {
17 constructor: Path,
18 moveTo: function(x, y) {
19 this._ += "M" + (this._x0 = this._x1 = +x) + "," + (this._y0 = this._y1 = +y);
20 },
21 closePath: function() {
22 if (this._x1 !== null) {
23 this._x1 = this._x0, this._y1 = this._y0;
24 this._ += "Z";
25 }
26 },
27 lineTo: function(x, y) {
28 this._ += "L" + (this._x1 = +x) + "," + (this._y1 = +y);
29 },
30 quadraticCurveTo: function(x1, y1, x, y) {
31 this._ += "Q" + (+x1) + "," + (+y1) + "," + (this._x1 = +x) + "," + (this._y1 = +y);
32 },
33 bezierCurveTo: function(x1, y1, x2, y2, x, y) {
34 this._ += "C" + (+x1) + "," + (+y1) + "," + (+x2) + "," + (+y2) + "," + (this._x1 = +x) + "," + (this._y1 = +y);
35 },
36 arcTo: function(x1, y1, x2, y2, r) {
37 x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r = +r;
38 var x0 = this._x1,
39 y0 = this._y1,
40 x21 = x2 - x1,
41 y21 = y2 - y1,
42 x01 = x0 - x1,
43 y01 = y0 - y1,
44 l01_2 = x01 * x01 + y01 * y01;
45
46 // Is the radius negative? Error.
47 if (r < 0) throw new Error("negative radius: " + r);
48
49 // Is this path empty? Move to (x1,y1).
50 if (this._x1 === null) {
51 this._ += "M" + (this._x1 = x1) + "," + (this._y1 = y1);
52 }
53
54 // Or, is (x1,y1) coincident with (x0,y0)? Do nothing.
55 else if (!(l01_2 > epsilon)) {}
56
57 // Or, are (x0,y0), (x1,y1) and (x2,y2) collinear?
58 // Equivalently, is (x1,y1) coincident with (x2,y2)?
59 // Or, is the radius zero? Line to (x1,y1).
60 else if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon) || !r) {
61 this._ += "L" + (this._x1 = x1) + "," + (this._y1 = y1);
62 }
63
64 // Otherwise, draw an arc!
65 else {
66 var x20 = x2 - x0,
67 y20 = y2 - y0,
68 l21_2 = x21 * x21 + y21 * y21,
69 l20_2 = x20 * x20 + y20 * y20,
70 l21 = Math.sqrt(l21_2),
71 l01 = Math.sqrt(l01_2),
72 l = r * Math.tan((pi - Math.acos((l21_2 + l01_2 - l20_2) / (2 * l21 * l01))) / 2),
73 t01 = l / l01,
74 t21 = l / l21;
75
76 // If the start tangent is not coincident with (x0,y0), line to.
77 if (Math.abs(t01 - 1) > epsilon) {
78 this._ += "L" + (x1 + t01 * x01) + "," + (y1 + t01 * y01);
79 }
80
81 this._ += "A" + r + "," + r + ",0,0," + (+(y01 * x20 > x01 * y20)) + "," + (this._x1 = x1 + t21 * x21) + "," + (this._y1 = y1 + t21 * y21);
82 }
83 },
84 arc: function(x, y, r, a0, a1, ccw) {
85 x = +x, y = +y, r = +r;
86 var dx = r * Math.cos(a0),
87 dy = r * Math.sin(a0),
88 x0 = x + dx,
89 y0 = y + dy,
90 cw = 1 ^ ccw,
91 da = ccw ? a0 - a1 : a1 - a0;
92
93 // Is the radius negative? Error.
94 if (r < 0) throw new Error("negative radius: " + r);
95
96 // Is this path empty? Move to (x0,y0).
97 if (this._x1 === null) {
98 this._ += "M" + x0 + "," + y0;
99 }
100
101 // Or, is (x0,y0) not coincident with the previous point? Line to (x0,y0).
102 else if (Math.abs(this._x1 - x0) > epsilon || Math.abs(this._y1 - y0) > epsilon) {
103 this._ += "L" + x0 + "," + y0;
104 }
105
106 // Is this arc empty? We’re done.
107 if (!r) return;
108
109 // Does the angle go the wrong way? Flip the direction.
110 if (da < 0) da = da % tau + tau;
111
112 // Is this a complete circle? Draw two arcs to complete the circle.
113 if (da > tauEpsilon) {
114 this._ += "A" + r + "," + r + ",0,1," + cw + "," + (x - dx) + "," + (y - dy) + "A" + r + "," + r + ",0,1," + cw + "," + (this._x1 = x0) + "," + (this._y1 = y0);
115 }
116
117 // Is this arc non-empty? Draw an arc!
118 else if (da > epsilon) {
119 this._ += "A" + r + "," + r + ",0," + (+(da >= pi)) + "," + cw + "," + (this._x1 = x + r * Math.cos(a1)) + "," + (this._y1 = y + r * Math.sin(a1));
120 }
121 },
122 rect: function(x, y, w, h) {
123 this._ += "M" + (this._x0 = this._x1 = +x) + "," + (this._y0 = this._y1 = +y) + "h" + (+w) + "v" + (+h) + "h" + (-w) + "Z";
124 },
125 toString: function() {
126 return this._;
127 }
128};
129
130export default path;