Форум 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)

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

Если не трудно, можете сделать пример, где есть изображение 200*200 внутри контейнера 100*100 с clipAndEnableScrolling = true. И чтобы оно вот так по таймеру вращалось вокруг центра видимой области.

Цитата:

Сообщение от Sonet (Сообщение 1157215)

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

Вращение контейнера, содержащего изображение, относительно произвольной точки по-прежнему не подходит?

И, судя по clipAndEnableScrolling тема переезжает во флекс.

Цитата:

Сообщение от dimarik (Сообщение 1157238)

Крайне не желательно, т.к. потому надо будет вычислять смещения и т.п. С точки хрения пользователя,а не приложения.

Это свойство я использую, и привел в пример только, чтобы пояснить, что контйенер скрывает части изображения, выступающие за его границы. Геометрия от этого не меняется, поэтому я создал тему в более популярном разделе AS 3.0.

Цитата:

Геометрия от этого не меняется, поэтому я создал тему в более популярном разделе AS 3.0.

Тут я тоже согласен, так как ветку flex я вообще не посещаю.

Цитата:

где есть изображение 200*200 внутри контейнера 100*100 с clipAndEnableScrolling = true.

Что это такое я не знаю, но сделал аналог в as3 -( покликайте по сцене )

Код AS3:

package 

{

        import flash.display.Bitmap;

        import flash.display.DisplayObject;

        import flash.display.Shape;

        import flash.display.Sprite;

        import flash.events.Event;

        import flash.events.MouseEvent;

        import flash.geom.Matrix;

        import flash.geom.Point;

        import flash.geom.Rectangle;

 

        public class RotationTest extends Sprite 

        {

                [Embed(source = "../../../bin/14-01-2014 21-30-06.jpg")]

                private var Picture:Class;

                private var _viewPort:Sprite;

 

                private var _isScrollRectVisible:Boolean;

                private var _transformContainer:Sprite;

                private var _rect:Rectangle;

                private var _centerTransformConteiner:Point;

 

                public function RotationTest() 

                {

                        stage.addEventListener(MouseEvent.MOUSE_DOWN, stage_mouseDownHandler);

 

                        _viewPort = new Sprite();

                        _viewPort.graphics.beginFill(0x2E2E2E);

                        _viewPort.graphics.drawRect(0, 0, 500, 300);

                        _viewPort.x = 50;

                        _viewPort.y = 50;

                        super.addChild(_viewPort);

                        var img:Bitmap = new Picture();

 

                        _rect = new Rectangle(0, 0, 100, 100);

 

                        _transformContainer = new Sprite();

                        _transformContainer.scrollRect = _rect;

                        _transformContainer.x = 100;

                        _transformContainer.y = 100;

                        img.x -= 40;

                        img.y -= 30;

                        _transformContainer.addChild(img);

                        _viewPort.addChild(_transformContainer);

 

                        _isScrollRectVisible = true;

 

                        _centerTransformConteiner = new Point(_transformContainer.x + _rect.width * 0.5, _transformContainer.y + _rect.height * 0.5);

                        this.drawPoint(_centerTransformConteiner);

 

                        var frame:Shape = new Shape();

                        frame.graphics.lineStyle(1, 0xFFFFFF);

                        frame.graphics.drawRect(0, 0, _rect.width, _rect.height);

                        frame.graphics.endFill();

                        frame.x = _transformContainer.x;

                        frame.y = _transformContainer.y;

                        _viewPort.addChild(frame);

 

                        stage.addEventListener(Event.ENTER_FRAME, stage_enterFrameHandler);

                }

                private var _angle:Number = 0;

                private function stage_enterFrameHandler(event:Event):void 

                {

                        this.rotationPointMatrix(_transformContainer, (_angle++), _centerTransformConteiner);

                }

                private var DEG_TO_RAD:Number = 3.1415926535897932 / 180;

                public function rotationPointMatrix(target:DisplayObject, angle:Number, point:Point = null):void

                {

                        var matrix:Matrix = target.transform.matrix;

                        matrix.translate( -point.x, -point.y);

                        matrix.rotate( -target.rotation * DEG_TO_RAD);

                        matrix.rotate(angle * DEG_TO_RAD);

                        matrix.translate(point.x, point.y);

                        target.transform.matrix = matrix;

                }

                private function stage_mouseDownHandler(event:MouseEvent):void 

                {

                        if (_isScrollRectVisible)

                        {

                                _transformContainer.scrollRect = null; 

                                _isScrollRectVisible = false;

                        }else

                        {

                                _transformContainer.scrollRect = _rect;

                                _isScrollRectVisible = true;

                        }

                }

                private function drawPoint(point:Point):void

                {

                        var circle:Shape = new Shape();

                        circle.graphics.beginFill(0xFF0006);

                        circle.graphics.drawCircle(0, 0, 2);

                        circle.graphics.endFill();

                        circle.x = point.x;

                        circle.y = point.y;

                        _viewPort.addChild(circle);

                }

 

        }

 

}

