七、xlib窗口渲染

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 和 GCPixmap 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

运行结果如下：

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

函数名	作用
XCreatePixmap	创建一个Pixmap对象。Pixmap用于在屏幕外绘制对象，在上面的示例中我们把XPutImage原本存储到window的图片，改为存储为Pixmap。Pixmap可以用来实现双缓冲技术，即在屏幕外进行绘制，当绘制操作完成后，把Pixmap数据拷到屏幕窗口显示，以避免绘制闪烁现象。
XRenderFindStandardFormat	从当前连接中找到所支持的颜色格式，如对于png图片我们需要32位支持，对于ubuntu下创建默认是24位深度的窗口，我们需要PictStandardRGB24。
XRenderFindVisualFormat	查找当前连接，即当前窗口所支持颜色格式。
XRenderCreatePicture	为可绘制对象创建Picture对象，XRender中所有渲染操作都是针对Picture进行操作。
XRenderComposite	对两个Picture进行混合。

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 坐标

以上程序运行结果如下