如何计算旋转椭圆上的一个点

Question

我有工作代码可以找到椭圆上给定角度的 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}

我的问题是，如果椭圆以角度 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_y233

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_y250

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, radiusX 104, radiusY 17, end_angle 0, rotation 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, rotation 96.40608527543233, endX 265.6493682360816, endY 231.10323387787258, cosA -0.5542897094655916, sinA 0.8323238059676955, dx -103.35063176391839, dy -1.896766122127417, rotated_x 427.86491525130737, rotated_y 148.03016676384783

X 369, Y 233, radiusX 104, radiusY 17, end_angle 180, rotation 96.40608527543233, endX 380.603745688309, endY 216.10614673089796, cosA -0.5542897094655916, sinA 0.8323238059676955, dx 11.603745688309004, dy -16.89385326910204, rotated_x 376.6293194241134，rotated_y 252.02216279505947

X 369, Y 233, radiusX 104, radiusY 17, end_angle 270, rotation 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

只需围绕椭圆中心旋转函数得到的点：

function rotatePoint(x, y, originX, originY, rotation) {
  const cosA = Math.cos(rotation);
  const sinA = Math.sin(rotation);
  const dx = x - originX;
  const dy = y - originY;
  return {
    x: originX + dx * cosA - dy * sinA,
    y: originY + dx * sinA + dy * cosA
  }
}

请注意你的函数getPointOnEllipse没有return点对应的圆心角。

Answer 2

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

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>

如何计算旋转椭圆上的一个点

How to calculate a point on a rotated ellipse

javascript

canvas

ellipse