Вращение изображения вокруг центра ViewPort - Страница 2

Sonet · 14.01.2014, 22:14

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

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

dimarik · 14.01.2014, 22:29

Цитата:

Сообщение от Sonet

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

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

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

Sonet · 14.01.2014, 22:46

Цитата:

Сообщение от dimarik

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

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

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

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

Akopalipsis · scrollRect.swf (38.8 Кб)

Цитата:

Геометрия от этого не меняется, поэтому я создал тему в более популярном разделе 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 Кб)

Sonet · 15.01.2014, 13:09

А почему вы вращаете _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)). Вроде по сути все то же самое, но не работает.

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

Akopalipsis · 15.01.2014, 14:19

Цитата:

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

Прочтя -

Цитата:

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

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

Цитата:

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

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

Цитата:

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

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

Sonet · 15.01.2014, 14:22

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

Akopalipsis · 15.01.2014, 14:46

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

Цитата:

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

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

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

Sonet · 15.01.2014, 14:53

Цитата:

Сообщение от Akopalipsis

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

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

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

У меня так.

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

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

Akopalipsis · 15.01.2014, 15:23

Цитата:

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

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

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид