很棒的WM：径向渐变如何工作

Question

使用radial pattern gradient，尝试从屏幕的中心到侧面，从半透明到黑色，制作出类似于小插图的渐变。
具有屏幕尺寸的小部件，其后带有bg：

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

无法弄清楚什么是“图案的起点/终点”和“起点/终点圆的半径”，它们基本上是字符串上方的:0,0,10:部分。

Answer 1

AwesomeWM只是在这里“发出”开罗的模式。快速浏览后，我仅在https://www.cairographics.org/tutorial/#L2preparesource和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和API参考。

  

'radial：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")