Повернуть картинку загруженную через Loader

[zakatnov]

Есть код:
var radius:Number = 130;
var centerX:Number = 250;
var centerY:Number = 175
var speed:Number = 0.05;
var xml:XML;
var xmlList:XMLList;
var imgLoader:Loader;
var urlLoader:URLLoader = new URLLoader();
urlLoader.load (new URLRequest("xml.xml"));
urlLoader.addEventListener (Event.COMPLETE, handleLoad);

function handleLoad (e:Event):void
{
xml = XML(e.target.data);
xmlList = xml.children();

for (var i:int = 0; i<xmlList.length; i++)
{
imgLoader = new Loader();
imgLoader.load(new URLRequest(xmlList[i].attribute("small")));
imgLoader.rotation = i*(Math.PI/4);
imgLoader.x = radius*Math.cos(imgLoader.rotation)+centerX;
imgLoader.y = radius*Math.sin(imgLoader.rotation)+centerY;
imgLoader.name = xmlList[i].attribute("big");
addChild(imgLoader);
}
}
Сейчас я пока ищу конкретные решения, поэтому код оформил в кадре а не в классе.

и есть XML
<?xml version="1.0" encoding="utf-8"?>
<imgs>
<img big="1.jpg" small="1.jpg">1</img>
<img big="2.jpg" small="2.jpg">1</img>
<img big="3.jpg" small="3.jpg">1</img>
<img big="4.jpg" small="4.jpg">1</img>
<img big="5.jpg" small="5.jpg">1</img>
<img big="6.jpg" small="6.jpg">1</img>
<img big="7.jpg" small="7.jpg">1</img>
<img big="8.jpg" small="8.jpg">1</img>
</imgs>

Собственно задача - загрузить картинки и разместить их по кругу.
сейчас получается так:
http://alexander.zakatnov.ru/1.png

то есть как то странно работает свойство rotation оно поворачивает объект не только от центра окружности, но и относительно самого себя, подскажите как сделать, чтобы было так:
http://alexander.zakatnov.ru/1.edit.png

Заранее спасибо

[Kidd002]

imgLoader.rotation = i*(180/xmlList.length);

[zakatnov]

imgLoader.rotation = i*(180/xmlList.length);

там нужно не в градусах а в радианах указывать, поэтому если ваш пример перевести в радианы получается тоже что и у меня :)

imgLoader.rotation = i*(Math.PI*2/xmlList.length);

[Kidd002]

Попробуйте не переводить. rotation измеряется в градусах. И там не 180 нужно поставить, а 360.

[zakatnov]

получается так:
http://alexander.zakatnov.ru/2.PNG

[Kidd002]

imgLoader.rotation = i*360/xmlList.length+90;//поправка на 90 град.
imgLoader.x = radius*Math.cos(i*2*Math.PI/xmlList.length)+centerX;//cos и sin принимают в параметры радианы
imgLoader.y = radius*Math.sin(i*2*Math.PI/xmlList.length)+centerY;

[bicubic_bublic]

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

[Felicast]

а можно для трансформации использовать матрицу

[zakatnov]

а можно для трансформации использовать матрицу

Пример в студию :)

[bicubic_bublic]

var m:Matrix = new Matrix();
m.translate(- IMG_WIDTH / 2, - IMG_HEIGHT - radius);
m.rotate(angle); // angle в радианах.

[Felicast]

дополню:

yourImage.transform.matrix = m;

[Himerets]

for (var i:int = 0; i<xmlList.length; i++)
{
var tempContainer:Sprite = new Sprite();
tempContainer.addChild(imgLoader);
imgLoader.x = 100; //расстояние изображения от центра "круга"
imgLoader.y = -imgLoader.width/2;
addChild(tempContainer);
tempContainer.x = //в центр твоего "круга"
tempContainer.y = //в центр твоего "круга"
tempContainer.rotation = i*360/xmlList.length+90;
}

Я не пробовал. Пробуй. Должно получиться

[zakatnov]

короче сделал как написано тут:
imgLoader.rotation = i*360/xmlList.length+90;//поправка на 90 град.
imgLoader.x = radius*Math.cos(i*2*Math.PI/xmlList.length)+centerX;//cos и sin принимают в параметры радианы
imgLoader.y = radius*Math.sin(i*2*Math.PI/xmlList.length)+centerY;

получилось так:
http://alexander.zakatnov.ru/1.demo.png

