首页 文章

HTML5 Canvas：旋转时计算x，y点

提问于
浏览 次
10

我开发了一个HTML5 Canvas应用程序，它涉及读取一个xml文件，该文件描述了我需要在画布上绘制的箭头，矩形和其他形状的位置 .

XML布局示例：

<arrow left="10" top="20" width="100" height="200" rotation="-40" background-color="red"/> 
<rect left="10" top="20" width="100" height="200" rotation="300" background-color="red"/>

如果旋转对象，则涉及在围绕另一个点（左侧，顶部）旋转时计算点的位置（旋转后称为P的新位置） . 我试图想出一个通用函数/公式，我可以用来计算这个点P，但我的数学有点弱，我无法确定我想要使用的弧/正切公式 .

Can you assist me to come up with a formula I can use to calculate point P for rotations that can be both positive & negative?

enter image description here

在上面的例子中：点（14,446）是左边，顶点和点（226,496）是物体的中点，当没有旋转时，点=（左边宽度/ 2，顶部高度/ 2），蓝点是旋转时的中点 . 我知道如何计算点（14,446）和（226,496）之间的线的长度，但不知道如何计算蓝点x，y位置的线 - BTW：这条线的长度与蓝点之间的线相同（14446）

len = sqrt( (496-446)^2 + (226-14)^2 );
    = 227.56;
javascript math html5-canvas trigonometry

3 回答

  • 18

    我认为在您的情况下，您应该能够使用以下方程式计算此旋转位置：

    x = R * Math.cos(angle - angle0);
y = R * Math.sin(angle - angle0);
angle  = deg * Math.PI / 180;
angle0 = Math.atan(y0/x0);

    R yor半径向量的长度（在您的示例中为 len ） .
    deg 您旋转的角度，即120°
    x 和 y 您正在寻找的最终位置的坐标 .
    angle 是实际旋转角度（以rad为单位，而不是梯度） .
    angle0 是初始角度点相对于X轴旋转 . 我们需要使用 Math.atan 预先计算它 .

    没有测试过 . 所以试试吧 . 但这个想法就是这样 - 利用三角函数 .

    回复于
  • 3

    坐标计算的一个例子：Dice roll

    回复于
  • -1

    这很简单 . 在围绕坐标系原点的旋转中，角度θ坐标（x，y）正在变化为

    x' = x * cos(Theta) - y * sin(Theta);
y' = x * sin(Theta) + y * cos(Theta);

    所以，你需要的只是将旋转点转换为你拥有的一个点 . 让我们以更简化的方式写它：（x1，y1）=（14,446）和（x2，y2）=（226,496） . 你试图围绕（x1，y1）“旋转”（x2，y2） . 在新坐标系中计算（dx2，dy2），原点为（x1，y1） .

    (dx2,dy2) = (x2-x1,y2-y1);

    现在旋转（正角度是逆时针）：

    dx2' = dx2 * cos(165 Degrees) - dy2 * sin(165 Degrees);
dy2' = dx2 * sin(165 Degrees) + dy2 * cos(165 Degrees);

    最后一步是将点的坐标从（x1，y1）处的原点转换回原始（0,0）;

    x2' = dx2' + x1;
y2' = dy2' + y1;

    ps：也读这个:) http://en.wikipedia.org/wiki/Rotation_matrix并且不要忘记不同编程语言中的大多数三角函数主要处理弧度 .

    pps：我希望我没有害怕你 - 问你是否有任何问题 .

    回复于

相关问题