cubic.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. import { distance, isNumberEqual, getBBoxByArray, piMod } from './util';
  2. import line from './line';
  3. import { snapLength, nearestPoint } from './bezier';
  4. function cubicAt(p0, p1, p2, p3, t) {
  5. var onet = 1 - t; // t * t * t 的性能大概是 Math.pow(t, 3) 的三倍
  6. return onet * onet * onet * p0 + 3 * p1 * t * onet * onet + 3 * p2 * t * t * onet + p3 * t * t * t;
  7. }
  8. function derivativeAt(p0, p1, p2, p3, t) {
  9. var onet = 1 - t;
  10. return 3 * (onet * onet * (p1 - p0) + 2 * onet * t * (p2 - p1) + t * t * (p3 - p2));
  11. }
  12. function extrema(p0, p1, p2, p3) {
  13. var a = -3 * p0 + 9 * p1 - 9 * p2 + 3 * p3;
  14. var b = 6 * p0 - 12 * p1 + 6 * p2;
  15. var c = 3 * p1 - 3 * p0;
  16. var extremas = [];
  17. var t1;
  18. var t2;
  19. var discSqrt;
  20. if (isNumberEqual(a, 0)) {
  21. if (!isNumberEqual(b, 0)) {
  22. t1 = -c / b;
  23. if (t1 >= 0 && t1 <= 1) {
  24. extremas.push(t1);
  25. }
  26. }
  27. }
  28. else {
  29. var disc = b * b - 4 * a * c;
  30. if (isNumberEqual(disc, 0)) {
  31. extremas.push(-b / (2 * a));
  32. }
  33. else if (disc > 0) {
  34. discSqrt = Math.sqrt(disc);
  35. t1 = (-b + discSqrt) / (2 * a);
  36. t2 = (-b - discSqrt) / (2 * a);
  37. if (t1 >= 0 && t1 <= 1) {
  38. extremas.push(t1);
  39. }
  40. if (t2 >= 0 && t2 <= 1) {
  41. extremas.push(t2);
  42. }
  43. }
  44. }
  45. return extremas;
  46. }
  47. // 分割贝塞尔曲线
  48. function divideCubic(x1, y1, x2, y2, x3, y3, x4, y4, t) {
  49. // 划分点
  50. var xt = cubicAt(x1, x2, x3, x4, t);
  51. var yt = cubicAt(y1, y2, y3, y4, t);
  52. // 计算两点之间的差值点
  53. var c1 = line.pointAt(x1, y1, x2, y2, t);
  54. var c2 = line.pointAt(x2, y2, x3, y3, t);
  55. var c3 = line.pointAt(x3, y3, x4, y4, t);
  56. var c12 = line.pointAt(c1.x, c1.y, c2.x, c2.y, t);
  57. var c23 = line.pointAt(c2.x, c2.y, c3.x, c3.y, t);
  58. return [
  59. [x1, y1, c1.x, c1.y, c12.x, c12.y, xt, yt],
  60. [xt, yt, c23.x, c23.y, c3.x, c3.y, x4, y4],
  61. ];
  62. }
  63. // 使用迭代法取贝塞尔曲线的长度,二阶和三阶分开写,更清晰和便于调试
  64. function cubicLength(x1, y1, x2, y2, x3, y3, x4, y4, iterationCount) {
  65. if (iterationCount === 0) {
  66. return snapLength([x1, x2, x3, x4], [y1, y2, y3, y4]);
  67. }
  68. var cubics = divideCubic(x1, y1, x2, y2, x3, y3, x4, y4, 0.5);
  69. var left = cubics[0];
  70. var right = cubics[1];
  71. left.push(iterationCount - 1);
  72. right.push(iterationCount - 1);
  73. return cubicLength.apply(null, left) + cubicLength.apply(null, right);
  74. }
  75. export default {
  76. extrema: extrema,
  77. box: function (x1, y1, x2, y2, x3, y3, x4, y4) {
  78. var xArr = [x1, x4];
  79. var yArr = [y1, y4];
  80. var xExtrema = extrema(x1, x2, x3, x4);
  81. var yExtrema = extrema(y1, y2, y3, y4);
  82. for (var i = 0; i < xExtrema.length; i++) {
  83. xArr.push(cubicAt(x1, x2, x3, x4, xExtrema[i]));
  84. }
  85. for (var i = 0; i < yExtrema.length; i++) {
  86. yArr.push(cubicAt(y1, y2, y3, y4, yExtrema[i]));
  87. }
  88. return getBBoxByArray(xArr, yArr);
  89. },
  90. length: function (x1, y1, x2, y2, x3, y3, x4, y4) {
  91. // 迭代三次,划分成 8 段求长度
  92. return cubicLength(x1, y1, x2, y2, x3, y3, x4, y4, 3);
  93. },
  94. nearestPoint: function (x1, y1, x2, y2, x3, y3, x4, y4, x0, y0, length) {
  95. return nearestPoint([x1, x2, x3, x4], [y1, y2, y3, y4], x0, y0, cubicAt, length);
  96. },
  97. pointDistance: function (x1, y1, x2, y2, x3, y3, x4, y4, x0, y0, length) {
  98. var point = this.nearestPoint(x1, y1, x2, y2, x3, y3, x4, y4, x0, y0, length);
  99. return distance(point.x, point.y, x0, y0);
  100. },
  101. interpolationAt: cubicAt,
  102. pointAt: function (x1, y1, x2, y2, x3, y3, x4, y4, t) {
  103. return {
  104. x: cubicAt(x1, x2, x3, x4, t),
  105. y: cubicAt(y1, y2, y3, y4, t),
  106. };
  107. },
  108. divide: function (x1, y1, x2, y2, x3, y3, x4, y4, t) {
  109. return divideCubic(x1, y1, x2, y2, x3, y3, x4, y4, t);
  110. },
  111. tangentAngle: function (x1, y1, x2, y2, x3, y3, x4, y4, t) {
  112. var dx = derivativeAt(x1, x2, x3, x4, t);
  113. var dy = derivativeAt(y1, y2, y3, y4, t);
  114. return piMod(Math.atan2(dy, dx));
  115. },
  116. };
  117. //# sourceMappingURL=cubic.js.map