Question

I have a cairo_t cr which I can draw upon with cairo.
I want to try to create a highlighting effect on this cairo graphic that should do one of the things:

• Lighten up the whole image so it looks a little brighter
• Change the background, that is the transparent parts of the image to some brighter color (e.g white)
• Maybe add a slight blur on the background

How can I do that with cairo?

[Edit] I have a widget that displays an icon and I want to highlight it when I move the mouse over the widget. Additionally to the highlight I also want to have some white background drawn, so that it is more clear which icon is highlighted. [/Edit]

Answer 1

I think you should check out some of the operators that cairo has:

http://cairographics.org/operators/

Lightening up the whole image should be doable with SOFT_LIGHT or LIGHTEN and a bright source color. I guess. I’ll do some experiments on that.

Why exactly do you want to change the transparent parts of the image? I would guess that most surfaces don’t have any transparent parts.
Anyway, I think that the DEST_OVER with a white source should do that.

Bluring is something that cairo cannot do for you. However, you can draw your image to an image surface and use some of the code that is floating around the internet for blurring that. For example, google just lead me this way: http://taschenorakel.de/mathias/2008/11/24/blur-effect-cairo/

Edit: I did some experiments (this is the oocairo lua bindings, http://oocairo.naquadah.org/). I think that you want the operator CAIRO_OPERATOR_ATOP with a solid source of e.g. rgba(1, 1, 1, 0.25). This seems to indeed lighten up the image.

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")