Custom widgets with Cairo.

Dear lazyweb:

Is there a way to create a custom widget with Cairo so that it is “clickable” only in the painted area?

picture by Davyd Madeley

e.g.: capture the mouse click only in the white area.

10 Responses to “Custom widgets with Cairo.”

  1. desrt says:

    you can’t have X only give you events for this area without using a separate window and xshape. this is not what you want to do.

    what you want to do, instead, is capture all events but then use cairo_in_fill or cairo_in_stroke to check if the point that was clicked on is within the area that you’re interested in.

  2. writser says:


    I don’t know whether it already works on windows. You could also manually construct a bitmask (you can use almost the same cairo code) and check whether the input falls in the mask manually.

  3. otte says:

    You can use cairo_in_fill() to check if you’re in a given path you constructed in cairo or cairo_in_stroke() for strokes. And then you have to check that for every mouse move. It’s how I do it in Swfdec.

    So it is possible, but it’s not a drop-in one-line function that does that for you.

  4. greg says:

    On receiving a click event create a dummy surface, draw the clock, then use cairo_in_fill for hit testing.

  5. Davyd says:

    As people have said, you can easily calculate whether or not you’re inside the area, either using Cairo or by doing your own geometry calculations. You could overload the vcall for the signal and eat the event in the case where you don’t want to send it out (probably shouldn’t do this).

    Alternatively, if you were using GooCanvas, you could connect button-press-event directly to the clock object. It makes a lot of this stuff much simpler to do.

  6. jonner says:

    alternately, use something like goocanvas.

  7. Have you looked at the gsm_color_button.c/h code in gnome-system-monitor

    That does it :)

  8. Oops, I should have noticed, you only want the input shaped… /halfasleep

  9. carlosg says:

    another possibility for rounded shapes is checking that x^2 + y^2 < 1

  10. […] Bruno Boaventura (brunobol) « Custom widgets with Cairo. […]