arc-2-cubic.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.arcToCubic = void 0;
  4. var TAU = Math.PI * 2;
  5. var 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. };
  16. var 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. };
  43. var 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. };
  54. var 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. };
  83. var 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) +
  99. Math.pow(pyp, 2) / Math.pow(ry, 2);
  100. if (lambda > 1) {
  101. rx *= Math.sqrt(lambda);
  102. ry *= Math.sqrt(lambda);
  103. }
  104. 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];
  105. // If 'ang2' == 90.0000000001, then `ratio` will evaluate to
  106. // 1.0000000001. This causes `segments` to be greater than one, which is an
  107. // unecessary split, and adds extra points to the bezier curve. To alleviate
  108. // this issue, we round to 1.0 when the ratio is close to 1.0.
  109. var ratio = Math.abs(ang2) / (TAU / 4);
  110. if (Math.abs(1.0 - ratio) < 0.0000001) {
  111. ratio = 1.0;
  112. }
  113. var segments = Math.max(Math.ceil(ratio), 1);
  114. ang2 /= segments;
  115. for (var i = 0; i < segments; i++) {
  116. curves.push(approxUnitArc(ang1, ang2));
  117. ang1 += ang2;
  118. }
  119. return curves.map(function (curve) {
  120. var _a = mapToEllipse(curve[0], rx, ry, cosphi, sinphi, centerx, centery), x1 = _a.x, y1 = _a.y;
  121. var _b = mapToEllipse(curve[1], rx, ry, cosphi, sinphi, centerx, centery), x2 = _b.x, y2 = _b.y;
  122. var _c = mapToEllipse(curve[2], rx, ry, cosphi, sinphi, centerx, centery), x = _c.x, y = _c.y;
  123. return { x1: x1, y1: y1, x2: x2, y2: y2, x: x, y: y };
  124. });
  125. };
  126. function arcToCubic(x1, y1, rx, ry, angle, LAF, SF, x2, y2) {
  127. var curves = arcToBezier({
  128. px: x1,
  129. py: y1,
  130. cx: x2,
  131. cy: y2,
  132. rx: rx,
  133. ry: ry,
  134. xAxisRotation: angle,
  135. largeArcFlag: LAF,
  136. sweepFlag: SF,
  137. });
  138. return curves.reduce(function (prev, cur) {
  139. var x1 = cur.x1, y1 = cur.y1, x2 = cur.x2, y2 = cur.y2, x = cur.x, y = cur.y;
  140. prev.push(x1, y1, x2, y2, x, y);
  141. return prev;
  142. }, []);
  143. }
  144. exports.arcToCubic = arcToCubic;
  145. //# sourceMappingURL=arc-2-cubic.js.map