Drawing on the GtkDrawingArea with Xlib func - c

I have a problem.
I need to draw on the widget type GtkDrawingArea using functions Xlib (XDrawLine etc).
Why?
I use the library, which draws with Xlib. And I need to pass any arguments (Display, Window, GC) in the rendering function drawSome (...). All is well. I obtain these arguments (via gdk_x11_... (), GdkDrawable, GdkGC) and call drawSome (...) with obtained parameters.
But there are problems - drawing is not always done. The image is not displayed when maximizing windows, dragging, resizing DrawingArea etc.. The image is displayed only under unusual manipulation of the top window .
Then I tested the function XDrawPoint/Line/Rectangle - the same problem. If we use gdk_draw_rectangle (...) - all is normal.
Here's the code below:
...
GtkDrawingArea* area;
...
int main (int argc, char *argv[])
{
...
area=GTK_DRAWING_AREA(gtk_builder_get_object(builder,"area"));
gtk_widget_realize (GTK_WIDGET(area));
...
g_signal_connect (G_OBJECT(area), "expose_event", G_CALLBACK(expose_event_callback), NULL);
...
}
...
gboolean expose_event_callback (GtkWidget *widget, GdkEventExpose *event, gpointer data)
{
Display *dpy = gdk_x11_drawable_get_xdisplay(widget->window);
Window win =gdk_x11_drawable_get_xid(widget->window);
GC gc = DefaultGC(dpy, DefaultScreen(dpy));
//draw image on (0,0) in widget DrawingArea and a small black rectangle over image
drawSome(dpy, win, gc, ...);
XFillRectangle(dpy, win, gc, 0, 0, 10, 10);
return FALSE;
}
...
Image and a small black rectangle displayed only in one case: if the window move beyond the desktop and return back to the desktop - the image appears. In other cases, it is not displayed.
The impression is that another function erases DrawingArea.
Who can tell me what's the problem?
I would be grateful!
And... sorry to so bad English!

I think all you need to do is add XFlush(dpy); after the XFillRectangle command. I wrote a short routine and it seems to work.
#include <X11/Xlib.h> //-lX11
#include <gtk/gtk.h> //$$(pkg-config --cflags --libs gtk+-3.0)
#include <gdk/gdkx.h>
void DrawOnWidget(GtkWidget *widget)
{
GdkDisplay *gdk_dis = gdk_display_get_default();
Display *dis = gdk_x11_display_get_xdisplay (gdk_dis);
GC gc = DefaultGC(dis, DefaultScreen(dis));
GdkWindow *gdk_window = gtk_widget_get_window(widget);
Window win = gdk_x11_window_get_xid(gdk_window);
unsigned long valuemask = GCForeground;
XGCValues vColor;
vColor.foreground = 0x000000FF;
XChangeGC(dis, gc, valuemask, &vColor);
XFillRectangle(dis, win, gc, 0, 0, 100, 100);
XFlush(dis);
}

You'll need to use these functions X Window System Interaction but be warned but there may be other pitfalls. I think you'll also need to disable double-buffering for your GtkDrawingArea using gtk_widget_set_double_buffered

