PDA

Просмотр полной версии : Наложить изображение на кружку


SvTol
19.01.2008, 17:40
Есть картинка подгружаемая динамически.
Нужно изогнуть её вокруг кружки, типа она на неё наклеена.
Знаю что нада юзать DisplacementMapFilter, покурил маны -ниче не понял как юзать.
Порыл форум прсотых примеров изгибания нет, везде какие то мега волновые эффекты.
Может кто делал. Дайте код в любом состоянии поди уж допилю сам.

DRAGOnoid
20.01.2008, 00:12
зашёл в хелп
ввожу DisplacementMapFilter
получаю инструкцию и описание Class DisplacementMapFilter с примером.
тупо вставил пример , запустил и получил ровно то что ты хотел.
пример не сложный думаю разберёшься.

SvTol
20.01.2008, 14:49
я блин так и сделал, но получил непонятно что...
попробую ещё раз...

DRAGOnoid
20.01.2008, 15:03
мне больше интересно как заставить это вращаться или например превратить квадратный рисунок в трапецию.

SvTol
20.01.2008, 22:39
а где то был пример вроде,вчера то ка находил помойму здесь

VovkaMorkovka
21.01.2008, 13:06
мне больше интересно как заставить это вращаться или например превратить квадратный рисунок в трапецию.

Рулят преобразования плоскости: смотри, если ты преобразуешь прямоугольник в трапецию, то расстояния между точками ближними к меньшему основанию уменьшаются, а ближними к верхнему краю увеличиваются. Так надо пройтись по трапеции от нижнего основания к средней линии и повыкидывать точки пропорционально длине отрезка параллельного основаниям, а от средней линии к большему основанию повставлять точки. Цвета вставленных точек вычисляешь методом линейной интерполяции.


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

p.s. А я тебя кажися знаю - в субботу беседовали

DRAGOnoid
21.01.2008, 13:34
Так надо пройтись по трапеции от нижнего основания к средней линии и повыкидывать точки пропорционально длине отрезка параллельного основаниям, а от средней линии к большему основанию повставлять точки. Цвета вставленных точек вычисляешь методом линейной интерполяции.
что то у меня большое подозрение что это всё дико тормозить будет.
хотя надо хотя бы начать в этом копать, чем я скоро надеюсь и займусь ;)

p.s. А я тебя кажися знаю - в субботу беседовали
ну да было дело тут http://www.flasher.ru/forum/showthread.php?t=106853
я просил про формулы но ответа так и не получил :rolleyes:

SvTol
21.01.2008, 14:23
зашёл в хелп
ввожу DisplacementMapFilter
получаю инструкцию и описание Class DisplacementMapFilter с примером.
тупо вставил пример , запустил и получил ровно то что ты хотел.
пример не сложный думаю разберёшься.
точно тока нада искать по AS2, там пример похожий...
но блин пока не осилил я как че сделать...
текст изгибал хорошо а вот картинку не хотит

VovkaMorkovka
21.01.2008, 14:28
Что то у меня большое подозрение что это всё дико тормозить будет.
хотя надо хотя бы начать в этом копать, чем я скоро надеюсь и займусь ;)


Не думаю, что будет тормозить. Дело в том, что ты рисуешь битмапу один раз причем лучше всего в буффере, и по таймеру, а потом уже выводить на экран.


ну да было дело тут http://www.flasher.ru/forum/showthread.php?t=106853
я просил про формулы но ответа так и не получил :rolleyes:

А я не видел этого ответа, формулы написать могу - это просто очень на самом деле :)
напомни мне сообщением в личку.

SvTol
21.01.2008, 16:29
ребят может лучше расскажете как изобразить градиент который должен исказить картинку как будто она наклеена на цилиндр? :)

