Просмотр полной версии : Наложить изображение на кружку
Есть картинка подгружаемая динамически.
Нужно изогнуть её вокруг кружки, типа она на неё наклеена.
Знаю что нада юзать DisplacementMapFilter, покурил маны -ниче не понял как юзать.
Порыл форум прсотых примеров изгибания нет, везде какие то мега волновые эффекты.
Может кто делал. Дайте код в любом состоянии поди уж допилю сам.
DRAGOnoid
20.01.2008, 00:12
зашёл в хелп
ввожу DisplacementMapFilter
получаю инструкцию и описание Class DisplacementMapFilter с примером.
тупо вставил пример , запустил и получил ровно то что ты хотел.
пример не сложный думаю разберёшься.
я блин так и сделал, но получил непонятно что...
попробую ещё раз...
DRAGOnoid
20.01.2008, 15:03
мне больше интересно как заставить это вращаться или например превратить квадратный рисунок в трапецию.
а где то был пример вроде,вчера то ка находил помойму здесь
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:
зашёл в хелп
ввожу DisplacementMapFilter
получаю инструкцию и описание Class DisplacementMapFilter с примером.
тупо вставил пример , запустил и получил ровно то что ты хотел.
пример не сложный думаю разберёшься.
точно тока нада искать по AS2, там пример похожий...
но блин пока не осилил я как че сделать...
текст изгибал хорошо а вот картинку не хотит
VovkaMorkovka
21.01.2008, 14:28
Что то у меня большое подозрение что это всё дико тормозить будет.
хотя надо хотя бы начать в этом копать, чем я скоро надеюсь и займусь ;)
Не думаю, что будет тормозить. Дело в том, что ты рисуешь битмапу один раз причем лучше всего в буффере, и по таймеру, а потом уже выводить на экран.
ну да было дело тут http://www.flasher.ru/forum/showthread.php?t=106853
я просил про формулы но ответа так и не получил :rolleyes:
А я не видел этого ответа, формулы написать могу - это просто очень на самом деле :)
напомни мне сообщением в личку.
ребят может лучше расскажете как изобразить градиент который должен исказить картинку как будто она наклеена на цилиндр? :)
DRAGOnoid
21.01.2008, 16:30
думаю пока у меня руки дойдут - ты уже сам разберёшься =(
хотяяя... ща гляну
думаю пока у меня руки дойдут - ты уже сам разберёшься =(
хотяяя... ща гляну
неу вообще как бы да :)
я делаю градиент, но вот сделать его похожим на цилиндрический пок ане получается...
Кстати очень помоглов понимании работы фильтра:
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:
Можно не обязательно градиент, можно и битмапдату создать в качестве матрицы. По принципу:
насыщенность каждой следующей полоски = синус от -90 до +90 помноженый на 0хff
последний способ наверное рулит :)
DRAGOnoid
21.01.2008, 20:39
Можно не обязательно градиент, можно и битмапдату создать в качестве матрицы. По принципу:
насыщенность каждой следующей полоски = синус от -90 до +90 помноженый на 0хff
а можно кодом, желательно рабочим, а ещё лучше исходником? )
тфу ты блин... неправильно понял вначале - так в этом и прикол что мы знаем как это делать - вопрос как получить градиент который залит не линейно а квадратично....
http://www.flasher.ru/forum/showpost.php?p=712366&postcount=13
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);
Вот пример вам синусоидального градиета и 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
для того что бы рисовать попиксельно нада понимать по какому закону сдвигать пиксели... я пока не понял :)
судя по всему формулу какую то нада...
LinuxVideo
25.01.2008, 12:22
Ссылочки посмотри, там и формулы есть :)
незаметил видать...
ща попробую посмотреть...
я просто в математике не силен...
по всей видимости задача у меня сложнее гораздо, мне же надо не просто натянуть мне нада и изгиб и свет отобразить...
видимо брошу я эту заетю...
Работает на vBulletin ® версия 3.7.3. Copyright ©2000-2026, Jelsoft Enterprises Ltd. Перевод: zCarot
Copyright © 1999-2008 Flasher.ru. All rights reserved.