This is my second answer to this question... My first answer probably addresses the original question so I left it as unchanged. Although, the more general solution which is what I was looking for when I first found this thread was not addressed therefore, I decided to post a more general solution as well.
In short, I created a gtk image widget which can be displayed independently or attached to other widgets like buttons. Then I sent the image widget to the drawing function. In the drawing function all of the xlib parameters are queried in order to create a Pixmap as the xlib drawable which is where all xlib drawing is rendered. Then the GdkPixbuf is created and the Pixmap pixels are copied to the GdkPixbuf which is then set to the image widget...
There are a few commented lines which can be used to change the behavior the explanation will be left to the reader to determine.
It should be noted that while using xlib is possible; cairo appears to be a bit less cumbersome to implement.
#include <gtk/gtk.h> //$$(pkg-config --cflags --libs gtk+-3.0)
#include <gdk/gdkx.h>
#include <X11/Xlib.h> //-lX11
void DrawOnWidget(GtkWidget *widget, int width, int height)
{
GdkDisplay *gdk_dis = gdk_display_get_default();
Display *dis = gdk_x11_display_get_xdisplay (gdk_dis);
GC gc = DefaultGC(dis, DefaultScreen(dis));
GdkWindow *gdk_window = gtk_widget_get_window(widget);
Window win = gdk_x11_window_get_xid(gdk_window);
GdkPixbuf *pb = gdk_pixbuf_new(GDK_COLORSPACE_RGB, true, 8, width, height);
//GdkPixbuf *pb = gtk_image_get_pixbuf((GtkImage *) widget);
char *data = (char *) gdk_pixbuf_read_pixels((const GdkPixbuf *) pb); //RGB(A)
//int width = gdk_pixbuf_get_width(pb);
//int height = gdk_pixbuf_get_height(pb);
int pb_depth = gdk_pixbuf_get_n_channels(pb);
int depth = DefaultDepth(dis, DefaultScreen(dis)) / 8;
Pixmap pm = XCreatePixmap(dis, win, width, height, depth * 8);
unsigned long valuemask = GCForeground;
XGCValues vColor;
vColor.foreground = 0x00FF0000;
XChangeGC(dis, gc, valuemask, &vColor);
XFillRectangle(dis, pm, gc, 0, 0, width, height);
XFlush(dis);
XImage *ximage = XGetImage(dis, pm, 0, 0, width, height, AllPlanes, ZPixmap); //BGRX
for(int i=0, j=0; i<width*height*pb_depth; i+=pb_depth, j+=4)
{
data[i+0] = ximage->data[j+2];
data[i+1] = ximage->data[j+1];
data[i+2] = ximage->data[j+0];
if(pb_depth == 4) data[i+3] = 255;
}
gtk_image_set_from_pixbuf((GtkImage *) widget, pb);
XFreePixmap(dis, pm);
g_object_unref(pb);
return;
}
static void destroy( GtkWidget *widget, gpointer data )
{
gtk_main_quit();
}
static void test( GtkWidget *widget, gpointer data )
{
DrawOnWidget((GtkWidget *) data, 200, 200);
}
void GTK_Win()
{
GtkWidget *window, *grid;
GtkWidget *button_Exit, *button_Test;
window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
g_signal_connect (window, "destroy", G_CALLBACK (destroy), NULL);
grid = gtk_grid_new ();
gtk_container_add (GTK_CONTAINER (window), grid);
button_Exit = gtk_button_new_with_label ("x");
g_signal_connect (button_Exit, "clicked", G_CALLBACK (destroy), NULL);
//GdkPixbuf *pixbuf = gdk_pixbuf_new(GDK_COLORSPACE_RGB, true, 8, 200, 200);
//GtkWidget *image = gtk_image_new_from_pixbuf(pixbuf);
GtkWidget *image = gtk_image_new();
button_Test = gtk_button_new_with_label ("Test");
g_signal_connect (button_Test, "clicked", G_CALLBACK (test), image);
//gtk_button_set_image((GtkButton *) button_Test, image);
gtk_grid_attach (GTK_GRID (grid), button_Exit, 0, 0, 1, 1);
gtk_grid_attach (GTK_GRID (grid), button_Test, 0, 1, 1, 1);
gtk_grid_attach (GTK_GRID (grid), image, 0, 2, 1, 1);
gtk_widget_show_all (window);
gtk_main();
}
int main(int argc, char** argv)
{
gtk_init (&argc, &argv);
GTK_Win();
return 0;
}

Related

GTK3 resize attempt grows window exponentially

