UNPKG

5.25 kBJavaScriptView Raw
1"use strict";
2Object.defineProperty(exports, "__esModule", { value: true });
3exports.arcToCubic = void 0;
4var TAU = Math.PI * 2;
5var mapToEllipse = function (_a, rx, ry, cosphi, sinphi, centerx, centery) {
6 var x = _a.x, y = _a.y;
7 x *= rx;
8 y *= ry;
9 var xp = cosphi * x - sinphi * y;
10 var yp = sinphi * x + cosphi * y;
11 return {
12 x: xp + centerx,
13 y: yp + centery,
14 };
15};
16var approxUnitArc = function (ang1, ang2) {
17 // If 90 degree circular arc, use a constant
18 // as derived from http://spencermortensen.com/articles/bezier-circle
19 var a = ang2 === 1.5707963267948966
20 ? 0.551915024494
21 : ang2 === -1.5707963267948966
22 ? -0.551915024494
23 : (4 / 3) * Math.tan(ang2 / 4);
24 var x1 = Math.cos(ang1);
25 var y1 = Math.sin(ang1);
26 var x2 = Math.cos(ang1 + ang2);
27 var y2 = Math.sin(ang1 + ang2);
28 return [
29 {
30 x: x1 - y1 * a,
31 y: y1 + x1 * a,
32 },
33 {
34 x: x2 + y2 * a,
35 y: y2 - x2 * a,
36 },
37 {
38 x: x2,
39 y: y2,
40 },
41 ];
42};
43var vectorAngle = function (ux, uy, vx, vy) {
44 var sign = ux * vy - uy * vx < 0 ? -1 : 1;
45 var dot = ux * vx + uy * vy;
46 if (dot > 1) {
47 dot = 1;
48 }
49 if (dot < -1) {
50 dot = -1;
51 }
52 return sign * Math.acos(dot);
53};
54var getArcCenter = function (px, py, cx, cy, rx, ry, largeArcFlag, sweepFlag, sinphi, cosphi, pxp, pyp) {
55 var rxsq = Math.pow(rx, 2);
56 var rysq = Math.pow(ry, 2);
57 var pxpsq = Math.pow(pxp, 2);
58 var pypsq = Math.pow(pyp, 2);
59 var radicant = rxsq * rysq - rxsq * pypsq - rysq * pxpsq;
60 if (radicant < 0) {
61 radicant = 0;
62 }
63 radicant /= rxsq * pypsq + rysq * pxpsq;
64 radicant = Math.sqrt(radicant) * (largeArcFlag === sweepFlag ? -1 : 1);
65 var centerxp = ((radicant * rx) / ry) * pyp;
66 var centeryp = ((radicant * -ry) / rx) * pxp;
67 var centerx = cosphi * centerxp - sinphi * centeryp + (px + cx) / 2;
68 var centery = sinphi * centerxp + cosphi * centeryp + (py + cy) / 2;
69 var vx1 = (pxp - centerxp) / rx;
70 var vy1 = (pyp - centeryp) / ry;
71 var vx2 = (-pxp - centerxp) / rx;
72 var vy2 = (-pyp - centeryp) / ry;
73 var ang1 = vectorAngle(1, 0, vx1, vy1);
74 var ang2 = vectorAngle(vx1, vy1, vx2, vy2);
75 if (sweepFlag === 0 && ang2 > 0) {
76 ang2 -= TAU;
77 }
78 if (sweepFlag === 1 && ang2 < 0) {
79 ang2 += TAU;
80 }
81 return [centerx, centery, ang1, ang2];
82};
83var arcToBezier = function (_a) {
84 var px = _a.px, py = _a.py, cx = _a.cx, cy = _a.cy, rx = _a.rx, ry = _a.ry, _b = _a.xAxisRotation, xAxisRotation = _b === void 0 ? 0 : _b, _c = _a.largeArcFlag, largeArcFlag = _c === void 0 ? 0 : _c, _d = _a.sweepFlag, sweepFlag = _d === void 0 ? 0 : _d;
85 var curves = [];
86 if (rx === 0 || ry === 0) {
87 return [{ x1: 0, y1: 0, x2: 0, y2: 0, x: cx, y: cy }];
88 }
89 var sinphi = Math.sin((xAxisRotation * TAU) / 360);
90 var cosphi = Math.cos((xAxisRotation * TAU) / 360);
91 var pxp = (cosphi * (px - cx)) / 2 + (sinphi * (py - cy)) / 2;
92 var pyp = (-sinphi * (px - cx)) / 2 + (cosphi * (py - cy)) / 2;
93 if (pxp === 0 && pyp === 0) {
94 return [{ x1: 0, y1: 0, x2: 0, y2: 0, x: cx, y: cy }];
95 }
96 rx = Math.abs(rx);
97 ry = Math.abs(ry);
98 var lambda = Math.pow(pxp, 2) / Math.pow(rx, 2) + Math.pow(pyp, 2) / Math.pow(ry, 2);
99 if (lambda > 1) {
100 rx *= Math.sqrt(lambda);
101 ry *= Math.sqrt(lambda);
102 }
103 var _e = getArcCenter(px, py, cx, cy, rx, ry, largeArcFlag, sweepFlag, sinphi, cosphi, pxp, pyp), centerx = _e[0], centery = _e[1], ang1 = _e[2], ang2 = _e[3];
104 // If 'ang2' == 90.0000000001, then `ratio` will evaluate to
105 // 1.0000000001. This causes `segments` to be greater than one, which is an
106 // unecessary split, and adds extra points to the bezier curve. To alleviate
107 // this issue, we round to 1.0 when the ratio is close to 1.0.
108 var ratio = Math.abs(ang2) / (TAU / 4);
109 if (Math.abs(1.0 - ratio) < 0.0000001) {
110 ratio = 1.0;
111 }
112 var segments = Math.max(Math.ceil(ratio), 1);
113 ang2 /= segments;
114 for (var i = 0; i < segments; i++) {
115 curves.push(approxUnitArc(ang1, ang2));
116 ang1 += ang2;
117 }
118 return curves.map(function (curve) {
119 var _a = mapToEllipse(curve[0], rx, ry, cosphi, sinphi, centerx, centery), x1 = _a.x, y1 = _a.y;
120 var _b = mapToEllipse(curve[1], rx, ry, cosphi, sinphi, centerx, centery), x2 = _b.x, y2 = _b.y;
121 var _c = mapToEllipse(curve[2], rx, ry, cosphi, sinphi, centerx, centery), x = _c.x, y = _c.y;
122 return { x1: x1, y1: y1, x2: x2, y2: y2, x: x, y: y };
123 });
124};
125function arcToCubic(x1, y1, rx, ry, angle, LAF, SF, x2, y2) {
126 var curves = arcToBezier({
127 px: x1,
128 py: y1,
129 cx: x2,
130 cy: y2,
131 rx: rx,
132 ry: ry,
133 xAxisRotation: angle,
134 largeArcFlag: LAF,
135 sweepFlag: SF,
136 });
137 return curves.reduce(function (prev, cur) {
138 var x1 = cur.x1, y1 = cur.y1, x2 = cur.x2, y2 = cur.y2, x = cur.x, y = cur.y;
139 prev.push(x1, y1, x2, y2, x, y);
140 return prev;
141 }, []);
142}
143exports.arcToCubic = arcToCubic;
144//# sourceMappingURL=arc-2-cubic.js.map
\No newline at end of file