javascript - 如何计算旋转椭圆上的点

Question

我有工作代码来查找椭圆上给定 Angular x,y :

getPointOnEllipse(origin_x, origin_y, radius_x, radius_y, angle) {

  var r_end_angle = end_angle / 360 * 2 * Math.PI;
  var x        = origin_x + Math.cos(r_end_angle) * radius_x;
  var y        = origin_y + Math.sin(r_end_angle) * radius_y;

  return {x: x, y: y}

我的问题是，如果椭圆以 Angular r 旋转，我该如何进行此计算，就好像由以下方法创建的:

ellipse(origin_x, origin_y, radius_x, radius_y, r);

更新:我尝试了下面的建议，但不太有效。这是原始 (0) 旋转:

这是旋转大约 90 度后的结果:

这是我尝试过的代码:

/* 
* origin_x - Center of the Ellipse X
* origin_y - Center of the Ellipse Y
* radius_x - Radius X
* radius_y - Radius Y
* angle    - angle along the ellipse on which to place the handle
* rotation - Angle which the ellipse is rotated
*/
getPointOnEllipse(origin_x, origin_y, radius_x, radius_y, angle, rotation) {
 var r_end_angle = (angle + rotation) / 360 * 2 * Math.PI;
 var endX        = origin_x + Math.cos(r_end_angle) * radius_x;
 var endY        = origin_y + Math.sin(r_end_angle) * radius_y;

 var cosA  = Math.cos(rotation);
 var sinA  = Math.sin(rotation);
 var dx    = endX - origin_x;
 var dy    = endY - origin_y;

 rotated_x = origin_x + dx * cosA - dy * sinA;
 rotated_y = origin_y + dx * sinA + dy * cosA;

这是一些日志记录:

X 369、Y 233、radiusX 104、radiusY 17、end_angle 0、旋转 0、endX 473、endY 233、cosA 1、sinA 0、dx 104、dy 0、rotated_x 473、rotated_y 233

X 369、Y 233、radiusX 104、radiusY 17、end_angle 90、旋转 0、endX 369、endY 250、cosA 1、sinA 0、dx 0、dy 17、rotated_x 369、rotated_y 250

X 369、Y 233、radiusX 104、radiusY 17、end_angle 180、旋转 0、endX 265、endY 233、cosA 1、sinA 0、dx -104、dy 0、rotated_x 265、rotated_y 233

X 369、Y 233、radiusX 104、radiusY 17、end_angle 270、旋转 0、endX 369、endY 216、cosA 1、sinA 0、dx 0、dy -17、rotated_x 369、rotated_y 216

旋转 90 度后，这些点似乎并未落在椭圆上:

X 369，Y 233，半径X 104，半径Y 17，结束 Angular 0，旋转96.40608527543233，endX 357.396254311691，endY 249.89385326910204，cosA -0.5542897094655916，sinA 0.8323238059676955，dx -11.603745688309004，dy 16.89385326910204，rotated_x 361.3706805758866，rotated_y 213.97783720494053

X 369，Y 233，radiusX 104，radiusY 17，end_angle 90，旋转 96.40608527543233，endX 265.6493682360816，endY 231.10323387787258，cosA -0.5542897094655916，sin A 0.8323238059676955，dx -103.35063176391839，dy -1.896766122127417，rotated_x 427.86491525130737，rotated_y 148.03016676384783

X 369，Y 233，半径X 104，半径Y 17，结束 Angular 180，旋转96.40608527543233，endX 380.603745688309，endY 216.10614673089796，cosA -0.5542897094655916，sin A 0.8323238059676955，dx 11.603745688309004，dy -16.89385326910204，rotated_x 376.6293194241134，rotated_y 252.02216279505947

X 369，Y 233，半径X 104，半径Y 17，结束 Angular 270，旋转96.40608527543233，endX 472.35063176391833，endY 234.89676612212745，cosA -0.5542897094655916 ，sinA 0.8323238059676955，dx 103.35063176391833，dy 1.8967661221274454，rotated_x 310.1350847486927，rotated_y 317.969833236

我确定我这里出了问题 - 有什么想法吗？

Answer 1

您实际上可能不需要计算这个位置。

canvas API 提供了控制上下文当前转换矩阵的方法。
在许多情况下，接受这一点比自己计算一切要方便得多。

例如，您的示例将四个正方形相对于椭圆本身的变换放置。因此，您需要做的就是首先将变换矩阵设置为该椭圆的位置，然后仅将其移动每个正方形的相对位置。

这是一个快速编写的示例:

const ctx = canvas.getContext('2d');

class Shape {
  constructor(cx, cy, parent) {
    this.cx = cx;
    this.cy = cy;
    this.parent = parent;
    this.path = new Path2D();
    this.angle = 0;
    this.color = "black";
  }
  applyTransform() {
    if (this.parent) { // recursively apply all the transforms
      this.parent.applyTransform();
    }
    ctx.transform(1, 0, 0, 1, this.cx, this.cy);
    ctx.rotate(this.angle);
  }
}

const rad_x = (canvas.width / 1.3) / 2;
const rad_y = (canvas.height / 1.3) / 2;

class Rect extends Shape {
  constructor(dx, dy, parent) {
    super(rad_x * dx, rad_y * dy, parent);
    this.path.rect(-5, -5, 10, 10);
    Object.defineProperty(this, 'angle', {
      get() {
        // so the squares are not rotated
        return parent.angle * -1;
      }
    })
  }
}

const ellipse = new Shape(canvas.width / 2, canvas.height / 2);
ellipse.path.ellipse(0, 0, rad_x, rad_y, 0, 0, Math.PI * 2);

const shapes = [ellipse].concat(
  [
    new Rect(0, -1, ellipse),
    new Rect(1, 0, ellipse),
    new Rect(0, 1, ellipse),
    new Rect(-1, 0, ellipse)
  ]
);

const mouse = {x:0, y:0};
canvas.onmousemove = ({offsetX, offsetY}) => {
  mouse.x = offsetX;
  mouse.y = offsetY;
};

draw();

function clearTransform() {
  ctx.setTransform(1, 0, 0, 1, 0, 0);
}

function draw() {
  // update ellipse's angle
  ellipse.angle = (ellipse.angle + Math.PI / 180) % (Math.PI * 2);
  
  // clear
  clearTransform();
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  // draw the shapes
  shapes.forEach(shape => {
    clearTransform(); // clear the transform matrix completely
    shape.applyTransform(); // will apply their parent's transform too

     // check if we are hovering this shape
     shape.color = ctx.isPointInPath(shape.path, mouse.x, mouse.y) ? 'red' : 'black';

    ctx.strokeStyle = shape.color;
    ctx.stroke(shape.path);
  });

  // do it again
  requestAnimationFrame(draw);
}

<canvas id="canvas"></canvas>