I have a C GTK3 program that has a notebook with two images. I want to be able to grab the corner of the window and adjust the size of the image currently displayed. What I currently have is a program that once started, the window keeps growing until I kill it from the terminal using ctrl-c. I put a sleep call in the callback to slow it down, but it still grows. How do I stop the window from growing unless I "grab" a corner of the window and adjust it myself?
#include <stdio.h>
#include <gtk/gtk.h>
#include <gdk-pixbuf/gdk-pixbuf.h>
GtkWidget *notebook;
gboolean resize_image(GtkWidget *widget, GdkRectangle *allocation,
gpointer user_data)
{
int w,h, pagenum;
GdkPixbuf *pxbscaled;
GtkWidget *image;
GdkPixbuf *pixbuf;
pagenum = gtk_notebook_get_current_page (GTK_NOTEBOOK(notebook));
image = gtk_notebook_get_nth_page (GTK_NOTEBOOK(notebook), pagenum);
// GtkImageType image_type = gtk_image_get_storage_type
// (GTK_IMAGE(image));
pixbuf = gtk_image_get_pixbuf(GTK_IMAGE(image));
h = allocation->height;
w = (gdk_pixbuf_get_width(pixbuf) * h) / gdk_pixbuf_get_height(pixbuf);
pxbscaled = gdk_pixbuf_scale_simple(pixbuf, w, h, GDK_INTERP_BILINEAR);
printf("Allocation height %d width %d.\n", h, w);
gtk_image_set_from_pixbuf(GTK_IMAGE(image), pxbscaled);
g_object_unref (pxbscaled);
sleep(2);
return FALSE;
}
static gboolean delete( GtkWidget *widget,
GtkWidget *event,
gpointer data )
{
gtk_main_quit ();
return FALSE;
}
int main( int argc,
char *argv[] )
{
GtkWidget *window;
GtkWidget *button;
GtkWidget *table;
GtkWidget *label;
GtkWidget *image;
int i;
char bufferl[32];
gtk_init (&argc, &argv);
window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
// gtk_widget_set_size_request (GTK_WIDGET(window), 800, 480);
g_signal_connect (window, "delete-event",
G_CALLBACK (delete), NULL);
gtk_container_set_border_width (GTK_CONTAINER (window), 10);
table = gtk_grid_new ();
gtk_container_add (GTK_CONTAINER (window), table);
/* Create notebook, place position of tabs */
notebook = gtk_notebook_new ();
gtk_notebook_set_tab_pos (GTK_NOTEBOOK (notebook), GTK_POS_TOP);
gtk_grid_attach (GTK_GRID (table), notebook, 0, 6, 3, 3);
gtk_widget_show (notebook);
/* Append pages to the notebook */
for (i = 0; i < 2; i++) {
sprintf(bufferl, "Page %d", i + 1);
if (i == 0) {
image = gtk_image_new_from_file("image1.jpg");
} else {
image = gtk_image_new_from_file("image2.jpg");
}
gtk_widget_set_halign(image, GTK_ALIGN_START);
gtk_widget_set_valign(image, GTK_ALIGN_START);
g_signal_connect(window, "size-allocate",
G_CALLBACK(resize_image), NULL);
label = gtk_label_new (bufferl);
gtk_notebook_append_page (GTK_NOTEBOOK(notebook),
image, label);
}
/* Create a close button */
button = gtk_button_new_with_label ("close");
g_signal_connect (button, "clicked",
G_CALLBACK (delete), NULL);
gtk_grid_attach (GTK_GRID (table), button, 0, 10, 1, 1);
gtk_widget_show_all (window);
gtk_main ();
return 0;
}
A user will need to provide image1.jpg and image2.jpg. Edit out the sleep call will result in the program filling the screen extremely quickly.
EDIT: I have also asked this question on the gtk mailing list.
The window with the image was growing because I was applying the size of the window to the image. Hence the image got larger and thus made the window get larger. Which continued in an endless progression, the "size-allocate" signal was constantly being called.
I fixed it by limiting the allocation height in the call back, by multiplying it by 0.75.
Now I can expand and contract the window with ease and it does not grow out of control.
The image does get ugly quite quickly, but that is another problem.

Size of the GDK double buffer

