真棒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只是在这里“给出”cairo的模式。从快速看，我只在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参考。

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