Точки на повернутом прямоугольнике

Question

Я пытаюсь вычислить нижнюю левую точку в прямоугольнике, когда он вращается вокруг. Я попытался Google, но, видимо, я что-то упустил. Я пытаюсь использовать матрицу преобразования для вычисления точки.

Для моей установки у меня есть прямоугольный клип с именем «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;
}

Answer 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)

Следовательно , учитывая

1. Центральная точка (xc, yc), в которой вращается материалвокруг
2. точка для отслеживания (x, y) - (угол вашего прямоугольника)
3. вращение 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    

Answer 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);