Нестандартные градиентные заливки

[Alex_beginner]

Уважаемые форумчане!

Окажите помощь начинающему Flash'ру.

У меня такой вопрос. Имеется абстрактный триангл, цвета вершин которого заданы (3 вершины). Необходимо прорисовать сей триангл с градиентной заливкой так, чтобы цвета всех вершин триангла соответствовали заданным.

Заранее благодарен !

[Psycho Tiger]

Ам... Рисуем 3 круга, центры которых совпадают с вершинами треуголника.
Градиент радиальный - в центре этого круга цвет тот, что должен быть, на концах круга цвета идут с альфой=0

[Wolsh]

Дело в том что градиент может быть только линейный или радиальный, в любом случае модификаторы цвета располагаются на одной прямой. Поэтому такой треугольник можно закрасить за два прохода - линейный градиент от вершины а к b и радиальный градиент из вершины с до центра противолежащей стороны, причем этот градиент будет одного цвета но с альфой от 100 до 0, и таким образом "наложится".
Как альтернативный вариант - рассчитать всю красоту попиксельно и нарисовать битмапдату.

2 Psycho Tiger: а в центре триангла у тебя какая альфа получится? Что если меньше 100?

[Alex_beginner]

1. Psycho Tiger ! Ваш вариант я предполагал, однако у него есть некоторые недостатки. Поясню.
Введу обозначения для легкости изъяснения. Вершины треугольника - а, b, c.
Зададимся цветом каждой вершины - точка a -0xFF0000, точка b -0x00FF00, точка с -0x0000FF, т.е. чистые красный, зеленый и синий цвета, соответственно.
Рассмотрим радиал расположенный в точке с. Теоретически для правильного отображения требуемого градиента необходимо чтобы значение синей цветовой составляющей точки c на противоположной стороне треугольника (во всех точках линии от a до b) должно быть равно нулю. В случае радиала это значение может совпасть непосредственно в точках a и b, а в других точках на линии от a до b оно явно будет ненулевое (хотя близкое к нулю).

2. Wolsh ! Ваш вариант наиболее интересен. Щас буду его реализовывать.
Пока немогу его понять теоретически.
Вопрос: Это вариант был вами практически опробован ?

[Wolsh]

Да, на прямоугольнике с градиентом
Б Ц
Ч Ч
где Б - белый, Ч - черный, Ц - какойто цвет. Это квадрат выбора цвета как в фотошопе)))

[Alex_beginner]

Wolsh! Я извоял микрокод согласно Вашему варианту (как я понял!). Однако я не добился желаемого результата. Возможно я чего-то не понял в Вашей теории. Прилагаю написанный мною код. Если Вас незатруднит исправьте в коде баги.

import flash.geom.Matrix;
//Линейная заливка
this.beginGradientFill("linear",[0xFF0000,0x000000],[100,100],[0,0xFF],{matrixType:"box",x:0,y:0,w:350,h:400,r:0},"pad","linearRGB",0);
this.moveTo(0,0);
this.lineTo(350,0);
this.lineTo(175,400);
this.lineTo(0,0);
this.endFill();
//Радиал
var myMatrix = new Matrix();
myMatrix.tx=175;
myMatrix.ty=400;
myMatrix.a=0.4878048;
myMatrix.d=0.4878048;
this.beginGradientFill("radial",[0xFF0000,0xFF0000],[100,0],[0,0xFF],myMatrix,"pad","linearRGB",0);
this.moveTo(0,0);
this.lineTo(350,0);
this.lineTo(175,400);
this.lineTo(0,0);
this.endFill();

[Alex_beginner]

Спасибо за помощь Wolsh и Psycho Tiger!

Искомый алгоритм был незамедлительно наден

Ларчик просто открывался !

Нужно было просто использовать линейный градиент из каждой вершины
с изменением альфы от 100 до 0. При этом угол градиента должен рассчитыватся исходя из угла наклона противоположной стороны триангла (допустим градиент из точки а, тогда угол градиента = углу стороны b-c), т.е. они должны быть равны. В результате во всех точках стороны b-c значение соответствующей составляющей будет одно и тоже, что и требовалось доказать. Потом повторив градиентную заливку для каждой вершины с соответсвующим цветом, получаем красиво залитый триангл. Красота !

[Wolsh]

OK, только два замечания)))
Во-первых, таки про альфу в центре и в центрах сторон. Грызут меня сомнения, даже при линейном градиенте. А уж при градиенте не из вершины к вершине, а из вершины к стороне - и подавно. Я бы чисто для теста отрисовал полученное в битмап 32бита и проверил альфу каждого пикселя гетПикселом.
Во-вторых, мне кажется возможно несколько вариантов, как залить треугольник градиентами из вершин. Линейные и радиальные, к вершинам или к сторонам - перпендикулярно или к центру и т.д. и т.п. Может быть еще такой, наверняка нереализуемый вариант расходящегося из вершины градиента, т.е. градиент из а в b линейный, но угол его меняется соответственно двум сторонам - ас и bc, и визуальные линии модификаторов сходятся в с (во намудрил) - такой градиент мы видим на конусе при виде сбоку.
Вот Ваш первый вариант, чем он плох?

import flash.geom.Matrix;
//Линейная заливка
this.beginGradientFill("linear",[0xff0000,0x0000ff],[100,100],[0,0xFF],{matrixType:"box",x:0,y:0,w:350,h:400,r:0},"pad","linearRGB",0);
this.moveTo(0,0);
this.lineTo(350,0);
this.lineTo(175,400);
this.lineTo(0,0);
this.endFill();
//Радиал
var myMatrix = new Matrix();
myMatrix.tx=175;
myMatrix.ty=400;
myMatrix.a=0.4878048;
myMatrix.d=0.4878048;
this.beginGradientFill("radial",[0x00ff00,0x00ff00],[100,0],[0,0xFF],myMatrix,"pad","linearRGB",0);
this.moveTo(0,0);
this.lineTo(350,0);
this.lineTo(175,400);
this.lineTo(0,0);
this.endFill();

[Alex_beginner]

В принципе он нормально работает, но опять же возникают искажения цвета за краями радиального градиента, которые в принципе незаметны, но, однако, присутствуют.

А на счет теста в BitmapData методом getPixel - попробую. Право же это чрезвычайно интересно.

[Wolsh]

Совсем Вы меня запутали. Вот в этом коде, что я привел выше, треугольник рисуется в два прохода полностью, три цвета. Вы говорили о втором варианте, где рисуется градиент одного цвета с альфой 100 - 0 : соответственно ТРИ прохода + неровная альфа (хотя для данного конкретного случая может и ровная, не утверждаю)
Покажите второй код, может я чего-то не понимаю из Ваших желаний)))
-----
ОК, тогда и я допишусь))
Если не хотите показывать второй код, ладно))
Упростим проверку - сделайте все три прохода белым цветом на черном фоне документа. Если альфа лажает, думаю будет видно.
И попробуйте сделать треугольник с двумя очень острыми углами, вытянутый.