七、xlib窗口渲染

系列文章目录

本系列文章记录在Linux操作系统下，如何在不依赖QT、GTK等开源GUI库的情况下，基于x11窗口系统（xlib）图形界面应用程序开发。之所以使用x11进行窗口开发，是在开发一个基于duilib跨平台的界面库项目，使用gtk时，发现基于gtk的开发，依赖的动态库太多，发布时太麻烦，gtk不支持静态库编译发布。所以我们决定使用更底层的xlib接口。在此记录下linux系统下基于xlib接口的界面开发

一、xlib创建窗口
二、xlib事件
三、xlib窗口图元
四、xlib区域
五、xlib绘制按钮控件
六、绘制图片
七、xlib窗口渲染
八、实现编辑框控件
九、异形窗口
十、基于xlib实现定时器
十一、xlib绘制编辑框-续
十二、Linux实现截屏小工具

1.渲染图片

在上篇文章中的最后，我们使用libpng加载了一个png图片，并显示到窗口上，但是我们可以看到显示到窗口的图片周边有黑色的背景。原因是在我测试的操作系统下使用xlib创建的窗口默认支持的颜色深度为24位，而png支持alpha通道，当我们把一个支持alpha通道透明度的图片放到一个24位窗口上时，alpha通道为0，整体就显示为黑色了。解决这个问题有两种办法，一种是在窗口的时候明确的指定我要创建一个支持32位颜色窗口，另一种方式是使用XRender。使用XRender不仅可以支持带透明度图片绘制，还可以对两张图片进行混合，实现更加复杂的效果，还可以利用XRender进行渐变窗口的绘制。Cario和GTK也是使用XRender进行窗口渲染。XRender是一个X Window系统的一个显示扩展，相关的接口定义所在的头文件

#include <X11/extensions/Xrender.h>

当然如果使用XRender进行界面渲染，我们需要确定是否安装了XRender的开发包。ubuntu下安装XRender开发包的脚本如下

sudo apt install libxrender-dev

我们对上一篇文章中的代码进行修改，使用XRender进行png图片的渲染，代码如下：

#include <X11/Xlib.h>
#include <X11/Xutil.h>
#include <X11/extensions/Xrender.h>
#include <stdio.h>
#include <png.h>
#include <stdlib.h>

// 加载 PNG 文件的函数
unsigned char *load_png(const char *filename, int *width, int *height) {
    FILE *fp = fopen(filename, "rb");
    if (!fp) {
        fprintf(stderr, "无法打开文件: %s\n", filename);
        return NULL;
    }

    png_structp png = png_create_read_struct(PNG_LIBPNG_VER_STRING, NULL, NULL, NULL);
    if (!png) {
        fclose(fp);
        return NULL;
    }

    png_infop info = png_create_info_struct(png);
    if (!info) {
        png_destroy_read_struct(&png, NULL, NULL);
        fclose(fp);
        return NULL;
    }

    if (setjmp(png_jmpbuf(png))) {
        png_destroy_read_struct(&png, &info, NULL);
        fclose(fp);
        return NULL;
    }

    png_init_io(png, fp);
    png_read_info(png, info);

    *width = png_get_image_width(png, info);
    *height = png_get_image_height(png, info);
    int color_type = png_get_color_type(png, info);
    int bit_depth = png_get_bit_depth(png, info);

    // 转换为 8 位 RGB 或 RGBA 格式
    if (bit_depth == 16)
        png_set_strip_16(png);
    if (color_type == PNG_COLOR_TYPE_PALETTE)
        png_set_palette_to_rgb(png);
    if (color_type == PNG_COLOR_TYPE_GRAY && bit_depth < 8)
        png_set_expand_gray_1_2_4_to_8(png);
    if (png_get_valid(png, info, PNG_INFO_tRNS))
        png_set_tRNS_to_alpha(png);
    if (color_type == PNG_COLOR_TYPE_RGB || color_type == PNG_COLOR_TYPE_GRAY ||
        color_type == PNG_COLOR_TYPE_PALETTE)
        png_set_filler(png, 0xFF, PNG_FILLER_AFTER);
    if (color_type == PNG_COLOR_TYPE_GRAY || color_type == PNG_COLOR_TYPE_GRAY_ALPHA)
        png_set_gray_to_rgb(png);

    png_read_update_info(png, info);

    int rowbytes = png_get_rowbytes(png, info);
    unsigned char *image_data = static_cast<unsigned char *>(malloc(rowbytes * (*height)));
    png_bytep *row_pointers = static_cast<png_bytep *>(malloc(sizeof(png_bytep) * (*height)));

    for (int y = 0; y < *height; y++)
        row_pointers[y] = image_data + y * rowbytes;

    png_read_image(png, row_pointers);

    free(row_pointers);
    png_destroy_read_struct(&png, &info, NULL);
    fclose(fp);

    return image_data;
}

