Awesome WM：径向渐变如何工作

Question

尝试制作类似小插图的渐变 - 使用 radial pattern gradient 从屏幕中心到两侧，从半透明到黑色。
具有以下屏幕大小的小部件 bg:

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

无法弄清楚 "start/stop point of the pattern" 和 "the radii of the start / stop circle" 是什么，这基本上是上面字符串的 :0,0,10: 部分。

Answer 1

AwesomeWM 只是 "giving out" cairo 的模式。快速浏览了一下，我只找到了 https://www.cairographics.org/tutorial/#L2preparesource and the API reference in https://www.cairographics.org/manual/cairo-cairo-pattern-t.html#cairo-pattern-create-radial and https://www.cairographics.org/manual/cairo-cairo-pattern-t.html#cairo-pattern-add-color-stop-rgb.

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

这个放射状图案是基于两个圆圈定义的。第一个圆的圆心为 960, 540，半径为 10。第二个圆的圆心为 0, 0，半径为 10。这两个圆可以指定颜色。 0#ff00000000 在 "relative position" 0 处分配颜色，即它分配的颜色应该恰好在第一个循环所在的位置使用。最后一种颜色的相对位置为 1，这意味着提供的颜色用于第二个圆圈。中间颜色的相对位置为0.5，表示在两个圆圈之间使用"half way"。

为了让上面的内容更容易理解，这里有一个 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")

Awesome WM：径向渐变如何工作

Awesome WM: how does radial gradient work

cairo

awesome-wm