Вычислить X, Y, высоту и ширину ограничительной рамки повернутый элемент через JavaScript

В основном я задаю этот вопрос для JavaScript: Вычислить координаты ограничивающей рамки из повернутого прямоугольника

В этом случае:

• iX = ширина повернутого (синего) элемента HTML
• iY = высота повернутого (синего) HTML-элемента
• bx = ширина ограничительной рамки (красная)
• by = высота ограничительной рамки (красная)
• x = координата X ограничительной рамки (красная)
• y = Y coord of Bounding Box (красный)
• iAngle/t = угол поворота HTML-элемента (синий; не показан, но используется в коде ниже), к вашему сведению: в этом примере это 37 градусов (не то, чтобы это имело значение для примера)

Как рассчитать X, Y, высоту и ширину ограничивающей рамки (все красные числа), окружающей повернутый элемент HTML (учитывая его ширину, высоту и угол поворота) через JavaScript? Затруднительным моментом для этого будет получение исходных координат X/Y повернутого HTML-элемента (синяя рамка) для использования в качестве смещения (это не представлено в коде ниже). Вполне возможно, что для определения центральной точки придется обратиться к CSS3-преобразованию-происхождению.

У меня есть частичное решение, но расчет координат X/Y не работает должным образом...

var boundingBox = function (iX, iY, iAngle) {
    var x, y, bx, by, t;

    //# Allow for negetive iAngle's that rotate counter clockwise while always ensuring iAngle's < 360
    t = ((iAngle < 0 ? 360 - iAngle : iAngle) % 360);

    //# Calculate the width (bx) and height (by) of the .boundingBox
    //#     NOTE: See https://stackoverflow.com/questions/3231176/how-to-get-size-of-a-rotated-rectangle
    bx = (iX * Math.sin(iAngle) + iY * Math.cos(iAngle));
    by = (iX * Math.cos(iAngle) + iY * Math.sin(iAngle));

    //# This part is wrong, as it's re-calculating the iX/iY of the rotated element (blue)
    //# we want the x/y of the bounding box (red)
    //#     NOTE: See https://stackoverflow.com/questions/9971230/calculate-rotated-rectangle-size-from-known-bounding-box-coordinates
    x = (1 / (Math.pow(Math.cos(t), 2) - Math.pow(Math.sin(t), 2))) * (bx * Math.cos(t) - by * Math.sin(t));
    y = (1 / (Math.pow(Math.cos(t), 2) - Math.pow(Math.sin(t), 2))) * (-bx * Math.sin(t) + by * Math.cos(t));

    //# Return an object to the caller representing the x/y and width/height of the calculated .boundingBox
    return {
        x: parseInt(x), width: parseInt(bx),
        y: parseInt(y), height: parseInt(by)
    }
};

Я чувствую, что я так близко, и все же так далеко...

Большое спасибо за любую помощь, которую вы можете оказать!

В ПОМОЩЬ НЕ-ЯВАСКРИПТЕРАМ...

После поворота HTML-элемента браузер возвращает «матрицу преобразования» или «матрицу поворота», которая выглядит следующим образом: rotate(Xdeg) = matrix (cos(X), sin(X), -sin(X), cos(X), 0, 0);Подробнее см. на этой странице.

У меня есть ощущение, что это поможет нам понять, как получить X, Y ограничительной рамки (красный), основываясь исключительно на ширине, высоте и угле повернутого элемента (синий).

Новая информация

Хм... интересно...

Кажется, что каждый браузер по-разному обрабатывает вращение с точки зрения X/Y! FF полностью его игнорирует, IE и Opera рисуют ограничивающую рамку (но ее свойства не отображаются, например: bx и by), а Chrome и Safari поворачивают прямоугольник! Все правильно сообщают X/Y, кроме FF. Итак... проблема X/Y, кажется, существует только для FF! Как очень странно!

Также следует отметить, что $(document).ready(function () {...});срабатывает слишком рано для распознавания повернутых X/Y (что было частью моя изначальная проблема!). Я вращаю элементы непосредственно перед вызовами запроса X/Y в $(document).ready(function () {...});но они, похоже, не обновляются до некоторого времени после ( !?).

Когда у меня будет немного больше времени, я добавлю jFiddle с примером, но я использую модифицированную форму «jquery-css-transform.js», поэтому мне нужно немного повозиться перед jFiddle. ...

Итак... как дела, FireFox? Это не круто, чувак!

Сюжет сгущается...

Что ж, FF12, похоже, исправила проблему с FF11 и теперь ведет себя как IE и Opera. Но теперь я вернулся к исходной точке с X/Y, но, по крайней мере, теперь я думаю, что знаю, почему...

Похоже, что даже несмотря на то, что браузеры правильно сообщают X/Y для повернутого объекта, «призрак» X / Y все еще существует в версии без поворота.Кажется, что это порядок операций:

• Начиная с не повернутого элемента в X, Y 20,20
• Поверните указанный элемент, в результате чего X, Y будет отображаться как 15,35
• Переместите указанный элемент с помощью JavaScript/CSS на X,Y 10,10.
• Браузер логически отменяет поворот элемента обратно на 20,20, перемещает на 10,10, затем повторно поворачивает, в результате чего X,Y равен 5, 25

Итак... Я хочу, чтобы элемент заканчивался с ротацией постов 10,10,но благодаря тому, что элемент (как бы) повторно повернут после перемещения, результирующие X,Y отличаются от набора X,Y.

Это моя проблема! Итак, что мне действительно нужно, так это функция для получения желаемых координат назначения (10,10) и работы в обратном направлении, чтобы получить начальные координаты X, Y, которые приведут к повороту элемента на 10,10. По крайней мере, теперь я знаю, в чем моя проблема, так как благодаря внутренней работе браузеров кажется, что с повернутым элементом 10 = 5!