void DoPaint(Display *display, Window window) {
    int screen_num = DefaultScreen(display);
    int width = 0;
    int height = 0;

    unsigned char *buffer = load_png("icon.png",&width,&height);
    unsigned char *imageData = (unsigned char*)malloc(width*height*4);
    for (int i=0;i<height;i++) {
        for (int j=0;j<width;j++) {
            unsigned char *originPixel = buffer + (i*width+j)*4;
            unsigned char *pixel = imageData + (i*width+j)*4;
            pixel[3] = originPixel[3];
            pixel[0] = originPixel[2];
            pixel[1] = originPixel[1];
            pixel[2] = originPixel[0];
        }
    }
    free(buffer);
    // 创建 Pixmap 和 GC
    Pixmap pixmap = XCreatePixmap(display, window, width, height, 32);
    GC gc = XCreateGC(display, pixmap, 0, NULL);

    XImage *image = XCreateImage(display, DefaultVisual(display,screen_num), 32, ZPixmap, 0,
                                 (char *)imageData, width, height, 32, 0);
    XPutImage(display,pixmap,gc,image,0,0,0,0,width,height);

    // 创建 Picture 对象
    XRenderPictFormat *format = XRenderFindStandardFormat(display, PictStandardARGB32);
    Picture pngPicture = XRenderCreatePicture(display, pixmap, format, 0, NULL);

    XRenderPictFormat *formatDefault = XRenderFindVisualFormat(display, DefaultVisual(display,screen_num));
    Picture windowPicture = XRenderCreatePicture(display,window,formatDefault,0, nullptr);
    XRenderComposite(display, PictOpOver, pngPicture, None, windowPicture,
                     0, 0, 0, 0, 0, 0, width, height);

    XRenderFreePicture(display,windowPicture);
    XRenderFreePicture(display,pngPicture);
    XFreePixmap(display,pixmap);
    XFreeGC(display,gc);
    XDestroyImage(image);
}

int main() {

    Display *display = XOpenDisplay(NULL);
    Window win = XCreateSimpleWindow(display, DefaultRootWindow(display), 10, 10, 800, 600, 1,
                                     BlackPixel(display, DefaultScreen(display)),
                                     WhitePixel(display, DefaultScreen(display)));

    XSelectInput(display, win, ExposureMask);
    XMapWindow(display, win);

    while (1) {
        XEvent e;
        XNextEvent(display, &e);
        if (e.type == Expose) {
            DoPaint(display,win);
        }
    }
    XDestroyWindow(display,win);
    XCloseDisplay(display);
    return 0;
}

使用g++编译以上代码

g++ xxx.cpp -o app -lX11 -lXrender -lpng

运行结果如下：

在上面的程序中我们使用几个新的函数。所使用的函数及作用如下

2.双缓冲

在上面的示例中，我们提到了Pixmap。在之前的所有示例中，我们无论使用XDrawString、XDrawArc、XDrawRectangle这些函数中有一个参数类型是Drawable，在xlib接口中，Drawable可以是Window或是Pixmap，我们之前所有的示例都是直接绘制到Window对象上。之前的绘制的元素较少，所以在界面上我们没有什么感觉，当绘制的元素较多，或者我们刷新屏幕窗口的频率较高时，界面就会出现闪烁或是延迟显示问题。为了解决这个问题，我们可以先把所有的元素绘制到Pixmap，然后再将Pixmap的数据拷贝到窗体上显示。下面给出一个xlib双缓冲的示例。

#include <clocale>
#include <cstring>
#include <X11/Xlib.h>
#include <stdio.h>
#include <stdlib.h>