DRAGOnoid
21.01.2008, 16:30
думаю пока у меня руки дойдут - ты уже сам разберёшься =(
хотяяя... ща гляну

SvTol
21.01.2008, 17:28
думаю пока у меня руки дойдут - ты уже сам разберёшься =(
хотяяя... ща гляну
неу вообще как бы да :)
я делаю градиент, но вот сделать его похожим на цилиндрический пок ане получается...

Кстати очень помоглов понимании работы фильтра:
http://deforum.ru/forum/viewtopic.php?t=43396
пятый пост

DRAGOnoid
21.01.2008, 18:55
да, посидел более меннее начинаю понимать эту систему.. однако не всё просто. Картинка искажается по BitmapData шаблону. А этот шаблон в твоём случае градиентная линейная заливка.
типа такой.
http://dragonnoid.ru/images/gr.jpg
да только проблема. во первых градиент должен заливаться не линейно а по синусу. а как это сделать я пока незнаю.
а если не сделать то твой рисунок будет искажаться так:
http://dragonnoid.ru/images/gr2.jpg
а чтобы научиться делать правильный градиент тебе придётся повозиться с матрицами :confused:

в общем либо копать дальше в этом фильтре, тогда тебе придётся получить правильный градиент - самый простой способ это нарисовать в фотошопе и забить его в SWF в библиотеке.
либо научиться рисовать такой градиент программно - пока не представляю как. да и муторно.

есть свежий способ в твоём случае. Можно взять картинку, распилить на много полосочек вертикальных шириной в 1 пиксель, сместить их по синусу, сново склеить. это делов на пару часов. :quiet:

wvxvw
21.01.2008, 19:33
Можно не обязательно градиент, можно и битмапдату создать в качестве матрицы. По принципу:
насыщенность каждой следующей полоски = синус от -90 до +90 помноженый на 0хff

SvTol
21.01.2008, 19:33
последний способ наверное рулит :)

DRAGOnoid
21.01.2008, 20:39
Можно не обязательно градиент, можно и битмапдату создать в качестве матрицы. По принципу:
насыщенность каждой следующей полоски = синус от -90 до +90 помноженый на 0хff
а можно кодом, желательно рабочим, а ещё лучше исходником? )

тфу ты блин... неправильно понял вначале - так в этом и прикол что мы знаем как это делать - вопрос как получить градиент который залит не линейно а квадратично....
http://www.flasher.ru/forum/showpost.php?p=712366&postcount=13

wvxvw
22.01.2008, 13:50
import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.display.Sprite;
//
var bmpd:BitmapData = new BitmapData(360,100,false,0);
for(var i:uint=0; i<180; i++){
bmpd.fillRect(new Rectangle(i*2,0,2,100),Math.sin(i*Math.PI/180)*0xff);
}
var spr:Sprite = new Sprite();
spr.graphics.beginBitmapFill(bmpd);
spr.graphics.drawRect(0,0,360,100);
spr.graphics.endFill();
addChild(spr);

DRAGOnoid
22.01.2008, 16:00
опа! прикольное решение. но немного помозговав понял что не идеальное.
гораздо проще тогда было бы закрасить множеством одноцветных квадратов, тип :

var grad:Sprite = new Sprite();
for (var i=1; i<someWidth; i++) {
beginFill (128+128*y); // где y - положение верхней границы рисунка, можно посчитать по формуле кругового движения
grad.graphics.drawRect(1,0,1,someHeight);
grad.graphics.endFill();
}


ура! идея есть осталось довести до ума!

Mr. Fixit
22.01.2008, 18:09
гыы.. а с этим прикольно:
bmpd.fillRect(new Rectangle(i*2,0,2,100),Math.sin(i*Math.PI/90)*0xFFCCFF);

vapes
23.01.2008, 12:02
Вот пример вам синусоидального градиета и DMF http://vapes.na.by/swf/magiccap.html
Кстате сделать мувик трапецевидным и даже круглым тоже легко с помощью этого фильтра. (надо будет мне статью о картах написать)

DRAGOnoid
23.01.2008, 14:23
vapes
если осилишь - скажем огромное человеческое спасибо ))
только мелочи не ленись описывать, а то именно по ним часто вопросы и задают.

LinuxVideo
25.01.2008, 11:03
Рисовал DisplacementMap-карты попиксельно. Долго, а чего делать? Потом выводин на экран, скриншотил, и уже в виде картинки вставлял в проект. Очень хороший туториал лежит тут: http://nodename.com/blog/2006/01/16/psyarks-displacementmapfilter-tutorial/

А хорошие примеры лежат тут:
http://parentnode.org/flash/flash-3d-earth-including-fla/
http://lab.andre-michelle.com/panorama
http://lab.andre-michelle.com/glass

SvTol
25.01.2008, 12:01
для того что бы рисовать попиксельно нада понимать по какому закону сдвигать пиксели... я пока не понял :)
судя по всему формулу какую то нада...

LinuxVideo
25.01.2008, 12:22
Ссылочки посмотри, там и формулы есть :)

SvTol
25.01.2008, 20:00
незаметил видать...
ща попробую посмотреть...
я просто в математике не силен...

по всей видимости задача у меня сложнее гораздо, мне же надо не просто натянуть мне нада и изгиб и свет отобразить...
видимо брошу я эту заетю...