Форум Flasher.ru - Вращение изображения вокруг центра ViewPort

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- Flex (http://www.flasher.ru/forum/forumdisplay.php?f=84)

- - Вращение изображения вокруг центра ViewPort (http://www.flasher.ru/forum/showthread.php?t=206131)

Цитата:

К чему эта картинка?

я сделал все что мог, но Вы не как не понимаете :(

Akopalipsis
Я не понимаю, что вы хотите мне сказать. Всем ясно как будут менять координаты. Приклдадываю некоторую иллюстрацию.

Перед поворотом, как я понимаю, мы транслируем точку внутри изображения, которая для пользователя видна, как точка-центр контейнера в topLeft. Потом поворачиваем и транслируем обратно.

Кстати, вы не пробовали мой метод со switch-блоком? Он работает полностью как надо, но накапливает погрешность.

Он статический, на вход нужен компонент, который будем вращать (в моем случае объект класса Image, но подойдет любой) и новый угол вращения (90, 180, 270 и т.п. кратное 90).

Создайте контейнер, установите ему clipRect равный его же размерам и засуньте в него изображение.

Делаю ещё одну попытку :)

Цитата:

Кстати, вы не пробовали мой метод со switch-блоком? Он работает полностью как надо, но накапливает погрешность.

Вам нужно нарисовать на листочке этот блок-switch и как следует подумать над тем, что Вы делаете.
Мой примитивный код, построен на том, что центр, будь то рект-контейнер или что-то другое, ПОСТОЯНЕН!
Тут я немного объясню то, что Вы должны знать, но все-же..
Есть сцена, у неё точка регистрации находится в topLeft. Вот мы создаём контейнер и присваеваем его точки регистрации (300, 300). В этот контейнер кладем картинку в координаты (0,0) и выглядеть это будет так, как буд-то она находится в координатах (300,300), так-как у контейнера уже другая система координат.
Продолжаю, если Вы двигаете картинку ( видимую её часть ) в пространстве, то это не как не должно сказываться на координаты центра контейнера!!!! Вы понимаете? Двигать контейнер или что-то в нем, это не значит, что его собственная система координат меняется! Точка центра как была в координатах (50,50), так она там и будет, даже если Вы сам контейнер за пределы монитора сдвинете!
Продолжаю, Вам нужно, как Вы сами говорите, двигать ОТНОСИТЕЛЬНО ЦЕНТРА КОНТЕЙНЕРА, ширина и высота которого ВСЕГДА ПОСТОЯННА! Так зачем же точку центра искать исходя из-за положения картинки? Центр как был в (50,50) так он там и будет.
Продолжаю, смотрите на свою картинку, видите в topLeft невидимой области находится настоящая точка регистрации картинки. Противоположная часть называется topRight. Вот Вы повернули картинку на 90 градусов, где будет точка регистрации картинки? Там, где в самом начале была точка topRight и то это с условием, что картинка КВАДРАТНАЯ!!! А ширина становиться равной длине!
Возьмите и нарисуйте мои слова и свои слова. Когда Вы это поймете, то я скажу что делать дальше.

Это все я понимаю.

Расскажите какая у Вас вложенность, что в какой контейнер вставляется, и на сколько градусов Вам нужно крутить и относительно чего. я сделаю так же и покажу.

У меня 1 контейнер (сцену я не считаю за контейнер, т.к. мне не надо создавать ее вручную). Я задаю ему позицию и размеры, они никогда не меняются. В него я вкладываю изображение, которое может быть как больше, так и меньше, чем контейнер. У контейнера выставлено проперти clipAndEnableScrolling. Как я понимаю это равносильно выставлению проперти scrollRect со значниеми (0, 0, container.width, container.height) - контейнер сам себе scrollRect.

Вращение на величину кратную +-90 градусов. Повернуть надо изображение (внутри контейнера) относительно центра видимой области. В любой момент изображение может быть сдвинуто (просто меняю х и у координаты) или промасштабированно (тоже относительно центра, делаю без матрицы, просто применяю новый scale фактор и смещения по х и у).

Пока могу сказать только одно, не знаю как у clipAndEnableScrolling, но у scrollRect ширина и высота равняется, так же как и у обычного контейнера, его содержимому.

Хмм. clipAndEnableScrolling влияет только на видимость контейнера. Т.е. допустим я выставил ширину и высоту контейнера по 100, а картинку вставил 200*200. Если это проперти установлено, то я буду видеть только то, что попало в прямоугольник 100*100 и размеры контейнера не будут увеличены.

У меня вопрос возник: matrix.translate изменяет x и y координаты компонента, или перемещает pivot point на заданные величины? Я почему-то считал, что последнее.

я пока воздерживаюсь от комментариев, так как сам на данный момент не знаю железного решения.
Без сохранения начальных координат сделать можно, но на столько затратно, что я лучше промолчу..

Нашел решение без свича. Работает, но накапливает погрешность.

Код AS3:

                public static function rotateImageAroundCenterOfViewPort(image:Image, value:int):void

                {

                        // Calculate rotation and shifts

                        var center:Point = new Point(image.parent.width / 2, image.parent.height / 2);

                        center = image.parent.localToGlobal(center);

                        center = image.globalToLocal(center);

                        var angle:Number = value - image.rotation;

                        var radians:Number = angle * (Math.PI / 180.0);

                        var shiftByX:Number = center.x;

                        var shiftByY:Number = center.y;

                        // Perform rotation

                        var matrix:Matrix = new Matrix();

                        matrix.translate(-shiftByX, -shiftByY);

                        matrix.rotate(radians);

                        matrix.translate(+shiftByX, +shiftByY);

                        matrix.concat(image.transform.matrix);

                        image.transform.matrix = matrix;

                }

Добавлено через 24 часа 16 минут
Финальный вариант, может быть кому-то будет полезен. В конце чуть-чуть хитрим - округляем итоговый угол. На глаз все работает вроде хорошо.

Код AS3:

                public static function rotateImageAroundCenterOfViewPort(image:Image, value:int):void

                {

                        // Calculate rotation and shifts

                        var center:Point = new Point(image.parent.width / 2, image.parent.height / 2);

                        center = image.parent.localToGlobal(center);

                        center = image.globalToLocal(center);

                        var angle:Number = value - image.rotation;

                        var radians:Number = angle * (Math.PI / 180.0);

                        var shiftByX:Number = center.x;

                        var shiftByY:Number = center.y;

                        // Perform rotation

                        var matrix:Matrix = new Matrix();

                        matrix.translate(-shiftByX, -shiftByY);

                        matrix.rotate(radians);

                        matrix.translate(+shiftByX, +shiftByY);

                        matrix.concat(image.transform.matrix);

                        image.transform.matrix = matrix;

                        image.rotation = Math.round(image.rotation);

                }

Первый параметр - компонент Image, который надо повернуть, второй - новый угол вращения (тестировал только с углами, кратными 90 градусов).