Cairo multiple shapes in drawing area

Question

I'm trying to understand Cairo framework; but I don't know how to put more than one shape into the drawing area. All codes/tutorials I've seen are either too advanced or do not relate to this issue.

This is my code to draw a circle (I'm using C and gtk+3.0):

void draw(GtkWidget *this, cairo_t *cr, gpointer data) {

  cairo_set_line_width(cr, 5);
  cairo_set_source_rgb(cr, 0, 0, 0);

  cairo_translate(cr, prog.width/2, prog.height/2);
  cairo_arc(cr, 0, 0, 50, 0, 2 * M_PI);
  cairo_stroke_preserve(cr);

  cairo_set_source_rgb(cr, 0.9, 0.9, 0.9);

  cairo_fill(cr);

}

I understand all but one thing: cairo_t *cr. From what I've been searching cr is a Context, but didn't quite grasped an intuitive idea of what it is about (maybe my question lies on this understanding?).

So, if I needed more circles near this one, how could I create them?

My try was using cairo_move_to(cr, x, y) and draw another shape but obviously it didn't work.

Thanks!

Because c++ users also use Cairo a lot and could comment on this basic question I'm having. — tvaz
If they can, they monitor the cairo tag. Python and Java user might also use Cairo. - Do not add tags for unrelated languages. C++ and C are different languages! — too honest for this site
I understand. Sorry, and I will have that in mind for new posts. Thanks. — tvaz

andlabs andlabs · Accepted Answer · 2016-01-16T09:22:20

Yes, cairo_t is the type of a cairo context.

To draw on cairo, you set drawing parameters, a source which defines the color or image that gets drawn, and a path that specifies the shape that gets drawn, and then you call cairo_stroke() or cairo_fill() to do the actual drawing. After calling those, the path is reset (unless you use the _preserve versions of the functions), but everything else stays the same.

So to draw again, you just need to add more setup and drawing function calls after the first one.

cairo_move_to() does not actually move anything. What cairo_move_to() does is change the position of the "current point" of the path. Path components you add later, such as cairo_line_to(), will start at the current point and then set the current point to their end point.

In your case, you can draw multiple circles by adding a cairo_move_to() after the last line of your draw handler and then repeating the steps you used to draw the first circle.

cairo_arc() is different because you specify the center of the arc as the second and third arguments. To draw an arc somewhere else, you need to change those two arguments. (The current point does play a role in cairo_arc(); you'll need to see the documentation for information.)

The cairo documentation is the best place to start learning about cairo; it has lots of tutorials and samples.

Cairo multiple shapes in drawing area

1 Answers