开罗径向渐变答案

【问题标题】：Cairo Radial Gradient开罗径向渐变
【发布时间】：2012-07-06 11:35:41
【问题描述】：

我在开罗使用径向渐变，但没有得到预期的结果。我得到的径向渐变比我预期的要模糊得多，而且我似乎无法摆弄色标以获得所需的结果。代码如下：

cairo_pattern_t *pat;

pat = cairo_pattern_create_radial(100.0, 100.0, 0.0, 100.0, 100.0, 20.0);
cairo_pattern_add_color_stop_rgba(pat, 0, 0, 0, 0, 1);
cairo_pattern_add_color_stop_rgba(pat, 1, 0, 0, 0, 0);

这是我正在谈论的图像。

【问题讨论】：

你是如何创建“我想要的”图像的？
我进入 Pixelmator 并使用了硬度为 0% 的刷子。
cairo 结果是使用线性插值。离中心更远的每个像素都会得到 2 种灰色阴影。 “我想要什么”结果不是线性的。如果你想让我猜的话，Pixelmator 结果是经过伽马校正的，它围绕人类视觉工作。
除了以编程方式以非线性方式放置色标之外，还有其他可能的解决方案吗？

标签： cairo radial-gradients

【解决方案1】：

#cairo IRC 频道建议（感谢公司！）使用 cairo_mask() 而不是 cairo_paint() 来绘制渐变。这会导致平方而不是线性进展。

我在 lua 中做了以下操作。对不起语言，但原型化更容易。这将 1:1 映射到 C API，应该不难翻译：

cairo = require("lgi").cairo

s = cairo.ImageSurface(cairo.Format.ARGB32, 200, 100)
c = cairo.Context(s)
c:set_source_rgb(1, 1, 1)
c:paint()

p = cairo.Pattern.create_radial(50, 50, 0, 50, 50, 20)
p:add_color_stop_rgba(0, 0, 0, 0, 1)
p:add_color_stop_rgba(1, 0, 0, 0, 0)

c:save()
c:rectangle(0, 0, 100, 100)
c:clip()
c.source = p
c:paint()
c:restore()

p = cairo.Pattern.create_radial(50, 50, 2, 50, 50, 25)
p:add_color_stop_rgba(0, 0, 0, 0, 1)
p:add_color_stop_rgba(1, 0, 0, 0, 0)

c:translate(100, 0)
c:save()
c:rectangle(0, 0, 100, 100)
c:clip()
c.source = p
c:mask(p)
c:restore()

s:write_to_png("test.png")

对我来说，第二个圆圈（带有黑色源的 cairo_mask() 的那个）看起来更像你想要的：

【讨论】：