void DoPaint(Display *display, Window window,int width, int height) {
    char drawText[] = "Draw Text...";
    Pixmap  pixmap = XCreatePixmap(display,window,width,height, DefaultDepth(display, DefaultScreen(display)));
    GC gc = XCreateGC(display,pixmap,0,nullptr);
    //使用背景色来填充pixmap中的数据
    XSetForeground(display,gc, WhitePixel(display, DefaultScreen(display)));
    XFillRectangle(display,pixmap,gc,0,0,width,height);

    //设置文本颜色
    XSetForeground(display,gc, 0xff000000);
    XDrawString(display,pixmap,gc,30,20,drawText,strlen(drawText));

    //设置矩形颜色、线条样式
    XSetForeground(display,gc,0xff0000);
    XSetLineAttributes(display,gc,5,LineSolid,CapButt, JoinMiter);
    XDrawRectangle(display,pixmap,gc,30,30,80,60);

    //设置填充弧形的颜色
    XSetForeground(display,gc,0xff0000);
    XFillArc(display,pixmap,gc,100,100,50,50,0*64,180*64);

    //设置填充矩形颜色
    XSetForeground(display,gc,0x00ff00);
    XFillRectangle(display,pixmap,gc,200,200,100,80);

    //将内存中绘制的元素拷贝到窗口中显示
    XCopyArea(display,pixmap,window,gc,0,0,width,height,0,0);
    XFreeGC(display,gc);
}


int main() {
    Display *display;
    Window window;
    int screen;
    XEvent event;

    display = XOpenDisplay(NULL);
    if (display == NULL) {
        fprintf(stderr, "无法打开X显示器\n");
        exit(1);
    }

    screen = DefaultScreen(display);
    window = XCreateSimpleWindow(display, RootWindow(display, screen), 10, 10, 400, 300, 1,
                                 BlackPixel(display, screen), WhitePixel(display, screen));

    /* 选择要接收的事件类型 */
    XSelectInput(display, window, ExposureMask);
    XMapWindow(display, window);

    while (1) {
        XNextEvent(display, &event);
        if (event.type == Expose) {
            DoPaint(display,window,400,300);
        }
    }

    XDestroyWindow(display, window);
    XCloseDisplay(display);

    return 0;
}

编译以上程序，运行结果如下，这个示例在我们所有的绘制都不是直接绘制到窗口上，而是绘制到Pixmap内存中，最后一次性将绘制结果通过XCopyArea拷贝到界面进行显示。这里使用XCopyArea需要注意的是Pixmap和Window需要具备相同的颜色深度。比如我的窗口支持的颜色深度是24位，那么我创建Pixmap时也需要是24位，否则使用XCopyArea会产生错误。

3.混合图片

接下来我们实现将一个蓝色块以50%透明度混合到红色背景块中。实现代码如下

#include <clocale>
#include <cstring>
#include <X11/Xlib.h>
#include <stdio.h>
#include <stdlib.h>
#include <X11/extensions/Xrender.h>

void DoPaint(Display *display, Window window,int width,int height,int alpha = 128) {
    int screen = DefaultScreen(display);
    double fade = alpha*1.0/255.0;

    XRenderColor  alphaColor = {.alpha = (ushort)(0xffff*fade)};
    XRenderColor iAlphaColor = {.alpha = (ushort)(0xffff*(1-fade))};
    Picture aPicture = XRenderCreateSolidFill(display,&alphaColor);
    Picture iAPicture = XRenderCreateSolidFill(display,&iAlphaColor);

    Pixmap redPixmap = XCreatePixmap(display,window,width,height, DefaultDepth(display, screen));
    GC redGC = XCreateGC(display,redPixmap,0, nullptr);
    XSetForeground(display,redGC,0xff0000);
    XFillRectangle(display,redPixmap,redGC,0,0,width,height);
    XFreeGC(display,redGC);

    Pixmap bluePixmap = XCreatePixmap(display,window,width,height, DefaultDepth(display, screen));
    GC blueGC = XCreateGC(display,bluePixmap,0, nullptr);
    XSetForeground(display,blueGC,0x0000ff);
    XFillRectangle(display,bluePixmap,blueGC,0,0,width,height);
    XFreeGC(display,blueGC);

    Picture redPicture = XRenderCreatePicture(display,redPixmap, XRenderFindVisualFormat(display,
                                                                                         DefaultVisual(display,screen)),
                                              0, nullptr);
    Picture bluePicture = XRenderCreatePicture(display,bluePixmap, XRenderFindVisualFormat(display,
                                                                                          DefaultVisual(display,screen)),
                                               0, nullptr);
    Picture windowPicture = XRenderCreatePicture(display,window, XRenderFindVisualFormat(display,
                                                                                            DefaultVisual(display,screen)),
                                                 0, nullptr);
    XRenderComposite(display,PictOpSrc,redPicture,iAPicture,windowPicture,0,0,0,0,0,0,width,height);
    XRenderComposite(display,PictOpAdd,bluePicture,aPicture,windowPicture,0,0,0,0,0,0,width,height);

    XRenderFreePicture(display,windowPicture);
    XRenderFreePicture(display,bluePicture);
    XRenderFreePicture(display,redPicture);

    XFreePixmap(display,bluePixmap);
    XFreePixmap(display,redPixmap);
    XRenderFreePicture(display,iAPicture);
    XRenderFreePicture(display,aPicture);
}


