如何在Gtk3绘图区域显示rgb(248,205,205,1)线性渐变？

我尝试使用rgba(248, 205, 205, 1)绘制线性渐变图案，曾在GtkColorChooserWidget中看到过rgb(248, 205, 205)的线性渐变效果。但当我使用Cairo在Gtk3绘图区域绘制该渐变时，却无法正常显示（呈现黑色）。请问如何正确显示rgb(248, 205, 205, 1)的线性渐变？

相关代码示例：

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

void draw_gradient2(cairo_t *);
static gboolean on_draw_event(GtkWidget *widget, cairo_t *cr, gpointer user_data){         
  draw_gradient2(cr);
  return FALSE;
}

void draw_gradient2(cairo_t *cr){
    int width = 400;
    int height = 50;

    cairo_pattern_t *gradient;
    gradient =cairo_pattern_create_linear(0.0, 0.0,  width, 0.0);
    cairo_pattern_add_color_stop_rgba (gradient, 0.0, 248/256, 205/256, 205/256, 0.3);
    cairo_pattern_add_color_stop_rgba (gradient, 1.0, 248/256, 205/256, 205/256, 1);

    cairo_set_source (cr, gradient);
    cairo_paint (cr);
    cairo_pattern_destroy (gradient);
}

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);

  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), 400, 50); 
  gtk_window_set_title(GTK_WINDOW(window), "Linear gradients");

  gtk_widget_set_app_paintable(window, TRUE);
  gtk_widget_show_all(window);

  gtk_main();
  return 0;
}

问题原因与解决方法 #

问题出在整数除法上。C语言中，两个整数相除会直接截断小数部分，比如248/256的计算结果是0，而非预期的0.96875。所有颜色通道值都被算成0，最终渐变自然显示为黑色。

只需要将除法运算改为浮点除法即可解决：把分子或分母改为浮点数形式（比如在数字后加.0），让编译器执行浮点运算。

修正后的draw_gradient2函数：

void draw_gradient2(cairo_t *cr){
    int width = 400;
    int height = 50;

    cairo_pattern_t *gradient;
    gradient = cairo_pattern_create_linear(0.0, 0.0, width, 0.0);
    // 将整数除法改为浮点除法
    cairo_pattern_add_color_stop_rgba(gradient, 0.0, 248.0/256, 205.0/256, 205.0/256, 0.3);
    cairo_pattern_add_color_stop_rgba(gradient, 1.0, 248.0/256, 205.0/256, 205.0/256, 1);

    cairo_set_source(cr, gradient);
    cairo_paint(cr);
    cairo_pattern_destroy(gradient);
}

你也可以直接使用计算好的浮点值（比如0.96875对应248/256，0.8039对应205/256），效果是一样的。

内容的提问来源于stack exchange，提问作者dibyendu