Прозрачность в PyCairo [Урок №7]

автор

В этом разделе мы поговорим о прозрачности. Мы рассмотрим несколько базовых определений и три интересных примеров применения прозрачности. Прозрачность – это степень возможности видеть сквозь материал. Самый легкий способ понять прозрачность это представить себе объект, на который мы смотрим сквозь воду и стекло. Технически, лучи солнца могут проходить сквозь стекло, и таким образом мы можем видеть объекты, находящиеся за ним.
В компьютерной графике мы можем достичь эффекта прозрачности, воспользовавшись альфа-композитингом. Альфа-композитинг это процесс смешивания изображения с задним фоном для создания видимости частичной прозрачности. Процесс композитинга использует альфа канал. Альфа канал это 8-и битный слой в графическом файловом формате, который применяется для выражения светопроницаемости (прозрачности). Дополнительные 8 битов на пиксель служат в качестве маски и представляют собой 256 уровней светопроницаемости. Изображения, используемые в данном учебном материале можно скачать здесь.

Прозрачные прямоугольники

В первом примере мы нарисуем десять прямоугольников с разными уровнями прозрачности.

Метод set_source_rgba()имеет альфа параметр для обеспечения прозрачности.

Этот код создает десять прямоугольников с альфа-значениями от 0.1 до 1

Эффект прослойки

В следующем примере мы создадим эффект прослоек. Мы продемонстрируем растущий центрированный текст, который будет постепенно исчезать, начиная с отдельно взятой точки. Это очень простой эффект, который мы зачастую можем наблюдать в flash-анимации.

Метод paint_with_alpha() является ключевым в создании данного эффекта

В данном примере мы создадим растущий и исчезающий текст в окне.

Здесь мы определим несколько констант, используемых в примере.

Эти две переменные сохраняют текущие альфа-значение и размер текста.

Метод on_timer() вызывается каждые 14 миллисекунд.

В методе on_timer() мы перерисовываем зону виджета при помощи метода queue_draw() .

В on_draw()  методе мы получаем высоту и ширину области клиента в окне. Эти показатели используются в центре текста. Мы заливаем задний фон окна тёмно-красным цветом. Шрифт текста выбран Courier.

Мы получили текстовые метрики. Мы используем только ширину текста.

Мы переходим в область, в которой текст будет центрирован.

Ограничим рисование только выбранным путем при помощи метода clip()  . Метод paint_with_alpha() закрашивает выбранный исходник в пределах нашей обрезанной области с применением маски альфа-значения.

Отраженное изображение

В данном примере мы продемонстрируем отраженное изображение. Этот эффект создает иллюзию, как если бы наше изображение отражалось в воде или зеркале.

Отраженное изображение руин замка в окне.

В методе load_image() изображение является поверхностью, которая была создана из PNG файла.

Внутри метода init_vars()  мы получаем высоту и ширину изображения. Мы также определяем две переменные.

Задний фон окна заполнен градиентным окрасом. Окрас плавно перетекает из чёрного в темно-серый.

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

Финальная часть раздела, в которой мы сделаем второе изображение прозрачным. Однако прозрачность не является постоянной величиной. Изображение исчезает постепенно. Отраженное изображение прописано линией за линией. Метод clip()  задает рисунку прямоугольную форму, с высотой 1. Метод paint_with_alpha()  задает прозрачность в расчете во время рисования в текущем обрезке поверхности изображения.

Демо загрузки

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

Мы нарисовали восемь линий с восемью разными альфа-параметрами.

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

Константа SPEED  контролирует скорость анимации. Константа CLIMIT  является максимальным значением для переменной self.count . По преодолению этого лимита, переменная сбрасывается до показателя 0. Константа NLINES  — это количество написанных линий в данном примере.

Мы воспользуемся функцией таймера для создания анимации. Каждая миллисекунда cv.SPEED  указывается в методе on_timer() .

В методе on_timer()  мы увеличиваем переменную self.count . Если переменная достигает показателя константы cv.CLIMIT, то она сбрасывается до 0. Нам не нужно переполнять код и мы не работаем с большими числами.

Мы сделаем линии более чуть-более толще, чтобы их было лучше видно и пропишем их с закругленными окончаниями.

Наш рисунок расположен по центру окна.

Мы создали восемь линий с разными значениями прозрачности. Линии расположены относительно друг от друга под углом в 45 градусов.

Вам может быть интересно

Scroll Up