int main() {
    Display *display;
    Window window;
    int screen;
    XEvent event;

    display = XOpenDisplay(NULL);
    if (display == NULL) {
        fprintf(stderr, "无法打开X显示器\n");
        exit(1);
    }

    screen = DefaultScreen(display);
    window = XCreateSimpleWindow(display, RootWindow(display, screen), 10, 10, 400, 300, 1,
                                 BlackPixel(display, screen), WhitePixel(display, screen));

    /* 选择要接收的事件类型 */
    XSelectInput(display, window, ExposureMask);
    XMapWindow(display, window);

    while (1) {
        XNextEvent(display, &event);
        if (event.type == Expose) {
            DoPaint(display,window,400,300,128);
        }
    }

    XDestroyWindow(display, window);
    XCloseDisplay(display);

    return 0;
}

编译运行以上程序。结果如下

在做带有alpha通道透明度混合操作，使用通义和chatgpt都无法实现真正的混合效果。以上通过查询大量资料实现。另一种方式可以手工计算每个像素点混合后的颜色值。我们对手动混合以及XRender混合两种方式进行了测试，在使用需要相同效果，相同混合大小的情况下，Debug版本下手动混合的性能要比XRender低10倍左右。

4.渐变窗口

我们可以使用XRender渲染功能实现一个渐变的窗口

#include <X11/Xlib.h>
#include <X11/extensions/Xrender.h>
#include <stdio.h>

int main() {
    // 连接到 X 服务器
    Display *display = XOpenDisplay(NULL);
    if (!display) {
        fprintf(stderr, "无法连接到 X 服务器\n");
        return 1;
    }

    int screen = DefaultScreen(display);
    Window root = RootWindow(display, screen);

    // 创建一个窗口
    Window window = XCreateSimpleWindow(display, root, 100, 100, 400, 300, 1,
                                        BlackPixel(display, screen),
                                        WhitePixel(display, screen));

    // 选择事件类型
    XSelectInput(display, window, ExposureMask | KeyPressMask);

    // 显示窗口
    XMapWindow(display, window);

    // 检查 XRender 扩展是否可用
    int render_event_base, render_error_base;
    if (!XRenderQueryExtension(display, &render_event_base, &render_error_base)) {
        fprintf(stderr, "XRender 扩展不可用\n");
        XCloseDisplay(display);
        return 1;
    }

    // 获取默认的视觉和格式
    XRenderPictFormat *format = XRenderFindVisualFormat(display, DefaultVisual(display, screen));
    if (!format) {
        fprintf(stderr, "无法找到合适的 XRender 格式\n");
        XCloseDisplay(display);
        return 1;
    }

    // 创建窗口的图片（Picture）
    Picture window_picture = XRenderCreatePicture(display, window, format, 0, NULL);

    // 定义线性渐变的起点和终点
    XLinearGradient gradient;
    gradient.p1.x = XDoubleToFixed(0);   // 起点 x 坐标
    gradient.p1.y = XDoubleToFixed(0);   // 起点 y 坐标
    gradient.p2.x = XDoubleToFixed(400); // 终点 x 坐标
    gradient.p2.y = XDoubleToFixed(300); // 终点 y 坐标

    // 定义渐变的颜色停止点
    XFixed stops[2];
    XRenderColor colors[2];

    // 第一个颜色：红色
    stops[0] = XDoubleToFixed(0.0);
    colors[0].red = 65535;   // 红色 (范围 0-65535)
    colors[0].green = 0;
    colors[0].blue = 0;
    colors[0].alpha = 65535; // 不透明

    // 第二个颜色：蓝色
    stops[1] = XDoubleToFixed(1.0);
    colors[1].red = 0;
    colors[1].green = 0;
    colors[1].blue = 65535;  // 蓝色
    colors[1].alpha = 65535; // 不透明

    // 创建线性渐变图案
    Picture gradient_picture = XRenderCreateLinearGradient(display, &gradient, stops, colors, 2);

    // 主事件循环
    XEvent event;
    while (1) {
        XNextEvent(display, &event);
        if (event.type == Expose) {
            // 每次窗口暴露时重新绘制渐变
            XRenderComposite(display, PictOpSrc, gradient_picture, None, window_picture,
                             0, 0, 0, 0, 0, 0, 400, 300);
        } else if (event.type == KeyPress) {
            break; // 按下任意键退出
        }
    }

    // 清理资源
    XRenderFreePicture(display, gradient_picture);
    XRenderFreePicture(display, window_picture);
    XDestroyWindow(display, window);
    XCloseDisplay(display);

    return 0;
}

