« drawTriangles(), старая ошибка в документации | Главная страница | Создание Pixel Bender фильтра «Slide Wring». Введение »

Free Transform в два треугольника!

Запись от Zebestov размещена 22.03.2011 в 00:20
Обновил(-а) Zebestov 06.12.2013 в 07:11

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

С чего все началось?
Как-то давно я фантазировал об инструменте Free Transform. Мысль была такая: что если наш Free Transform — это (по некой идее) не тупое тягание вершин в 2d, а некая перспективная проекция нашей картинки, раскоряченной в 3d пространстве, да так, что вот как раз и выходит неправильный четырехугольник с корректной деформацией изображения по всей площади? Мысль показалась вполне себе близкой к реальности и я начал чертить, прикидывать, считать, снова чертить. Но у меня не выходило ровным счетом ничего похожего на правду.

Ну и чем все закончилось?
После многочисленных попыток лишить себя сна поисками тех самых координат XYZ, от которых я уже возьму нужные мне T (читаем доки), я вдруг понял, что нельзя быть таким честным — нужно просто подбирать, прикидывать, снова подбирать и опять примерять формулы нахождения сразу коэффициентов T. Поглядывая в свои «честные попытки», наиболее близкие по сути, я так или иначе пришел к результату, который в оформленном виде выглядит примерно так:

Код AS3:

function freeTransform(image:BitmapData, canvas:Graphics, p1:Point, p2:Point, p3:Point, p4:Point):void
{
        // Соотношение длин диагоналей.
        var diagonalRatio:Number = Point.distance(p1, p3) / Point.distance(p2, p4);
 
        // A, B и C параметры уравнения прямой для диагонали,
        // соединяющей точки p1 и p3.
        var a1:Number = p1.y - p3.y;
        var b1:Number = p3.x - p1.x;
        var c1:Number = p1.x * p3.y - p3.x * p1.y;
 
        // A, B и C параметры уравнения прямой для диагонали,
        // соединяющей точки p2 и p4.
        var a2:Number = p2.y - p4.y;
        var b2:Number = p4.x - p2.x;
        var c2:Number = p2.x * p4.y - p4.x * p2.y;
 
        // Точка пересечения диагоналей.
        var intersection:Point = new Point();
            intersection.x = -(c1 * b2 - c2 * b1) / (a1 * b2 - a2 * b1);
            intersection.y = -(a1 * c2 - a2 * c1) / (a1 * b2 - a2 * b1);
 
        // Коэффициенты T, с помощью которых мы достигаем
        // нужного эффекта.
        var t1:Number = 1 / Point.distance(p3, intersection) * diagonalRatio;
        var t2:Number = 1 / Point.distance(p4, intersection);
        var t3:Number = 1 / Point.distance(p1, intersection) * diagonalRatio;
        var t4:Number = 1 / Point.distance(p2, intersection);
 
        // Заготавливаем данные, необходимые для отрисовки
        // треугольников.
        var vertices:Vector.<Number> = new Vector.<Number>();
            vertices.push(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
        var indices:Vector.<int> = new Vector.<int>();
            indices.push(0, 1, 2, 2, 3, 0);
        var uvtdata:Vector.<Number> = new Vector.<Number>();
            uvtdata.push(0, 0, t1, 1, 0, t2, 1, 1, t3, 0, 1, t4);
 
        // Рисуем два треугольника, представляющие собой
        // конечный результат.
        canvas.beginBitmapFill(image, null, false, true);
        canvas.drawTriangles(vertices, indices, uvtdata);
        canvas.endFill();
}

Итак, что мы имеем. У нас есть метод, который хочет от нас следующие данные:

image:BitmapData
Это и есть то изображение, которое мы подвергаем трансформации. Если вы желаете трансформировать не изображение, сделайте это изображением. Метод draw() вам в помощь.

canvas:Graphics
Это наш холст. В него мы будем отрисовывать результат, который представлен всего двумя треугольниками. В качестве этого аргумента нужно передавать ссылку на свойство graphics вашего шейпа, спрайта и т.д. (myCanvasShape.graphics, myCanvasSprite.graphics).

p1:Point, p2:Point, p3:Point, p4:Point
А это, собственно, список контрольных точек от верхней левой и по часовой стрелке.

Полагаю, этого кода и описания к нему достаточно, чтобы вы смогли управиться с этим самостоятельно.

Вот так это все выглядит:

FreeTransform-DEMO.swf (291.9 Кб)

Остается лишь один момент. Метод производит корректную трансформацию только если четыре контрольные точки представляют собой выпуклый многоугольник. В том же фотошопе поступили следующим образом: они позволяют двигать точку так, чтобы получился угол больше 180* градусов, но если ты пытаешься завершить на этом трансформацию, они вываливают тебе алерт, мол "алёэ! ты как себе это представляешь?!".

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

Код AS3:

function isConvex(p1:Point, p2:Point, p3:Point):Boolean
{
	var a:Point = new Point(p1.x - p2.x, p1.y - p2.y);
	var b:Point = new Point(p3.x - p2.x, p3.y - p2.y);
 
	return ((a.x * b.y - a.y * b.x) <= 0);
}

p1:Point, p2:Point, p3:Point
Если смотреть изнутри угла, эти три точки будут идти по часовой стрелке. Вершиной, соответственно, является точка p2. Метод возвращает true, если угол меньше 180 градусов, и false в противном случае.

С помощью этого метода следует проверить все 4 угла:

Код AS3:

var convexTest1:Boolean = isConvex(p4, p1, p2);
var convexTest2:Boolean = isConvex(p1, p2, p3);
var convexTest3:Boolean = isConvex(p2, p3, p4);
var convexTest4:Boolean = isConvex(p3, p4, p1);

Эти четыре условия проверяют каждый угол четырехугольника p1-p2-p3-p4 на предмет "выпуклости", ну т.е. чтобы каждый угол был меньше 180 градусов (true).

Однако если противоположные углы p1 и p3 будут вогнуты оба, то это тоже допустимо! Ведь в контексте 4-угольника это просто означает, что рамка флипнулась по диагонали (которая проходит через p2 и p4). То же самое применимо и к углам p2 и p4.

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

Код AS3:

if (convexTest1 == convexTest3 && convexTest2 == convexTest4)
{
	// вызываем наш метод freeTransform(…)
}
else
{
	// сообщаем пользователю, что он гонит!
}

Ну вроде бы уже все рассказал да показал.
Успехов!

P.S.

Жалуются люди, говорят, мол, обманул я их про «точь-в-точь как в фотошопе». Настаивают. Проверить религия не позволяет, но чуют они подвох всем сердцем своим. И трансформация какая-то не интуитивная, и на дисплейсмент больше похоже. Другое дело фотошоп, говорят, там таки по-настоящему, говорят.

Ээх, ну как могу я не пойти навстречу массам да не развеять по ветру пыль сомнений.
Вот, полюбуйтесь:

AS3-VS-Photoshop.swf (136.4 Кб)

Вложения

	AS3-VS-Photoshop.swf (136.4 Кб, 1004 просмотров)
	FreeTransform-DEMO.swf (291.9 Кб, 1035 просмотров)

Комментарии 20

Всего комментариев 20

22.03.2011 00:42
gloomyBrain	Прикольно =) Было бы здорово на основе этого реализовать что-то вроде сетки из контрольных точек. Давно сам хотел что-то похожее сделать, все руки недокрюки

