旋转矩形上的点答案

【问题标题】：Points on a rotated rectangle旋转矩形上的点
【发布时间】：2011-07-29 00:49:31
【问题描述】：

我正在尝试计算矩形旋转时的左下角。我试图用谷歌搜索它，但显然我错过了一些东西。我正在尝试使用转换矩阵来计算点。

对于我的设置，我有一个名为“test”的矩形剪辑和一个名为“pnt”的剪辑，我试图将其保留在左下角。这是我的演示代码。我刚刚把它扔到时间线的第一帧来测试：

//declare initial position of points
pnt.x = (test.x - test.width/2);
pnt.y = (test.y + test.height/2);

//distance between corner and center
var dx:Number = pnt.x - test.x;
var dy:Number = pnt.y - test.y;

addEventListener(Event.ENTER_FRAME,rotate);


//x' = xc + dx cos(theta) - dy sin(theta)
//y' = yc + dx sin(theta) + dy cos(theta)
function rotate(e:Event):void{
    test.rotation++;

    // use the transformation matrix to calculate the new x and y of the corner
    pnt.x = test.x + dx*Math.cos(test.rotation*(Math.PI/180)) - dy*Math.sin(test.rotation*(Math.PI/180));
    pnt.y = test.y + dx*Math.sin(test.rotation*(Math.PI/180)) + dy*Math.cos(test.rotation*(Math.PI/180));

    trace("X: " + Math.cos(rotation));
    trace("Y: " + pnt.y);
    // calculate the new distance to the center
    dx = pnt.x - test.x;
    dy = pnt.y - test.y;
}

【问题讨论】：

您是否尝试过将“pnt”添加为“test”的子对象并将它们作为一个对象旋转？
这是一个尝试解决问题的演示。实际问题存在于我不能依赖嵌入的影片剪辑的物理引擎中。

标签： flash actionscript-3 algorithm geometry

【解决方案1】：

我们可以对单个点的轨迹建模

(x',y') = (xc + r cos(theta + theta0), yc + r sin(theta + theta0))

在哪里

(x', y') = new position
(xc, yc) = center point things rotate around
(x, y) = initial point
r = distance between (x,y) and (xc, yc)
theta = counterclockwise rotation, in radians
theta0 = initial rotation of (x,y), in radians

我们的初始点告诉我们

r sin(theta0) = (y - yc) 
r cos(theta0) = (x - xc)

三角函数：

r cos(theta + theta0) =
r cos(theta)cos(theta0) - r sin(theta)sin(theta0) = 
cos(theta)(x - xc) - sin(theta)(y - yc)

和

r sin(theta + theta0) = 
r sin(theta)cos(theta0) + r cos(theta)sint(theta0)
sin(theta)(x - xc) + cos(theta)(y - yc)

因此，给定

中心点(xc, yc) 旋转的东西
跟踪点(x, y) -（你的矩形角）
旋转theta，以弧度为单位

该点的新位置将是：

x' = xc + dx cos(theta) - dy sin(theta)
y' = yc + dx sin(theta) + dy cos(theta)

dx 和 dy 由

dx = x - xc
dy = y - yc

【讨论】：

我已经编辑了我的代码以尝试执行此操作，但它仍然无法正常工作。现在这个点根本不动。我是否以某种方式错误地实施了它？我将原始帖子中的代码更改为现在的代码。
你不应该重置dx - 它只取决于初始位置。
是的，就是这样。非常感谢。
仅供参考：上面使用的“theta”不是度数，而是弧度。从度数计算弧度：radians = (degrees * Pi / 180)。除此之外，这个答案非常有效（我不得不查看很多答案才能找到这个有效的答案）！另外......我想稍微翻转一下并解决x和y而不是x'和y'（我知道我的目的地，但我需要知道从哪里开始）。谁能提供一点帮助？谢谢！
回复：求解x/y 而不是x'/y'...theta = (theta * -1)Durrr.... =)

【解决方案2】：

对于那些像我一样通过 Google 发现此内容的人...

这是 JavaScript/jQuery 形式的上述答案，其中 $element 是 $('#element') jQuery 对象，iDegrees 是您希望旋转的角度，iX/iY 是指向该点的坐标您想知道的目的地，iCenterXPercent/iCenterYPercent 表示将发生旋转的元素的百分比（根据 CSS 的 transform-origin）：

function XYRotatesTo($element, iDegrees, iX, iY, iCenterXPercent, iCenterYPercent) {
    var oPos = $element.position(),
        iCenterX = ($element.outerWidth() * iCenterXPercent / 100),
        iCenterY = ($element.outerHeight() * iCenterYPercent / 100),
        iRadians = (iDegrees * Math.PI / 180),
        iDX = (oPos.left - iCenterX),
        iDY = (oPos.top - iCenterY)
    ;

    return {
        x: iCenterX + (iDX * Math.cos(iRadians)) - (iDY * Math.sin(iRadians)),
        y: iCenterY + (iDX * Math.sin(iRadians)) + (iDY * Math.cos(iRadians))
    };
};

例如：

<div id='element'>...</div> 的左上角在围绕其左下角旋转 45 度时会在哪里结束？

var oXY = XYRotatesTo($('#element'), 45, 0, 0, 0, 100);

【讨论】：