Удивительный WM: как работает радиальный градиент - PullRequest
Новая
       22

Удивительный WM: как работает радиальный градиент

0 голосов
/ 13 марта 2019

Попытка сделать виньетированный градиент - от центра экрана к сторонам, от полупрозрачного до черного, используя радиальный градиент рисунка .
Наличие виджета размера экрана со следующим bg: 

bg = 'radial:960,540,10:0,0,10:0,#ff000000:0.5,#00ff0088:1,#0000ffff'

не может понять, что такое «точка начала / конца шаблона» и «радиусы круга начала / остановки», что в основном составляет :0,0,10: секцию сверху строки.

1 Ответ

1 голос
/ 14 марта 2019

AwesomeWM просто «выдает» здесь образцы Каира.Из краткого обзора я нашел только https://www.cairographics.org/tutorial/#L2preparesource и ссылку на API в https://www.cairographics.org/manual/cairo-cairo-pattern-t.html#cairo-pattern-create-radial и https://www.cairographics.org/manual/cairo-cairo-pattern-t.html#cairo-pattern-add-color-stop-rgb.

'радиальные: 960 540,10: 0,0,10: 0, # ff000000: 0.5, # 00ff0088: 1, # 0000ffff '

Этот радиальный шаблон определяется на основе двух окружностей.Первый имеет центр 960, 540 и радиус 10. Второй круг имеет центр 0, 0 и радиус 10. Этим двум кругам могут быть назначены цвета.0#ff00000000 назначает цвет в «относительной позиции» 0, то есть он назначает цвет, который должен использоваться именно там, где находится первый цикл.Последний цвет имеет относительную позицию 1, что означает, что предоставленный цвет используется для второго круга.Средний цвет имеет относительную позицию 0,5, что означает, что он используется «на полпути» между двумя кружками.

Чтобы немного облегчить понимание вышеизложенного, вот программа Lua (с некоторыми комментариями), котораяпроизводит следующее изображение.Два круга также нарисованы черным, чтобы было более очевидно, где они находятся.Надеюсь, это проясняет, как цвет интерполируется между ними.

pattern example

local cairo = require("lgi").cairo
local img = cairo.ImageSurface.create(cairo.Format.RGB24, 200, 200)

local pattern = cairo.Pattern.create_radial(
    100, 100, 10, -- First cycle, center is center of the image, radius is 10
    150, 150, 120) -- Second cycle, it is offset a bit and it has a radius of 100

-- Now add some color stops
pattern:add_color_stop_rgb(0, -- "relative position 0", i.e. at the first circle
                           1, 0, 0) -- We assign the color 'red'
pattern:add_color_stop_rgb(1, -- "relative position 1", i.e. at the second circle
                           0, 0, 1) -- We assign the color 'blue'
pattern:add_color_stop_rgb(0.5, -- "relative position 0.5", i.e. 'in the middle' between both circles
                           0, 1, 0) -- We assign the color 'green'

-- Draw the pattern to the image surface
local cr = cairo.Context(img)
cr:set_source(pattern)
cr:paint()

-- Also draw the two circles in black to make it (hopefully) clearer what is
-- going on
cr:arc(100, 100, 10, 0, 2*math.pi)
cr:new_sub_path()
cr:arc(150, 150, 120, 0, 2*math.pi)

cr:set_source_rgb(0, 0, 0)
cr:stroke()

img:write_to_png("gradient.png")
...