22.03.2011 14:10
silin	офигительно )

22.03.2011 14:19
cleptoman	классно. интересно,если пару x/y заменить на более читабельный point сильно прогнется производительность?

22.03.2011 14:27
Zebestov	Ну в принципе от Point кроме удобства навара не будет, только производительность упадет (даже слишком сильное слово). Другое дело, что контекст использования позволяет любую медлительность (в разумных пределах).

22.03.2011 15:17
Psycho Tiger	Я ленивый последнее время ) можешь залить демку swf`ку, что получилось? =)

22.03.2011 15:56
Zebestov	Чуть позже сделаю обязательно. Надо, согласен. А смотреть не на что — 100% Free Transform как в Photoshop (нет, ну т.е. абсолютно такой же).

22.03.2011 16:09
Psycho Tiger	Блин, видя это в окне флешплеера сразу тепло на душе ) Да и в будущем как понадобится - сюда полезу смотреть. Спасибо )

22.03.2011 18:42
samana	Очень классно! Спасибо!

12.11.2012 19:28
djyamato	Полезная тузла, спасибо

13.01.2013 17:49
djyamato	А как-нибудь после тягания вершин можно получить данные о перспективных искажениях ? Я имею ввиду, представить что это плоскость, но повернутая в 3Д пространстве (XYZ) Как-нибудь получить эти повороты по XYZ можно ?

14.01.2013 14:58 gloomyBrain вне форума

gloomyBrain

Если бы вершин было 3 - было бы всегда можно, потому что любые 3 вершины всегда образуют плоскость. С 4 и более вершинами такое работать не будт. Вернее - есть вероятность, что вершины расположены в соответствии с каким-то перспективным искажением, но равновероятно, что это не так.
Вообще можно разбить прямоугольник на 2 треугольника, посчитать отклонения нормалей для каждого из них и вывести среднее, и таким образом получить отклонение от фронтальной проекции.

04.12.2013 13:00
Zebestov	Лучше поздно, чем никогда запилил демку!

04.12.2013 20:39 AlexLucas вне форума

AlexLucas

В шопе Free Transform это набор трансформаций, это похоже конкретно на Distort, и работает по ощущениям немного не как в шопе.
Есть ощущение 3D вращения, но оно будто происходит вокруг вершины которую мы тащим, а в шопе будто вокруг центра картинки. Как-то так

05.12.2013 12:12
Zebestov	AlexLucas, теория такая теория. Ты вот не поленись и сравни эту трансформацию с той, что в фотошопе — ой как ты удивишься!

05.12.2013 22:44
Zebestov	Добавил пруф про фотошоп

06.12.2013 01:15 Akopalipsis вне форума

Akopalipsis

Zebestov Спасибо Вам! И наверное не один я был бы рад, если бы, когда нибудь, Вы её доделали, как указали выше. Чтобы можно было взять и пользоваться. А то если честно, я крутил картинку, крутил и не чего не заметил, но слова о - "точка не "проваливалась"", как то пугают.
И даже не пугают, подталкивают на просьбу, доделать

06.12.2013 07:00
Zebestov	Спасибо за отзыв, стараемся. По поводу "проваливающейся точки" добавил код и логику размышлений. Но применение, все же, оставляю за вами

06.12.2013 13:02
Hauts	Пруф шикарен.

08.12.2013 15:22
Кот Баюн	вот если бы такая штука была во Flash IDE, допустим в виде extension) цены бы ей не было)

28.02.2016 01:11
Zebestov	Полный код демки на wonderfl.

Последние записи от Zebestov

Pixel Bender фильтр «Flipping Hexagons» для Flash (17.06.2012)
Создание Pixel Bender фильтра «Slide Wring». Введение (12.06.2012)
Free Transform в два треугольника! (22.03.2011)
drawTriangles(), старая ошибка в документации (24.01.2011)

Архив
< > Октябрь 2024
Вс	Пн	Вт	Ср	Чт	Пт	Сб
22	23	24	25	26	27	28
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2