使用 cairo 库创建高光效果

Posted 2023-02-16

【中文标题】使用 cairo 库创建高光效果

【英文标题】：Creating a highlight effect with the cairo library

【发布时间】：2012-03-31 12:44:14

【问题描述】：

我有一个cairo_t cr，我可以在 cairo 中使用它。 我想尝试在这个 cairo 图形上创建一个突出效果，它应该做以下事情之一：

调亮整个图像，使其看起来更亮一些 将背景，即图像的透明部分更改为更亮的颜色（例如白色） 也许在背景上添加一点模糊

我怎样才能用 cairo 做到这一点？

[编辑] 我有一个显示图标的小部件，当我将鼠标移到小部件上时，我想突出显示它。除了突出显示，我还希望绘制一些白色背景，以便更清楚突出显示哪个图标。 [/编辑]

【参考方案1】：

我认为你应该看看 cairo 拥有的一些运算符：

http://cairographics.org/operators/

应该可以使用 SOFT_LIGHT 或 LIGHTEN 以及明亮的源颜色来照亮整个图像。我猜。我会对此做一些实验。

您究竟为什么要更改图像的透明部分？我猜大多数表面都没有任何透明部分。 无论如何，我认为带有白色源的 DEST_OVER 应该这样做。

模糊是 cairo 无法为您做的事情。但是，您可以将图像绘制到图像表面，并使用一些漂浮在互联网上的代码来模糊它。例如，google 就这样引导我：http://taschenorakel.de/mathias/2008/11/24/blur-effect-cairo/

编辑：我做了一些实验（这是 oocairo lua 绑定，http://oocairo.naquadah.org/）。我认为您希望操作员 CAIRO_OPERATOR_ATOP 具有可靠的来源，例如rgba(1, 1, 1, 0.25)。这似乎确实使图像变亮了。

oocairo = require("oocairo")

s = oocairo.image_surface_create("argb32", 600, 400)
img = oocairo.image_surface_create_from_png("/usr/share/icons/wesnoth-1.8-icon.png")
local w, h = img:get_width(), img:get_height()

cr = oocairo.context_create(s)

function before()
    cr:save()
    cr:rectangle(0, 0, w, h)
    cr:clip()
    cr:set_source(img)
    cr:paint()
end
function after()
    cr:restore()
    cr:translate(w, 0)
end

function try_operator(op, alpha)
    before()
    cr:set_operator(op)
    cr:set_source_rgba(1, 1, 1, alpha)
    cr:paint()
    after()
end

function try_alpha(alpha)
    cr:save()
    before()
    after()
    try_operator("atop", alpha)
    try_operator("color-dodge", alpha)
    try_operator("soft-light", alpha)
    try_operator("hard-light", alpha)
    try_operator("hsl-hue", alpha)
    try_operator("hsl-saturation", alpha)
    try_operator("hsl-color", alpha)
    try_operator("hsl-luminosity", alpha)
    cr:restore()
    cr:translate(0, h)
end

try_alpha(1)
try_alpha(0.75)
try_alpha(0.5)
try_alpha(0.25)
try_alpha(0)

s:write_to_png("/tmp/t.png")

【讨论】：

谢谢。我应该提到我正在用 C 编程。你的例子是哪种语言？我想要做的是当我用鼠标移动它时突出显示一个图标。图标大多是圆形的，周围有很多透明的部分，所以我想在它们周围画一些白色（或任何其他颜色）的光环。当鼠标移到图标上时，这将使其非常容易识别。

语言是 lua，但只是因为恕我直言，它更容易进行实验。其中大部分都以 1:1 的比例映射到 C-api，除了这使用了 lua 的垃圾收集器。不知道加白晕，但是 cairo_set_operator(cr, CAIRO_OPERATOR_ATOP); cairo_set_source_rgba(cr, 1, 1, 1, 0.2); cairo_paint(cr);应该减轻负担。对于白色背景：cairo_set_operator(cr, CAIRO_OPERATOR_DEST_OVER); cairo_set_source_rgb(cr, 1, 1, 1); cairo_paint(cr); （所有这些都可以通过 cairo_clip 限制在某个区域）

OT - 移植到 python 进行我自己的测试：gist.github.com/stuaxo/5773269