Форум Flasher.ru

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)
-   ActionScript 3.0 (http://www.flasher.ru/forum/forumdisplay.php?f=83)
-   -   Повернуть картинку загруженную через Loader (http://www.flasher.ru/forum/showthread.php?t=132734)

zakatnov 19.11.2009 13:11

Повернуть картинку загруженную через Loader
 
Есть код:
Код AS3:

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 19.11.2009 13:20

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

zakatnov 19.11.2009 13:25

Цитата:

Сообщение от Kidd002 (Сообщение 866696)
imgLoader.rotation = i*(180/xmlList.length);

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

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

Kidd002 19.11.2009 13:27

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

zakatnov 19.11.2009 13:44

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

Kidd002 19.11.2009 13:54

Код AS3:

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 19.11.2009 14:11

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

Felicast 19.11.2009 17:25

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

zakatnov 19.11.2009 17:40

Цитата:

Сообщение от Felicast (Сообщение 866812)
а можно для трансформации использовать матрицу

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

bicubic_bublic 19.11.2009 17:46

Код AS3:

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


Felicast 19.11.2009 17:58

дополню:
Код AS3:

yourImage.transform.matrix = m;


Himerets 19.11.2009 18:06

Код AS3:

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 25.11.2009 20:40

короче сделал как написано тут:
Код AS3:

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 25.11.2009 22:00

два поста в этой теме: 1, 2

zakatnov 26.11.2009 12:23

Felicast

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

dsQuadro 26.11.2009 13:30

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

zakatnov 27.11.2009 15:59

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

SamFR 27.11.2009 16:55

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

zakatnov 28.11.2009 15:51

SamFR

просто я никогда не работал с трансформацией, тут что должно быть:
Код AS3:

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


Felicast 28.11.2009 16:49

Код AS3:

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 28.11.2009 16:55

Цитата:

Сообщение от zakatnov (Сообщение 868848)
...аргументом прям это и передавать? или же тут просто образно написано

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

zakatnov 28.11.2009 22:02

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

zakatnov 28.11.2009 22:06

Вложений: 1
вот что получается:

zakatnov 28.11.2009 22:07

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

SamFR 28.11.2009 23:47

Цитата:

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

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

Felicast 29.11.2009 01:06

Цитата:

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

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 30.11.2009 23:54

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

SamFR 01.12.2009 04:01

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

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


Часовой пояс GMT +4, время: 18:11.

Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2026, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.