在 gtk 中创建圆形图像

Question

如何使图像变圆？

我尝试将 border-radius 设置为 gtk 图像。但它不起作用。这是我的代码。

    GdkPixbuf *pixbuf;
    pixbuf=gdk_pixbuf_new_from_file_at_size ("sample.jpg", 48, 48, NULL);
    GtkWidget *image = GTK_WIDGET(gtk_builder_get_object(builder,"image"));;
    gtk_image_set_from_pixbuf(GTK_IMAGE(image),pixbuf); 
    g_object_unref (pixbuf);

我想将图像小部件四舍五入。 glade 中是否有任何选项可以使图像四舍五入？我没有找到。

谢谢。

Answer 1

正如@iharob 在评论中指出的那样，您需要一个 cairo 表面。

将半径（在此示例中为 40）更改为所需的大小：

#include <cairo.h>
#include <gtk/gtk.h>
#include <math.h>
#include <stdlib.h>

#ifndef M_PI
    #define M_PI 3.14159265358979323846
#endif

static void do_drawing(cairo_t *, GtkWidget *);

struct {
  cairo_surface_t *image;
} glob;

static gboolean on_draw_event(GtkWidget *widget, cairo_t *cr, 
    gpointer user_data)
{      
  do_drawing(cr, widget);

  return FALSE;
}

static void do_drawing(cairo_t *cr, GtkWidget *widget)
{
  GtkWidget *win = gtk_widget_get_toplevel(widget);

  gint width, height;
  gtk_window_get_size(GTK_WINDOW(win), &width, &height);
  cairo_set_source_surface(cr, glob.image, 1, 1);
  cairo_arc(cr, /*x*/ 128, /* y */ 128, /* radius */ 40, 0, 2*M_PI);
  cairo_clip(cr);
  cairo_paint(cr);      
}

int main(int argc, char *argv[])
{
  GtkWidget *window;
  GtkWidget *darea;  
  gint width, height;  

  glob.image = cairo_image_surface_create_from_png("image.png");
  width = cairo_image_surface_get_width(glob.image);
  height = cairo_image_surface_get_height(glob.image); 

  gtk_init(&argc, &argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  darea = gtk_drawing_area_new();
  gtk_container_add(GTK_CONTAINER (window), darea);

  g_signal_connect(G_OBJECT(darea), "draw", 
      G_CALLBACK(on_draw_event), NULL);  
  g_signal_connect(G_OBJECT(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), width+2, height+2); 
  gtk_window_set_title(GTK_WINDOW(window), "Round image");

  gtk_widget_show_all(window);

  gtk_main();

  cairo_surface_destroy(glob.image);

  return 0;
}

Answer 2

// compila con valac --pkg cairo nombre_archivo.gs

uses Cairo

init
    // crea una superficie (una imagen de 256x256) y un contexto
    surface: Cairo.ImageSurface = new Cairo.ImageSurface (Cairo.Format.ARGB32, 256, 256)
    context: Cairo.Context = new Cairo.Context (surface)

    // arco
    context.arc (128.0, 128.0, 76.8, 0, 2*Math.PI)
    context.clip ()     // recorta el arco
    context.new_path ()     // después de clip, la ruta se borró

    // imagen de origen (ruta y formato)
    image_path:string = GLib.Path.build_filename (GLib.Path.get_dirname (args[0]) , "paisaje.png")
    image: Cairo.ImageSurface = new Cairo.ImageSurface.from_png (image_path)

    // escala
    w:int = image.get_width ()
    h:int= image.get_height ()      
    context.scale (256.0/w, 256.0/h)

    context.set_source_surface (image, 0, 0)
    context.paint ()

    // guarda la nueva imagen
    surface.write_to_png ("paisaje_arco.png")

http://genie.webierta.skn1.com

中更多 Genie + Gtk + Cairo 示例

在 gtk 中创建圆形图像

Create a Rounded image in gtk

c

gtk

glade