косяк в том, что поворот картинки происходит относительно левого верхнего угла, а не центра, как программно перенести центр картинки, загружаемой через Loader?

[Felicast]

два поста в этой теме: 1 (http://www.flasher.ru/forum/showpost.php?p=866825&postcount=10), 2 (http://www.flasher.ru/forum/showpost.php?p=866830&postcount=11)

[zakatnov]

Felicast

Мне не подходит решение с помощью матриц, пока что. Поэтому на данный момент мне просто нужно знать как повернуть картинку относительно центра, а не левого верхнего угла :)

[dsQuadro]

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

[zakatnov]

dsQuadro
У меня при нажатии на картинку будет отображаться большой вариант картинки, имя большой картинки хранится в названии маленькой, и сейчас мне не охота гемороится с отлавливанием имени картинки внутри спрайта, если есть возможность покажи на пальцах как бы ты это сделал.

[SamFR]

zakatnov, вам же Felicast показал хороший вариант. С помощью него можно повернуть объект относительно любой точки, будь то центр, угол или какая-нибудь другая точка.

[zakatnov]

SamFR

просто я никогда не работал с трансформацией, тут что должно быть:
m.translate(- IMG_WIDTH / 2, - IMG_HEIGHT - radius); //аргументом прям это и передавать? или же тут просто образно написано

[Felicast]

var m:Matrix = new Matrix();
m.translate(- yourImage.width / 2, - yourImage.height - radius); //если хотите ворочать относительно центра круга
//m.translate(- yourImage.width / 2, - yourImage.height / 2); //если хотите ворочать относительно центра самой картинки (потом придется еще поменять координаты)
m.rotate(angle); // angle в радианах.
yourImage.transform.matrix = m;
//больше никаких манипуляций с положением не надо

[SamFR]

...аргументом прям это и передавать? или же тут просто образно написано

Э, как бы вам сказать... Предполагается, что на месте IMG_WIDTH должна быть ширина загруженного изображения (image.width), а на месте IMG_HEIGHT – высота (image.height). Величина radius обозначает радиус, то есть расстояние от центра картинки до центра окружности.

[zakatnov]

спасибо большое, Felicast
только все равно он вращает их относительно верхнего левого угла а не центра ((

[zakatnov]

вот что получается:

[zakatnov]

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

[SamFR]

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

Легче всего добавить все эти картинки в контейнер (они будут расположены по кругу относительно его центра), а крутить уже сам контейнер. Можно, конечно, и через матрицу трансформации.

[Felicast]

только все равно он вращает их относительно верхнего левого угла а не центра ((
да вы правы, сам попробовал только что. немного надо модернизировать:

var images:Array = new Array();
var imageCount:int = 10;
var circleCenter:Point = new Point(300, 300);;
var dr:Number = (Math.PI * 2) / imageCount;
var radius:int = 200;

var tmpImage:Bitmap = null;
var bitmapData:Avatar = new Avatar(0, 0);
for (var i:int = 0; i < imageCount; ++i)
{
tmpImage = new Bitmap(bitmapData);
tmpImage.x = circleCenter.x;
tmpImage.y = circleCenter.y;
tmpImage.smoothing = true;
images.push(tmpImage);
addChild(tmpImage);
}

addEventListener(Event.ENTER_FRAME, enterFrameHandler);

var iterator:Number = 0.0;

function enterFrameHandler(event:Event):void
{

var transformMatrix:Matrix;
for (var i:int = 0; i < images.length; ++i)
{
transformMatrix = new Matrix();
transformMatrix.translate(-images[i].bitmapData.width / 2, -images[i].bitmapData.height / 2 - radius);
transformMatrix.rotate(iterator + dr * i);
transformMatrix.translate(circleCenter.x, circleCenter.y);
images[i].transform.matrix = transformMatrix;
}
graphics.lineStyle(1, 0x000000);
graphics.drawCircle(circleCenter.x, circleCenter.y, 2);
iterator += 0.01;
}

[zakatnov]

Вот Felicast, огромное спасибо, только если вам не затруднит, можно с пояснениями, просто в вашем примере есть вещи о которых я и не подозревал :) и не могу понять откуда берутся картинки, буду просто очень сильно благодарен!!

[SamFR]

в библиотеке должна лежать картинка (не мувик, а именно картинка), залинкованная как Avatar, и со значением поля Base class равным flash.display.BitmapData.

если хотите грузить через лоадер – вместо объектов Bitmap используйте объекты Loader, либо выдирайте из них битмапдату.