When (re)drawing CAIRO rectangles after an expose_event, I see that the double buffering prevents the screen from flickering. Unfortunately when resizing the window frame the double buffer seems to "hang" on the screen as a shadow. Setting double buffering to FALSE, removes the shadow but makes a complex drawing flicker.
If I would "invalidate" the complete newly resized window area (in the expose event), the problem is solved, but the expose event fires constantly new request to redraw.
How can I resize the GDK clip region in a double buffered context ?
thanks a lot
The program code I used detect the cause of problems :
#include <stdio.h>
#include <cairo.h>
#include <gtk/gtk.h>
static gboolean on_expose_event (GtkWidget *widget,
GdkEventExpose *event ,
gpointer data)
{
cairo_t *cr;
int width, height, kwadrant;
cr = gdk_cairo_create (widget->window);
gtk_window_get_size(GTK_WINDOW(widget), &width, &height);
cairo_rectangle(cr, 0.0, 0.0, width, height);
cairo_set_source_rgb(cr, 0.0, 0.0, 0.5);
cairo_fill(cr);
if (width < height)
kwadrant = 0.8 * width;
else
kwadrant = 0.8 * height;
cairo_set_line_width(cr, 1);
cairo_set_source_rgb(cr, 1.0, 1.0, 1.0);
cairo_rectangle(cr, (width - kwadrant)/2, (height - kwadrant)/2, kwadrant, kwadrant);
cairo_stroke(cr);
cairo_destroy(cr);
return TRUE;
}
void frame_callback(GtkWindow *window,
GdkEvent *event,
gpointer data)
{
char buff [50];
sprintf (buff, "%i X %i", event->configure.width,
event->configure.height);
gtk_window_set_title(window, buff);
return;
}
int main (int argc, char *argv[])
{
GtkWidget *window;
GtkWidget *darea;
gtk_init(&argc, &argv);
window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
darea = gtk_drawing_area_new();
gtk_container_add(GTK_CONTAINER (window), darea);
gtk_widget_set_app_paintable(window, TRUE);
gtk_widget_set_double_buffered(window, TRUE);
g_signal_connect(G_OBJECT(window), "expose-event",
G_CALLBACK(on_expose_event), NULL);
g_signal_connect(G_OBJECT(window), "configure-event",
G_CALLBACK(frame_callback), NULL);
g_signal_connect_swapped(G_OBJECT(window), "destroy",
G_CALLBACK(gtk_main_quit), G_OBJECT(window));
gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
gtk_widget_add_events(GTK_WIDGET(window), GDK_CONFIGURE);
gtk_widget_show (window);
gtk_main();
return 0;
}
========= added later :
As it often happens :
After searching for days for a valid solution, I posted this message. A few moments afterwards I tried to isolate the "firing the clipping" outside the EXPOSE event and replace all
gtk_widget_queue_draw (widget);
calls with
void request_redraw (GtkWidget *widget)
{
GdkRectangle rect;
int width, height;
gtk_window_get_size (GTK_WINDOW(window), &width, &height);
rect.x = 0;
rect.y = 0;
rect.width = width;
rect.height = height;
gdk_window_invalidate_rect (gtk_widget_get_window(widget), &rect, TRUE);
gtk_widget_queue_draw (widget);
return;
}
This allows me to keep the double buffering, avoid the flickering of the screen and to redraw the full area that corresponds with the resized frame/window.
Is this a correct solution or is there a better way ?
Sorry for having asked an unnecessary question

GTK+ How to draw into a drawing area

