SVGPathRebuilder.ts 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. import { PathRebuilder } from '../core/PathProxy';
  2. import { isAroundZero } from './helper';
  3. const mathSin = Math.sin;
  4. const mathCos = Math.cos;
  5. const PI = Math.PI;
  6. const PI2 = Math.PI * 2;
  7. const degree = 180 / PI;
  8. export default class SVGPathRebuilder implements PathRebuilder {
  9. private _d: (string | number)[]
  10. private _str: string
  11. private _invalid: boolean
  12. // If is start of subpath
  13. private _start: boolean
  14. private _p: number
  15. reset(precision?: number) {
  16. this._start = true;
  17. this._d = [];
  18. this._str = '';
  19. this._p = Math.pow(10, precision || 4);
  20. }
  21. moveTo(x: number, y: number) {
  22. this._add('M', x, y);
  23. }
  24. lineTo(x: number, y: number) {
  25. this._add('L', x, y);
  26. }
  27. bezierCurveTo(x: number, y: number, x2: number, y2: number, x3: number, y3: number) {
  28. this._add('C', x, y, x2, y2, x3, y3);
  29. }
  30. quadraticCurveTo(x: number, y: number, x2: number, y2: number) {
  31. this._add('Q', x, y, x2, y2);
  32. }
  33. arc(cx: number, cy: number, r: number, startAngle: number, endAngle: number, anticlockwise: boolean) {
  34. this.ellipse(cx, cy, r, r, 0, startAngle, endAngle, anticlockwise);
  35. }
  36. ellipse(
  37. cx: number, cy: number,
  38. rx: number, ry: number,
  39. psi: number,
  40. startAngle: number,
  41. endAngle: number,
  42. anticlockwise: boolean
  43. ) {
  44. let dTheta = endAngle - startAngle;
  45. const clockwise = !anticlockwise;
  46. const dThetaPositive = Math.abs(dTheta);
  47. const isCircle = isAroundZero(dThetaPositive - PI2)
  48. || (clockwise ? dTheta >= PI2 : -dTheta >= PI2);
  49. // Mapping to 0~2PI
  50. const unifiedTheta = dTheta > 0 ? dTheta % PI2 : (dTheta % PI2 + PI2);
  51. let large = false;
  52. if (isCircle) {
  53. large = true;
  54. }
  55. else if (isAroundZero(dThetaPositive)) {
  56. large = false;
  57. }
  58. else {
  59. large = (unifiedTheta >= PI) === !!clockwise;
  60. }
  61. const x0 = cx + rx * mathCos(startAngle);
  62. const y0 = cy + ry * mathSin(startAngle);
  63. if (this._start) {
  64. // Move to (x0, y0) only when CMD.A comes at the
  65. // first position of a shape.
  66. // For instance, when drawing a ring, CMD.A comes
  67. // after CMD.M, so it's unnecessary to move to
  68. // (x0, y0).
  69. this._add('M', x0, y0);
  70. }
  71. const xRot = Math.round(psi * degree);
  72. // It will not draw if start point and end point are exactly the same
  73. // We need to add two arcs
  74. if (isCircle) {
  75. const p = 1 / this._p;
  76. const dTheta = (clockwise ? 1 : -1) * (PI2 - p);
  77. this._add(
  78. 'A', rx, ry, xRot, 1, +clockwise,
  79. cx + rx * mathCos(startAngle + dTheta),
  80. cy + ry * mathSin(startAngle + dTheta)
  81. );
  82. // TODO.
  83. // Usually we can simply divide the circle into two halfs arcs.
  84. // But it will cause slightly diff with previous screenshot.
  85. // We can't tell it but visual regression test can. To avoid too much breaks.
  86. // We keep the logic on the browser as before.
  87. // But in SSR mode wich has lower precision. We close the circle by adding another arc.
  88. if (p > 1e-2) {
  89. this._add('A', rx, ry, xRot, 0, +clockwise, x0, y0);
  90. }
  91. }
  92. else {
  93. const x = cx + rx * mathCos(endAngle);
  94. const y = cy + ry * mathSin(endAngle);
  95. // FIXME Ellipse
  96. this._add('A', rx, ry, xRot, +large, +clockwise, x, y);
  97. }
  98. }
  99. rect(x: number, y: number, w: number, h: number) {
  100. this._add('M', x, y);
  101. // Use relative coordinates to reduce the size.
  102. this._add('l', w, 0);
  103. this._add('l', 0, h);
  104. this._add('l', -w, 0);
  105. // this._add('L', x, y);
  106. this._add('Z');
  107. }
  108. closePath() {
  109. // Not use Z as first command
  110. if (this._d.length > 0) {
  111. this._add('Z');
  112. }
  113. }
  114. _add(cmd: string, a?: number, b?: number, c?: number, d?: number, e?: number, f?: number, g?: number, h?: number) {
  115. const vals = [];
  116. const p = this._p;
  117. for (let i = 1; i < arguments.length; i++) {
  118. const val = arguments[i];
  119. if (isNaN(val)) {
  120. this._invalid = true;
  121. return;
  122. }
  123. vals.push(Math.round(val * p) / p);
  124. }
  125. this._d.push(cmd + vals.join(' '));
  126. this._start = cmd === 'Z';
  127. }
  128. generateStr() {
  129. this._str = this._invalid ? '' : this._d.join('');
  130. this._d = [];
  131. }
  132. getStr() {
  133. return this._str;
  134. }
  135. }