ellipse.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. /**
  2. * @fileoverview 椭圆的一些计算,
  3. * - 周长计算参考:https://www.mathsisfun.com/geometry/ellipse-perimeter.html
  4. * - 距离计算参考:https://wet-robots.ghost.io/simple-method-for-distance-to-ellipse/
  5. * @author dxq613@gmail.com
  6. */
  7. import { distance, piMod } from './util';
  8. function copysign(v1, v2) {
  9. var absv = Math.abs(v1);
  10. return v2 > 0 ? absv : absv * -1;
  11. }
  12. export default {
  13. /**
  14. * 包围盒计算
  15. * @param {number} x 椭圆中心 x
  16. * @param {number} y 椭圆中心 y
  17. * @param {number} rx 椭圆 x 方向半径
  18. * @param {number} ry 椭圆 y 方向半径
  19. * @return {object} 包围盒
  20. */
  21. box: function (x, y, rx, ry) {
  22. return {
  23. x: x - rx,
  24. y: y - ry,
  25. width: rx * 2,
  26. height: ry * 2,
  27. };
  28. },
  29. /**
  30. * 计算周长,使用近似法
  31. * @param {number} x 椭圆中心 x
  32. * @param {number} y 椭圆中心 y
  33. * @param {number} rx 椭圆 x 方向半径
  34. * @param {number} ry 椭圆 y 方向半径
  35. * @return {number} 椭圆周长
  36. */
  37. length: function (x, y, rx, ry) {
  38. return Math.PI * (3 * (rx + ry) - Math.sqrt((3 * rx + ry) * (rx + 3 * ry)));
  39. },
  40. /**
  41. * 距离椭圆最近的点
  42. * @param {number} x 椭圆中心 x
  43. * @param {number} y 椭圆中心 y
  44. * @param {number} rx 椭圆 x 方向半径
  45. * @param {number} ry 椭圆 y 方向半径
  46. * @param {number} x0 指定的点 x
  47. * @param {number} y0 指定的点 y
  48. * @return {object} 椭圆上距离指定点最近的点
  49. */
  50. nearestPoint: function (x, y, rx, ry, x0, y0) {
  51. var a = rx;
  52. var b = ry;
  53. // 假如椭圆半径为0则返回圆心
  54. if (a === 0 || b === 0) {
  55. return {
  56. x: x,
  57. y: y,
  58. };
  59. }
  60. // 转换成 0, 0 为中心的椭圆计算
  61. var relativeX = x0 - x;
  62. var relativeY = y0 - y;
  63. var px = Math.abs(relativeX);
  64. var py = Math.abs(relativeY);
  65. var squareA = a * a;
  66. var squareB = b * b;
  67. // const angle0 = Math.atan2(relativeY, relativeX);
  68. var t = Math.PI / 4;
  69. var nearestX; // 椭圆上的任一点
  70. var nearestY;
  71. // 迭代 4 次
  72. for (var i = 0; i < 4; i++) {
  73. nearestX = a * Math.cos(t);
  74. nearestY = b * Math.sin(t);
  75. var ex = ((squareA - squareB) * Math.pow(Math.cos(t), 3)) / a;
  76. var ey = ((squareB - squareA) * Math.pow(Math.sin(t), 3)) / b;
  77. var rx1 = nearestX - ex;
  78. var ry1 = nearestY - ey;
  79. var qx = px - ex;
  80. var qy = py - ey;
  81. var r = Math.hypot(ry1, rx1);
  82. var q = Math.hypot(qy, qx);
  83. var delta_c = r * Math.asin((rx1 * qy - ry1 * qx) / (r * q));
  84. var delta_t = delta_c / Math.sqrt(squareA + squareB - nearestX * nearestX - nearestY * nearestY);
  85. t += delta_t;
  86. t = Math.min(Math.PI / 2, Math.max(0, t));
  87. }
  88. return {
  89. x: x + copysign(nearestX, relativeX),
  90. y: y + copysign(nearestY, relativeY),
  91. };
  92. },
  93. /**
  94. * 点到椭圆最近的距离
  95. * @param {number} x 椭圆中心 x
  96. * @param {number} y 椭圆中心 y
  97. * @param {number} rx 椭圆 x 方向半径
  98. * @param {number} ry 椭圆 y 方向半径
  99. * @param {number} x0 指定的点 x
  100. * @param {number} y0 指定的点 y
  101. * @return {number} 点到椭圆的距离
  102. */
  103. pointDistance: function (x, y, rx, ry, x0, y0) {
  104. var nearestPoint = this.nearestPoint(x, y, rx, ry, x0, y0);
  105. return distance(nearestPoint.x, nearestPoint.y, x0, y0);
  106. },
  107. /**
  108. * 根据比例获取点
  109. * @param {number} x 椭圆中心 x
  110. * @param {number} y 椭圆中心 y
  111. * @param {number} rx 椭圆 x 方向半径
  112. * @param {number} ry 椭圆 y 方向半径
  113. * @param {number} t 指定比例,x轴方向为 0
  114. * @return {object} 点
  115. */
  116. pointAt: function (x, y, rx, ry, t) {
  117. var angle = 2 * Math.PI * t; // 按照角度进行计算,而不按照周长计算
  118. return {
  119. x: x + rx * Math.cos(angle),
  120. y: y + ry * Math.sin(angle),
  121. };
  122. },
  123. /**
  124. * 根据比例计算切线角度
  125. * @param {number} x 椭圆中心 x
  126. * @param {number} y 椭圆中心 y
  127. * @param {number} rx 椭圆 x 方向半径
  128. * @param {number} ry 椭圆 y 方向半径
  129. * @param {number} t 指定比例 0 - 1 之间,x轴方向为 0。在 0-1 范围之外是循环还是返回 null,还需要调整
  130. * @return {number} 角度,在 0 - 2PI 之间
  131. */
  132. tangentAngle: function (x, y, rx, ry, t) {
  133. var angle = 2 * Math.PI * t; // 按照角度进行计算,而不按照周长计算
  134. // 直接使用 x,y 的导数计算, x' = -rx * sin(t); y' = ry * cos(t);
  135. var tangentAngle = Math.atan2(ry * Math.cos(angle), -rx * Math.sin(angle));
  136. // 也可以使用指定点的切线方程计算,成本有些高
  137. // const point = this.pointAt(0, 0, rx, ry, t); // 椭圆的切线同椭圆的中心不相关
  138. // let tangentAngle = -1 * Math.atan((ry * ry * point.x) / (rx * rx * point.y));
  139. // if (angle >= 0 && angle <= Math.PI) {
  140. // tangentAngle += Math.PI;
  141. // }
  142. return piMod(tangentAngle);
  143. },
  144. };
  145. //# sourceMappingURL=ellipse.js.map