I would like to draw some lines (actually a sine wave) inside a gtk+ cairo drawing area but I can't figure out a way to do that.
So my code first defines the drawing area which has a callback to a function that draws a white background into the drawing area itself...at this point I would like to start drawing a piece of the sin wave after each time the START button is pressed (the button has a callback to the drawing function)....
So first of all..would it be possible to do that??Am I missing something?
Thanks.
#include <cairo.h>
#include <gtk/gtk.h>
int x = 0;
int x_old = 0;
float value = 0;
float value_old = 0;
GtkWidget *button = NULL;
GtkWidget *window = NULL;
GtkWidget *area = NULL;
GtkWidget *table = NULL;
static gboolean load_interface(GtkWidget *widget)
{
cairo_t *cr;
cr = gdk_cairo_create(area->window);
cairo_set_source_rgb(cr, 1, 1, 1);
cairo_rectangle(cr, 0, 0, 900, 400);
cairo_fill(cr);
}
void draw(GtkWidget *widget)
{
cairo_t *cr;
cr = gdk_cairo_create(widget->window);
x_old = x;
x = x + 15;
value_old = value;
value = value + 0.25;
cairo_set_source_rgb(cr, 0, 0, 0);
cairo_set_line_width (cr, 1);
cairo_move_to(cr, x_old, 100 + (sin(value_old))*50);
cairo_line_to(cr, x, 100 + (sin(value))*50);
cairo_stroke(cr);
}
int main (int argc, char *argv[])
{
g_log_set_handler ("Gtk", G_LOG_LEVEL_WARNING, (GLogFunc) gtk_false, NULL);
gtk_init (&argc, &argv);
g_log_set_handler ("Gtk", G_LOG_LEVEL_WARNING, g_log_default_handler, NULL);
window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
gtk_container_set_border_width (GTK_CONTAINER (window), 3);
gtk_window_set_title (GTK_WINDOW (window), "Draw");
gtk_window_set_position (GTK_WINDOW (window), GTK_WIN_POS_CENTER);
gtk_widget_realize (window);
g_signal_connect (window, "destroy", gtk_main_quit, NULL);
table = gtk_table_new (10, 10, TRUE);
gtk_table_set_col_spacings(GTK_TABLE(table),10);
gtk_table_set_row_spacings(GTK_TABLE(table),5);
gtk_container_add (GTK_CONTAINER (window), table);
area = gtk_drawing_area_new();
gtk_signal_connect (GTK_OBJECT(area), "event", G_CALLBACK (load_interface), (gpointer)area);
gtk_table_attach_defaults (GTK_TABLE(table), area, 1, 10, 0, 10);
button = gtk_button_new_from_stock ("START");
g_signal_connect (G_OBJECT (button), "clicked", G_CALLBACK (draw), (gpointer) window);
gtk_table_attach_defaults (GTK_TABLE(table), button, 0, 1, 0, 1);
gtk_widget_show_all (window);
gtk_main ();
return 0;
}
All your drawing should happen in the drawing area drawing event, called expose-event for GTK2 and draw in GTK3. In response to the button being clicked, you just change some values that you will reuse to compute the whole scene drawn. Once you changed these values, you just invalidate the drawing area to force it being redrawn, calling gtk_widget_queue_draw on the drawing area. And that's it.
If the scene is expensive to draw, remember using cairo clipping functions to improve performance by drawing only what has changed. Use then gtk_widget_queue_draw_area instead of gtk_widget_queue_draw, to give a hint about the zone that has changed and needs to be redrawn.
See GtkDrawingArea documentation.
BTW, don't use casts to GTK_OBJECT (deprecated), use G_OBJECT instead. This makes porting to GTK3 easier.
g_signal_connect() the expose-event.

How to rotate image using GTK+ / Cairo