scrollRect.swf (38.8 Кб)

А почему вы вращаете _transformContainer да еще и относительно такой точки ( не понимаю, почему учитываются его x и y координаты)? У меня максимально просто случай: изображение и контейнер с установленным scrollRect. Метод будет просто принимать на вход изображение и угол и поворачивать его относительно центра scrollrect (еще одно несоответствие, т.к. у вас scrollRect тоже поворачивается, а мне надо, чтобы я всегда видел прямоугольник, полностью заполненный изображением, которое в свою очередь может быть повернуто).

Я попытался перенести этот код к себе, но у меня не работает ну никак.

Код AS3:

                private static var DEG_TO_RAD:Number = 3.1415926535897932 / 180;

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

                {

                        var xShift:Number = image.x + image.parent.width / 2;

                        var yShift:Number = image.y + image.parent.height / 2;

                        var matrix:Matrix = image.transform.matrix;

                        matrix.translate( -image.x, -image.y);

                        matrix.rotate( -image.rotation * DEG_TO_RAD);

                        matrix.rotate(value * DEG_TO_RAD);

                        matrix.translate(xShift, yShift);

                        image.transform.matrix = matrix;

                }

У меня компонент Image лежит внутри контейнера, scrollRect которого - он сам (т.е. прямоугольник (0, 0, w, h)). Вроде по сути все то же самое, но не работает.

Кстати, у вас похоже тоже погрешность накапливается (от этого никуда не деться?) - после нескольких минут вращения изображение прилично так сдвинулось.

Цитата:

А почему вы вращаете _transformContainer да еще и относительно такой точки

Прочтя -

Цитата:

И чтобы оно вот так по таймеру вращалось вокруг центра видимой области.

мне показалось, что вращение нужно делать, от центра контейнера с картинкой.

Цитата:

еще одно несоответствие, т.к. у вас scrollRect тоже поворачивается, а мне надо, чтобы я всегда видел прямоугольник,

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

Цитата:

Кстати, у вас похоже тоже погрешность накапливается (от этого никуда не деться?)

Уже минут пять крутится и не смещается не на пиксель...

В случае передачи изображения, какую точку надо передать? Она у вас не в методе считается, и мне не понятно почему именно так (не ясно почему вообще в расчет берутся х и y координаты).

Координаты у точки должны быть те, во круг которых вы хотите вращать.

Цитата:

Она у вас не в методе считается, и мне не понятно почему именно так

Считать координаты вращающегося объекта в методе вращения - это как пилить сук на котором сидишь, да и зачем их пересчитывать каждый раз, координаты точки ведь не меняются... Но можно и в методе, но тогда нужно усложнять в два раза. Первым делом, нужно вернуть объект в исходное положение и начальные координаты, то есть рассчитать угол в обратную.. и ещё нужно координаты округлять, так как они смещаются.
Вот как можно ещё сделать.

Добавлено через 5 минут
Вы в коде считаете так, что ширина контейнера равна видимой области, но это не так.

Цитата:

Сообщение от Akopalipsis (Сообщение 1157310)

Координаты у точки должны быть те, во круг которых вы хотите вращать.

Считать координаты вращающегося объекта в методе вращения - это как пилить сук на котором сидишь, да и зачем их пересчитывать каждый раз, координаты точки ведь не меняются... Но можно и в методе, но тогда нужно усложнять в два раза. Первым делом, нужно вернуть объект в исходное положение и начальные координаты, то есть рассчитать угол в обратную.. и ещё нужно координаты округлять, так как они смещаются.
Вот как можно ещё сделать.

Добавлено через 5 минут
Вы в коде считаете так, что ширина контейнера равна видимой области, но это не так.

У меня так.

+ я должен считать точку внутри метода, т.к. я могу двигать изображение и т.о. точка всегда меняется.

Мне не ясно почему вы учитываете х и у координаты вращаемого объекта, ведь точку надо задавать в координатах этого же объекта.

Цитата:

+ я должен считать точку внутри метода, т.к. я могу двигать изображение и т.о. точка всегда меняется.

Если честно, то я уже не понимаю, что Вы хотите сделать. Если Вы изображение кладете в контейнер и двигаете при этом само изображение, то зачем вообще контейнер...
Но это уже Ваша история и помочь Вам я не могу. Удачи Вам! А я пойду экспериментировать с рамкой :)