Форум Flasher.ru - Вращение объекта по центру

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

- ActionScript 3.0 (http://www.flasher.ru/forum/forumdisplay.php?f=83)

- - Вращение объекта по центру (http://www.flasher.ru/forum/showthread.php?t=212280)

Вращение объекта по центру

В примере, если зажать мышь и потянуть, создается прямоугольная форма, при нажатии на кнопку, форма делает поворот. Вращается она из точки 0,0. Нужно, чтобы форма вращалась по центру. А в идеале пивот вращения может находиться в произвольном месте.

test.swf (24.7 Кб)

Код AS3:

import flash.events.MouseEvent;

import flash.display.Sprite;

import flash.text.TextField;

import com.greensock.TweenMax;

 

stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);

var obj:Sprite;

 

var btn:Sprite = simpleButton();

addChild(btn);

btn.addEventListener(MouseEvent.CLICK, initRotate);

btn.x = (stage.stageWidth/2) - (btn.width/2);

btn.y = 200;

 

function initRotate(e:MouseEvent):void {

 

        if(obj != null) TweenMax.to(obj, 1, {rotation:90});

}

 

function onDown(e:MouseEvent):void {

        if(e.target is Sprite) return;

 

        obj = new Sprite();

        addChild(obj)

        obj.x = mouseX;

        obj.y = mouseY;

 

        stage.addEventListener(MouseEvent.MOUSE_UP, onUp);

        stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove);

 

}

 

 

function onMove(e:MouseEvent):void {

 

        obj.graphics.clear();

        obj.graphics.beginFill(0x0);

        obj.graphics.drawRect(0, 0, obj.mouseX, obj.mouseY);

 

}

 

function onUp(e:MouseEvent):void {

 

        stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);

        stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMove);

 

}

 

 

function simpleButton():Sprite {

 

        var sp:Sprite = new Sprite();

        sp.buttonMode = true;

        sp.graphics.beginFill(0xCCCCCC);

        sp.graphics.drawRect(0,0,100,20);

        sp.graphics.endFill();

        var txt:TextField = new TextField();

        sp.addChild(txt);

        txt.mouseEnabled = false;

        txt.text = "ROTATE";

        txt.autoSize = "left"

        txt.x = (sp.width/2) - (txt.width/2);

        return sp;

}

Нужно положить объект в контейнер и сдвинуть координаты на минус половину длины и ширины.
Вращать контейнер.

Т.е. при отпускании мыши сдвигать созданный объект, который внутри контейнера?
Тогда приходится такой мазохизм делать

Код AS3:

obj.x = -obj.width/2

obj.y = -obj.height/2

 

cont.x = cont.x+(obj.width/2);

cont.y = cont.y+(obj.height/2);

Чтобы при сдвиге объекта он не смещался, приходится в обратную сторону смещать сам контейнер. Как то не очень. Может я не так понял?

Всё так.
Ещё вариант - задействовать матрицу

alatar, круто. Но у меня вся анимация c использованием твинов, как в таком случае использовать подход с матрицей, не знаю.

твинеру всё равно что анимировать вы можете передать ему любую функцию, которая будет принимать "анимируемое" значение.

Так то оно так.
Не могу понять, как применить ваш метод.

Я делаю

Код AS3:

var m:Matrix = mc.transform.matrix;

var mtx:Matrix = rotateAroundTo(m, new Point(координаты пивота), new Point(координаты объекта));

 

TweenMax.to(mc, 1, {x:mtx.tx, y:mtx.ty, rotation:90});

Не?)

Объект улетает в сторону.

Координаты, передаваемые в функцию должены быть в локальных координатах объекта, который необходимо повернуть. Углы, если используются, должны быть в радианах.
А дальше, например так.

Код AS3:

TweenPlugin.activate([TransformMatrixPlugin]);

...

var targetMatrix:Matrix = rotateAroundTo(mc.transform.matrix, mc.globalToLocal(pivot), mc.globalToLocal(координаты куда необходимо повернуться))ж

 

TweenMax.to(mc, 1, {transformMatrix:targetMatrix})

Во оно как, спасибо!

Добавлено через 27 часов 31 минуту
alatar, можно еще вопрос. Теперь по scale из вашего блога) Допустим есть форма квадрата, если я ее делаю шире, а потом поворачиваю на 90 гр. то ширина становится высотой. Как то это странно. Ведь я меняю не width а scale. Есть какие-нибудь варианты решения?

with и height вычмсляемые свойства. По-сути они показывают размеры квадрата описанного вокруг DisplayObject и эквивалентны значениям возвращаемым getBounds() в родительской системе координат.

"Реальные" значения ширины и высоты (как если бы объект не был повернут) можно вычислить, если взять getBounds() в локальных координатах объекта и умножить полученные width и height на scaleX и scaleY, соответственно.

А зачем вам это? Мне в голову приходит не так много случаев, когда это дейтсвительно требуется.

По вопросу выше, я немного ошибся, с этим все отлично.

Но вот интересно, почему при повороте scaleAround объект начинает уменьшаться?

Код AS3:

var targetMatrix:Matrix = rotateAround(symbol.transform.matrix, symbol.globalToLocal(new Point(pivot.x, pivot.y)), degToRad(180));

TweenMax.to(symbol , 1, { transformMatrix:targetMatrix } )

private function degToRad(deg:Number):Number{

        return deg/180*Math.PI;

}

Transform.swf (26.4 Кб)

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

Цитата:

Сообщение от KiL33 (Сообщение 1190960)

Но вот интересно, почему при повороте scaleAround объект начинает уменьшаться?

Видимо особенности интерполяции матриц в TweenMax, для корректной работы не хватает промежуточных значений.

Цитата:

Сообщение от KiL33 (Сообщение 1190960)

Возможно. Необходимо передать матрицу сначала в scaleAround, потом, полученную матрицу в rotateAroundTo

P.S. Но вообще-то в TweenMax есть готовый плагин TransformAroundPointPlugin который делает то, что вы хотите.

TransformAroundPointPlugin

Да, это то что надо, спасибо!