I've got a simple application that is supposed to rotate a decorated wheel so many degrees every x number of milliseconds using GTK+ and Cairo. I've got some code below that calls cairo_rotate() from a timer. However, the image doesn't change. Do I have to invalidate the image to cause the expose-event to fire? I'm so new to Cairo that a simple example demonstrating how to rotate an image using Cairo in GTK+ would be highly appreciated.
#include <cairo.h>
#include <gtk/gtk.h>
cairo_surface_t *image;
cairo_t *cr;
gboolean rotate_cb( void )
{
cairo_rotate (cr, 1);
//cairo_paint(cr);
printf("rotating\n");
return( TRUE );
}
static gboolean
on_expose_event(GtkWidget *widget,
GdkEventExpose *event,
gpointer data)
{
cr = gdk_cairo_create (widget->window);
cairo_set_source_surface(cr, image, 0, 0);
cairo_paint(cr);
printf("Paint\n");
//cairo_destroy(cr);
return FALSE;
}
int main(int argc, char *argv[])
{
GtkWidget *window;
image = cairo_image_surface_create_from_png("wheel.png");
gtk_init(&argc, &argv);
window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
g_signal_connect(window, "expose-event",
G_CALLBACK (on_expose_event), NULL);
g_signal_connect(window, "destroy",
G_CALLBACK (gtk_main_quit), NULL);
gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
gtk_window_set_default_size(GTK_WINDOW(window), 500, 500);
gtk_widget_set_app_paintable(window, TRUE);
gtk_widget_show_all(window);
g_timeout_add(500, (GSourceFunc) rotate_cb, NULL);
gtk_main();
cairo_destroy(cr);
cairo_surface_destroy(image);
return 0;
}
You need to store the rotation in a variable and put the cairo_rotate(cr, rotation_amt); call into the on_expose_event method, before paint.
Also translate to the center of the window, rotate, and translate back, to make the wheel rotate around it's center, if the image is centered.
cairo_translate(cr, width / 2.0, height / 2.0);
cairo_rotate(cr, rotation_amt);
cairo_translate(cr, - image_w / 2.0, - image_h / 2.0);
cairo_set_source_surface(cr, image, 0, 0);
cairo_paint(cr);
I hope that's right.
And as ptomato said, you need to invalidate your drawing surface by calling gtk_widget_queue_draw from rotate_cb. And keeping a global variable for the Cairo context is redundant. The image doesn't rotate because a newly created context is loaded with an identity matrix and all your previous transformations are reset.
With the help of the cairo mailing list, this is a working example. I'm sharing this for those who might find this useful.
#include <cairo.h>
#include <gtk/gtk.h>
#include <math.h>
#include <stdlib.h>
cairo_surface_t *image;
cairo_t *cr;
gdouble rotation = 0;
GtkWidget *window;
gint image_w, image_h;
double DegreesToRadians( int degrees );
double DegreesToRadians( int degrees )
{
return((double)((double)degrees * ( M_PI/180 )));
}
gboolean rotate_cb( void *degrees )
{
// Any rotation applied to cr here will be lost, as we create
// a new cairo context on every expose event
//cairo_rotate (cr, 4);
rotation += DegreesToRadians((*(int*)(degrees)));
//cairo_paint(cr);
// printf("rotating\n");
// Tell our window that it should repaint itself (ie. emit an expose event)
gtk_widget_queue_draw(window);
return( TRUE );
}
static gboolean on_expose_event(GtkWidget *widget, GdkEventExpose *event,gpointer data)
{
// Make sure our window wasn't destroyed yet
// (to silence a warning)
g_return_if_fail(GTK_IS_WIDGET(widget));
cr = gdk_cairo_create (widget->window);
// We need to apply transformation before setting the source surface
// We translate (0, 0) to the center of the screen,
// so we can rotate the image around its center point,
// not its upper left corner
cairo_translate(cr, image_w/2, image_h/2);
cairo_rotate(cr, rotation);
cairo_set_source_surface(cr, image, -image_w/2, -image_h/2);
// We need to clip around the image, or cairo will paint garbage data
//cairo_rectangle(cr, -image_w/2, -image_h/2, image_w, image_h);
//cairo_clip(cr);
cairo_paint(cr);
//printf("Paint\n");
cairo_destroy(cr);
return FALSE;
}
int main(int argc, char *argv[])
{
int degrees = 10, speed = 125;
image = cairo_image_surface_create_from_png("wheel.png");
image_w = cairo_image_surface_get_width(image);
image_h = cairo_image_surface_get_height(image);
gtk_init(&argc, &argv);
if( argc == 3 )
{
degrees = atoi(argv[1]);
speed = atoi(argv[2]);
}
window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
g_signal_connect(window, "expose-event",
G_CALLBACK (on_expose_event), NULL);
g_signal_connect(window, "destroy",
G_CALLBACK (gtk_main_quit), NULL);
gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
gtk_window_set_default_size(GTK_WINDOW(window), image_w, image_h);
gtk_widget_set_app_paintable(window, TRUE);
gtk_widget_show_all(window);
g_timeout_add(speed, (GSourceFunc) rotate_cb, (void *)&degrees);
gtk_main();
cairo_surface_destroy(image);
return 0;
}

