Всем привет. :)
Появилась необходимость в маштабируемых окнах, отрисованных в стиле "Balloon Tooltip".
Если создать маштабируемое, прямоугольное окно не проблема, то над созданием пусть такого же, но с "хвостиком", приходится поломать голову. Интересует алгоритм позиционирования и рисования этого хвостика.
1.Реализация стандартными каналами квеста.
2.Используется отрисовка внешнего контура в 1-2px.
3.Полупрозрачный элемент (простое наложение при отрисовке может не подойти.)
Пишите любые идеи. ;D
Некоторые задумки есть, но пока все не совсем то.
Посмотри как делают балуны на jQuery, никаких нанотехнологий там быть не может - картинка хвостика с альфаканалом цепляется под прямоугольное окно, а куда позиционировать - дело вкуса
Это был вопрос-
ЦитироватьИнтересует алгоритм позиционирования и рисования этого хвостика.
А это ответ-
ЦитироватьПосмотри как делают балуны на jQuery, никаких нанотехнологий там быть не может - картинка хвостика с альфаканалом цепляется под прямоугольное окно, а куда позиционировать - дело вкуса
:)
Так в этом вкусе и вопрос. ;) С остальным проблем нет.
Если рисовать хвостик отдельно, то всеравно нужно расчитывать где будет разрыв в контуре прямоугольника. хвостик может быть как сверху, снизу, справа или слева.. Так и смещаться по одной стороне в ту или иную сторону - быть скраю, в центре и т.д.
Пока склоняюсь к использованию выборки необходимых фрагментов из атласа.
Интересно, кто бы как решил подобную задачу. Может есть метод и быстрее и оригинальнее. ;)
Зачем делать разрыв в прямоугольнике? Обычно хвостик накладывают слоем выше на прямоугольник заслонив линию контура, а там его двигай вперед/назад.
Цитировать3.Полупрозрачный элемент (простое наложение при отрисовке может не подойти.)
Ну юзай тогда геометрию, шейдеры и вертекс колор анимацию
Цитироватьвертекс колор анимацию
:o А это здесь зачем может понадобиться?
создаешь форму своего балуна, у хвоста красишь вертексы и в шейдере можно будет менять форму, положение, размер его. Размеры балуна простой трансформацией
Цитироватьсоздаешь форму своего балуна, у хвоста красишь вертексы и в шейдере можно будет менять форму, положение, размер его. Размеры балуна простой трансформацией
Это уже интересная идея ;D Но это реализация хороша для 3д - и конец хвоста можно прицепить куда надо и облако маштабировать как хочешь. Контур можно тоже в шейдере рисовать, что бы постоянной толщины был.
У меня 2д. Все углы постоянного радиуса, размеры зависят от размеров текста, который надо вывести. Цвет и т.д. - графика с альфой.
Вроде все получилось с простейшей выборкой фрагментов из атласа и их сборкой.
Пробовал как то делать конструктор окошек на шейдерах(корректировкой УВ-координат) - раоботает очень быстро, пусть и считается каждый кадр. Но точности все же не хватает - чем больше разрешение вьюпорта, тем больше погрешность и качества пиксель-в-пиксель не получается. В итоге лезут артифакты, вроде размытых контуров и лишних пикселей на стыках.
Поясни плиз суть своего метода "выборки фрагментов из атласа", и как обошелся без альфы
ЦитироватьПоясни плиз суть своего метода "выборки фрагментов из атласа", и как обошелся без альфы
Альфа используется, так что без альфы не обошелся. Альфа - неотъемлимая часть скина. :)
Атлас - текстура, в которой хранятся все фрагменты элемента с каналом прозрачности (ARGB). Уголки, бордюры, хвостики для каждой из сторон. Из этого атласа выбирается нужный фрагмент, маштабируется, если надо, и ставится в необходимую позицию. Если обычное окошко собирается из 9 частей, то балун из 10-11.
Один параметр в функции отвечает за то, с какой стороны рисовать хвост, другой за позицию в процентах по этой стороне.
В итоге имеем функцию, которй передаем размер по Х и У, сторону для хваоста и его положение, а на выходе получаем текстуру.(При инициализации один раз рендерим конструкцию из фрагментов в текстуру, а дальше ее используем. Если один из параметров меняется, то обновляем тектуру.)
Потом просто выводим плоскость с этой текстурой. Можно сделать вид итогового элемента изменяемым - в разных каналах хранить разную информацию об внешнем виде, например, в красном хранить только контур, в зеленом - плашку и т.д. Тогда в шейдере можно будет красить кунтур и плашку отдельно любым цветом.
Вобщем, примерно такой, подход..