How to draw sample code from the Cairo documentation? - graphics

Question

I'm a complete beginner and would really like to draw some of the shapes from https://www.cairographics.org/samples/ and tinker a bit with the placement of these shapes. But first I need to set everything up - just copy-pasting the code doesn't work.
/* a custom shape that could be wrapped in a function */
double x = 25.6, /* parameters like cairo_rectangle */
y = 25.6,
width = 204.8,
height = 204.8,
aspect = 1.0, /* aspect ratio */
corner_radius = height / 10.0; /* and corner curvature radius */
double radius = corner_radius / aspect;
double degrees = M_PI / 180.0;
cairo_new_sub_path (cr);
cairo_arc (cr, x + width - radius, y + radius, radius, -90 * degrees, 0 * degrees);
cairo_arc (cr, x + width - radius, y + height - radius, radius, 0 * degrees, 90 * degrees);
cairo_arc (cr, x + radius, y + height - radius, radius, 90 * degrees, 180 * degrees);
cairo_arc (cr, x + radius, y + radius, radius, 180 * degrees, 270 * degrees);
cairo_close_path (cr);
cairo_set_source_rgb (cr, 0.5, 0.5, 1);
cairo_fill_preserve (cr);
cairo_set_source_rgba (cr, 0.5, 0, 0, 0.5);
cairo_set_line_width (cr, 10.0);
cairo_stroke (cr);
This code should generate the following shape:
a rounded rectangle
But clearly more is needed. So I decided to run the following code, which creates a window:
#include <X11/Xlib.h>
#include <X11/Xatom.h>
#include <X11/Xutil.h>
#include <cairo.h>
#include <cairo-xlib.h>
#include <stdio.h>
#include <stdlib.h>
/*! Simple Cairo/Xlib example.
* #author Bernhard R. Fischer, 2048R/5C5FFD47 <bf#abenteuerland.at>.
* #version 2014110801
* Compile with
* gcc -Wall $(pkg-config --libs --cflags cairo x11) -o cairo_xlib_simple cairo_xlib_simple.c
*/
/*! Check for Xlib Mouse/Keypress events. All other events are discarded.
* #param sfc Pointer to Xlib surface.
* #param block If block is set to 0, this function always returns immediately
* and does not block. if set to a non-zero value, the function will block
* until the next event is received.
* #return The function returns 0 if no event occured (and block is set). A
* positive value indicates that a key was pressed and the X11 key symbol as
* defined in <X11/keysymdef.h> is returned. A negative value indicates a mouse
* button event. -1 is button 1 (left button), -2 is the middle button, and -3
* the right button.
*/
int cairo_check_event(cairo_surface_t *sfc, int block)
{
char keybuf[8];
KeySym key;
XEvent e;
for (;;)
{
if (block || XPending(cairo_xlib_surface_get_display(sfc)))
XNextEvent(cairo_xlib_surface_get_display(sfc), &e);
else
return 0;
switch (e.type)
{
case ButtonPress:
return -e.xbutton.button;
case KeyPress:
XLookupString(&e.xkey, keybuf, sizeof(keybuf), &key, NULL);
return key;
default:
fprintf(stderr, "Dropping unhandled XEevent.type = %d.\n", e.type);
}
}
}
/*! Open an X11 window and create a cairo surface base on that window.
* #param x Width of window.
* #param y Height of window.
* #return Returns a pointer to a valid Xlib cairo surface. The function does
* not return on error (exit(3)).
*/
cairo_surface_t *cairo_create_x11_surface0(int x, int y)
{
Display *dsp;
Drawable da;
int screen;
cairo_surface_t *sfc;
if ((dsp = XOpenDisplay(NULL)) == NULL)
exit(1);
screen = DefaultScreen(dsp);
da = XCreateSimpleWindow(dsp, DefaultRootWindow(dsp), 0, 0, x, y, 0, 0, 0);
XSelectInput(dsp, da, ButtonPressMask | KeyPressMask);
XMapWindow(dsp, da);
sfc = cairo_xlib_surface_create(dsp, da, DefaultVisual(dsp, screen), x, y);
cairo_xlib_surface_set_size(sfc, x, y);
return sfc;
}
/*! Destroy cairo Xlib surface and close X connection.
*/
void cairo_close_x11_surface(cairo_surface_t *sfc)
{
Display *dsp = cairo_xlib_surface_get_display(sfc);
cairo_surface_destroy(sfc);
XCloseDisplay(dsp);
}
int main(int argc, char **argv)
{
cairo_surface_t *sfc;
cairo_t *ctx;
sfc = cairo_create_x11_surface0(500, 500);
ctx = cairo_create(sfc);
cairo_set_source_rgb(ctx, 1, 1, 1);
cairo_paint(ctx);
cairo_move_to(ctx, 20, 20);
cairo_line_to(ctx, 200, 400);
cairo_line_to(ctx, 450, 100);
cairo_line_to(ctx, 20, 20);
cairo_set_source_rgb(ctx, 0, 0, 1);
cairo_fill_preserve(ctx);
cairo_set_line_width(ctx, 5);
cairo_set_source_rgb(ctx, 1, 1, 0);
cairo_stroke(ctx);
cairo_destroy(ctx);
cairo_check_event(sfc, 1);
cairo_close_x11_surface(sfc);
return 0;
}
The output can be accessed here: black window launches successfully
How do I now draw the shape and some text?
Kind regards,

Answer 1

'm a complete beginner and would really like to draw some of the shapes from https://www.cairographics.org/samples/ and tinker a bit with the placement of these shapes.
The simplest approach would not be to open an image, but instead to draw a PNG. Here is an example for the first example from that page.
#include <cairo.h>
#include <math.h> // For M_PI
int main() {
cairo_surface_t *surface = cairo_image_surface_create (CAIRO_FORMAT_ARGB32, 300, 300);
cairo_t *cr = cairo_create (surface);
// Start of example
double xc = 128.0;
double yc = 128.0;
double radius = 100.0;
double angle1 = 45.0 * (M_PI/180.0); /* angles are specified */
double angle2 = 180.0 * (M_PI/180.0); /* in radians */
cairo_set_line_width (cr, 10.0);
cairo_arc (cr, xc, yc, radius, angle1, angle2);
cairo_stroke (cr);
/* draw helping lines */
cairo_set_source_rgba (cr, 1, 0.2, 0.2, 0.6);
cairo_set_line_width (cr, 6.0);
cairo_arc (cr, xc, yc, 10.0, 0, 2*M_PI);
cairo_fill (cr);
cairo_arc (cr, xc, yc, radius, angle1, angle1);
cairo_line_to (cr, xc, yc);
cairo_arc (cr, xc, yc, radius, angle2, angle2);
cairo_line_to (cr, xc, yc);
cairo_stroke (cr);
// End of example
cairo_surface_write_to_png (surface, "example.png");
cairo_destroy (cr);
cairo_surface_destroy (surface);
return 0;
}