Блог

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

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

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

AwesomeWM просто «выдает» шаблоны cairo здесь. Бегло просмотрев, я нашел только 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 (с некоторыми комментариями), которая создает следующее изображение. Два круга также нарисованы черным цветом, чтобы было более очевидно, где они находятся. Надеюсь, это прояснит, как цвет интерполируется между ними.

 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")