How to draw a line in a GtkDrawingArea using Cairo with Gtk3

Could someone please show me a minimal working example of using C language for Cairo with Gtk3 to draw a single line in a GtkDrawingArea. I've tried to modify testcairo.c in the Gtk3 tests folder but I can't get it to work. Please don't suggest the tutorials at the Cairo site; Zetcode.com or gnome.org which are either not for use with Gtk3 or not minimal working examples.
I got it. The key difference is that for gtk+3 you must draw from within a "draw" signal handler. With gtk+2 it's from within the "expose-event" signal handler. Here's a minimal working example.
Here is a complete working example:
Make sure gtk3-devel is installed (in Fedora #dnf install gtk3-devel)
In Ubuntu: sudo apt install libgtk-3-dev
to compile: gcc draw.c `pkg-config --cflags gtk+-3.0 --libs gtk+-3.0` -o draw
#include <gtk/gtk.h>
gboolean draw_callback (GtkWidget *widget, cairo_t *cr, gpointer data)
{
guint width, height;
GdkRGBA color;
GtkStyleContext *context;
context = gtk_widget_get_style_context (widget);
width = gtk_widget_get_allocated_width (widget);
height = gtk_widget_get_allocated_height (widget);
gtk_render_background(context, cr, 0, 0, width, height);
cairo_arc (cr, width/2.0, height/2.0, MIN (width, height) / 2.0, 0, 2 * G_PI);
gtk_style_context_get_color (context, gtk_style_context_get_state (context), &color);
gdk_cairo_set_source_rgba (cr, &color);
gdk_cairo_set_source_rgba (cr, &color);
cairo_fill (cr);
return FALSE;
}
gint main(int argc,char *argv[])
{
GtkWidget *window, *drawing_area;
gtk_init (&argc, &argv);
window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
g_signal_connect (window, "destroy", G_CALLBACK (gtk_main_quit), NULL);
drawing_area = gtk_drawing_area_new();
gtk_container_add (GTK_CONTAINER (window), drawing_area);
gtk_widget_set_size_request (drawing_area, 200, 100);
g_signal_connect (G_OBJECT (drawing_area), "draw", G_CALLBACK (draw_callback), NULL);
gtk_widget_show_all (window);
gtk_main ();
return 0;
}
Anyone doing this in 2020. This is the Zetcode example refactored to work with GTK3, and it draws what you want so the lines are not weirdly connected. I've added comments to explain what's happening.
/* To compile: gcc linetest.c -o linetest `pkg-config --cflags --libs gtk+-3.0`
* C program for basic drawing with GTK+ and cairo.
* Working 2020 example if this got you stuck, http://zetcode.com/gfx/cairo/basicdrawing/
* Note: the above command line uses backticks (`), it's right before 1 on your keyboard.
*/
#include <cairo.h>
#include <gtk/gtk.h>
//function prototypes
static gboolean on_draw_event(GtkWidget *widget, cairo_t *cr, gpointer user_data);
static void do_drawing(cairo_t *cr);
static gboolean clicked(GtkWidget *widget, GdkEventButton *event, gpointer user_data);
//end of function prototypes
/* Global variables for storing mouse coordinates,
* count is index of arrays, coordx and coordy are x and y coordinates of the mouse
*/
struct {
int count;
double coordx[100];
double coordy[100];
} glob;
/* Function: on_draw_event
*Parameters: GtkWidget, cairo_t, gpointer
*Use: This is the function we attach to the main method when we want to draw. It calls the do_drawing method.
*Example: g_signal_connect(G_OBJECT(darea), "draw", G_CALLBACK(on_draw_event), NULL);
*/
static gboolean on_draw_event(GtkWidget *widget, cairo_t *cr, gpointer user_data)
{
do_drawing(cr);
return FALSE;
}
/* Function: do_drawing
*Parameters: cairo_t
*Use: It sets cairo canvas settings, and draws shapes with a for loop
*Settings: are commented
*Note: printf is used during debugging to find mouse click coordinates :)
*/
static void do_drawing(cairo_t *cr)
{
cairo_set_source_rgb(cr, 0, 0, 0);//Line colour
cairo_set_line_width(cr, 0.5);//Line width
if (glob.count > 1) {
cairo_move_to(cr, glob.coordx[0], glob.coordy[0]);
//printf("from: x:%f, y:%f\n",glob.coordx[0],glob.coordy[0]);
}
//Connect lines.
for (int i = 1; i < glob.count; ++i) {
cairo_line_to(cr, glob.coordx[i], glob.coordy[i]);
//printf("to: x:%f, y:%f\n",glob.coordx[i],glob.coordy[i]);
}
// Draw the above.
cairo_stroke(cr);
//resets array so shape can be drawn again.
glob.count = 0;
}
/* Function: clicked
*Parameters: GtkWidget, GdkEventButton, gpointer
*Use: Registers mouse clicks, 1 is right, 3 is left on laptop. Clicks may be 1, 2 or 3 on a desktop
*Note: printf is used during debugging to find mouse click coordinates :)
*/
static gboolean clicked(GtkWidget *widget, GdkEventButton *event,
gpointer user_data)
{
if (event->button == 1) {
// printf("Right Click");
glob.coordx[glob.count] = event->x;
glob.coordy[glob.count++] = event->y;
// int i;
// for (i =0; i <= glob.count-1; i++) {
// printf("%f\n", glob.coordx[i]);
// }
}
if (event->button == 3) {
//printf("left Click");
gtk_widget_queue_draw(widget);
}
return TRUE;
}
//Main method.
int main(int argc, char *argv[])
{
//widget variables, window and drawing area.
GtkWidget *window;
GtkWidget *darea;
//Set global count 0, so array is at beginning whenver program starts.
glob.count = 0;
//Always have this to start GTK.
gtk_init(&argc, &argv);
//Set new window, set new drawing area.
window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
darea = gtk_drawing_area_new();
//Add the drawing area to the window.
gtk_container_add(GTK_CONTAINER(window), darea);
//You need this to register mouse clicks.
gtk_widget_add_events(window, GDK_BUTTON_PRESS_MASK);
//Attaching draw function to the main method.
g_signal_connect(G_OBJECT(darea), "draw",
G_CALLBACK(on_draw_event), NULL);
//You can close window when you exit button.
g_signal_connect(window, "destroy",
G_CALLBACK(gtk_main_quit), NULL);
//Register if left or right mouse click.
g_signal_connect(window, "button-press-event",
G_CALLBACK(clicked), NULL);
//Set window position, default size, and title.
gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
gtk_window_set_default_size(GTK_WINDOW(window), 400, 300);
gtk_window_set_title(GTK_WINDOW(window), "Lines");
//Show all widgets.
gtk_widget_show_all(window);
//start window
gtk_main();
return 0;
}
// compila con valac --pkg gtk+-3.0 nombre_archivo.gs
uses
Gtk
Cairo
init
Gtk.init (ref args)
var TestCairo = new Ventana ()
TestCairo.show_all ()
Gtk.main ()
class Ventana : Window
area: Gtk.DrawingArea
init
title = "Test Genie + GTK + Cairo"
set_default_size (400, 400)
window_position = WindowPosition.CENTER
destroy.connect(Gtk.main_quit)
// área de dibujo
area: Gtk.DrawingArea = new Gtk.DrawingArea ()
// conecta el área de dibujo al método dibujar
area.draw.connect (dibujar)
// añade el área de dibujo a la ventana
add (area)
def dibujar (context : Context) : bool
context.set_source_rgba (1, 0, 0, 1)
context.set_line_width (2)
context.move_to (200, 100)
context.line_to (200, 300)
context.move_to (100, 200)
context.line_to (300, 200)
context.stroke ()
return true
More examples of Genie + Gtk + Cairo in http://genie.webierta.skn1.com

Resources