编译以上程序，运行结果如下,上面实现了从左上角到右下角红色到蓝色的渐变效果。

以上代码程序中

    // 定义线性渐变的起点和终点
    XLinearGradient gradient;
    gradient.p1.x = XDoubleToFixed(0);   // 起点 x 坐标
    gradient.p1.y = XDoubleToFixed(0);   // 起点 y 坐标
    gradient.p2.x = XDoubleToFixed(400); // 终点 x 坐标
    gradient.p2.y = XDoubleToFixed(300); // 终点 y 坐标

以上设置渐变起始和终点。在XRender中窗口中的点需要转换为XRender的数据。以上XDoubleToFixed的作用把窗口坐标点乘以65535

// 第一个颜色：红色
    stops[0] = XDoubleToFixed(0.0);
    colors[0].red = 65535;   // 红色 (范围 0-65535)
    colors[0].green = 0;
    colors[0].blue = 0;
    colors[0].alpha = 65535; // 不透明

stops[0]和colors[0]用于定义第一个颜色点的位置和颜色值。

// 第二个颜色：蓝色
    stops[1] = XDoubleToFixed(1.0);
    colors[1].red = 0;
    colors[1].green = 0;
    colors[1].blue = 65535;  // 蓝色
    colors[1].alpha = 65535; // 不透明

这里第二个颜色点的位置和颜色值。

Picture gradient_picture = XRenderCreateLinearGradient(display, &gradient, stops, colors, 2);

这里根据渐变设置创建一个Picture对象。

以上程序我们设置了两种渐变颜色，从红色到蓝色的渐变，XRender支持设置多个颜色渐变。可以扩充以上stops和colors元素数量，并正确给出颜色实现多颜色渐变。

水平渐变

上面实现的是一个从左上角到右下角的渐变。如果我们想要实现一个水平方向的渐变，即从左到右的颜色渐变。我们只需要稍微改下代码即可，把以下代码

    XLinearGradient gradient;
    gradient.p1.x = XDoubleToFixed(0);   // 起点 x 坐标
    gradient.p1.y = XDoubleToFixed(0);   // 起点 y 坐标
    gradient.p2.x = XDoubleToFixed(400); // 终点 x 坐标
    gradient.p2.y = XDoubleToFixed(300); // 终点 y 坐标

修改为

// 定义线性渐变的起点和终点
    XLinearGradient gradient;
    gradient.p1.x = XDoubleToFixed(0);   // 起点 x 坐标
    gradient.p1.y = XDoubleToFixed(0);   // 起点 y 坐标
    gradient.p2.x = XDoubleToFixed(400); // 终点 x 坐标
    gradient.p2.y = 0; // 终点 y 坐标

运行结果如下

垂直渐变

实现垂直渐变的代码如下：

// 定义线性渐变的起点和终点
    XLinearGradient gradient;
    gradient.p1.x = XDoubleToFixed(0);   // 起点 x 坐标
    gradient.p1.y = XDoubleToFixed(0);   // 起点 y 坐标
    gradient.p2.x = 0; // 终点 x 坐标
    gradient.p2.y = XDoubleToFixed(300); // 终点 y 坐标

以上程序运行结果如下