三、xlib窗口图元

原创 已于 2025-11-06 09:20:42 修改 · 811 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#c语言 #c++ #Linux GUI #x11 #xlib #文本渲染

于 2025-05-16 09:45:00 首次发布

系列文章目录

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

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

文章目录

当xlib窗口系统成功创建一个窗体后，我们可以在Expose事件中向窗口放入一些元素展示给用户。xlib提供了可以向窗口中放入文本、点、线、矩形、位图等元素，这些基本的元素我们可以称之为图元。这篇文章记录如何在xlib窗口中绘制文本、改变文本字体颜色；在窗口中绘制矩形，弧形，点，线等元素，能够改变线条的样式如线条颜色、线条宽度等属性。

1.绘制文本

在xlib窗口系统中，可以使用XDrawString将文本信息绘制到窗口中。以下是一个简单的示例程序

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

void DoPaint(Display *display, Window window) {
    char drawText[] = "Draw Text...";
    GC gc = XCreateGC(display,window,0,nullptr);
    XDrawString(display,window,gc,30,50,drawText,strlen(drawText));
    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);
        }
    }

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

    return 0;
}

DoPaint由窗口的Expose事件触发时调用。在DoPaint函数中调用XCreateGC和XDrawString进行文本绘制。XCreateGC返回类型是GC，这是一个图形上下文的句柄标识，我们可以通过对GC进行设置，来改变显示到窗口的文字的颜色，线条的样式。XDrawString(display,window,gc,30,50,drawText,strlen(drawText));该行代码表示将距离窗口左上角向右偏移30像素，向下偏移50像素的位置做为文本drawText起始位置，将drawText中存的文本绘制到窗口中。

编译以上程序，运行效果如下：

在这里插入图片描述

我们可以使用XSetForeground对GC进行设置，来改变显示文字的颜色，修改后的DoPaint如下

void DoPaint(Display *display, Window window) {
    char drawText[] = "Draw Text...";
    GC gc = XCreateGC(display,window,0,nullptr);
    XSetForeground(display,gc,0xff0000);
    XDrawString(display,window,gc,30,50,drawText,strlen(drawText));
    XFreeGC(display,gc);
}

XSetForeground的第三个参数是一个unsigned long类型，实际有作用也就是低24位，分别用8位表示红、绿、蓝颜色分量。以上我们设置了红色，编译运行后，窗口显示如下

在这里插入图片描述

在这篇文章的后续示例代码中，我们不再贴出所有的代码，所有的绘制操作都是在DoPaint函数中完成。

在中文开发环境中，我们希望绘制一些中文字符到屏幕。如下的DoPaint源码所示

void DoPaint(Display *display, Window window) {
    setlocale(LC_ALL, ""); // 设置合适的locale环境
    XSetLocaleModifiers(""); // 可能需要调整locale修饰符
    char drawText[] = "Draw Text...";
    char utf8String[] = "汉字文本...";
    GC gc = XCreateGC(display,window,0,nullptr);
    XDrawString(display,window,gc,30,50,drawText,strlen(drawText));
    XDrawString(display,window,gc,30,80,utf8String,strlen(utf8String));
    XFreeGC(display,gc);
}

很不幸，以上程序并没有得到我们想要的结果，而是得到一串乱码。如下

在这里插入图片描述

原因是XDrawString 函数默认处理的是 Latin-1 编码的文本，并且它可能没有正确地处理 UTF-8 编码的汉字文本。我们可以使用Xutf8DrawString来绘制文本或是Xft库来进行汉字文本的绘制。由于Xft库支持freetype字体，并且提供更好的渲染效果（如抗锯齿），同时像pango这样的文本处理库也是使用xft进行文本渲染。在测试过程中使用Xuft8DrawString有可能是某些函数没有正确调用，测试中并没有看到正确的汉字文本输出到窗口。

2.绘制中文

我们使用Xft库来完成汉字文本的绘制。代码如下：

#include <X11/Xft/Xft.h>

void DoPaint(Display *display, Window window) {
    char drawText[] = "Draw Text...";
    char utf8String[] = "汉字文本...";
    int screen = DefaultScreen(display);
    XftColor    xftColor;
    xftColor.color.alpha=0xffff;
    xftColor.color.red = 0;
    xftColor.color.green = 0;
    xftColor.color.blue = 0;
    XftFont *font = XftFontOpenName(display, screen, "文泉驿微米黑-20");
    XftDraw *xftDraw = XftDrawCreate(display,window,DefaultVisual(display,screen),DefaultColormap(display,screen));
    XftDrawStringUtf8(xftDraw,&xftColor,font,30,50,reinterpret_cast<const FcChar8*>(drawText),strlen(drawText));
    XftDrawStringUtf8(xftDraw,&xftColor,font,30,120,reinterpret_cast<const FcChar8*>(utf8String),strlen(utf8String));
    XftFontClose(display,font);    
    XftDrawDestroy(xftDraw);
}

想要编译运行以上程序，我们需要系统中安装了Xft的开发库。在ubuntu系统下可以使用如下命令安装Xft开发库。

sudo apt install libxft-dev

在编译代码的时候我们还需要链接上Xft的的动态库，否则会提示XftDrawStringUtf8等函数实现找不到。

g++ xxx.cpp -lX11 -lXft

以上代码编译运行后，界面显示如下：

在这里插入图片描述

使用Xft库我们可以达到很好文本渲染效果，如我们绘制一个红色透明度为50%的文本，代码如下

void DoPaint(Display *display, Window window) {
    char drawText[] = "Draw Text...";
    char utf8String[] = "汉字文本...";
    int screen = DefaultScreen(display);
    XftColor    xftColor;
    xftColor.color.alpha=0x8000;
    xftColor.color.red = 0xffff;
    xftColor.color.green = 0;
    xftColor.color.blue = 0;
    XftFont *font = XftFontOpenName(display, screen, "文泉驿微米黑-20");
    XftDraw *xftDraw = XftDrawCreate(display,window,DefaultVisual(display,screen),DefaultColormap(display,screen));
    XftDrawStringUtf8(xftDraw,&xftColor,font,30,50,reinterpret_cast<const FcChar8*>(drawText),strlen(drawText));
    XftDrawStringUtf8(xftDraw,&xftColor,font,30,120,reinterpret_cast<const FcChar8*>(utf8String),strlen(utf8String));
    XftFontClose(display,font);
    XftDrawDestroy(xftDraw);
}

以上代码我们对XftColor结构体字段进行了设置，在XftColor结构体，每个字段的取值并不是我们使用32位argb表示时每个分量取值范围在[0-255]之间，在XftColor中alpha、red、green、blue都被unsigned short，每个分量的取值范围为[0,65535]。上面的程序我们希望文字透明度为50%，所以设置alpha分量为0x8000，文字的颜色为0xffff(十进制的65535)。如果我们需要将取值范围[0,255]的分量，转换为XftColor分量可以使用如下公式：value*1.0/255.0*65535

编译以上代码，运行结果如下：

在这里插入图片描述

3.绘制点、线、矩形、弧形

绘制点

使用XDrawPoint向窗口中绘制一个点。

void DoPaint(Display *display, Window window){
    GC gc = XCreateGC(display,window,0,nullptr);
    XSetForeground(display,gc,0xff0000);
    XDrawPoint(display,window,gc,15,15);
    XFreeGC(display,gc);
}

以上程序在窗口的(15,15)坐标处绘制一个红色小点。由于一个像素显示不是很清晰，这里不再截图。

绘制线

Xlib中可以使用XDrawLine或是XDrawLines来绘制线段。XDrawLine示例程序如下：

void DoPaint(Display *display, Window window){
    GC gc = XCreateGC(display,window,0,nullptr);
    XSetForeground(display,gc,0xff0000);
    XDrawLine(display,window,gc,15,15,30,30);
    XFreeGC(display,gc);
}

以上程序将屏幕的坐标(15,15)作为起点，(30,30)作为终点绘制一条红色线段。

可以使用XSetLineAttributes来改变线条的样式，示例程序如下

void DoPaint(Display *display, Window window){
    GC gc = XCreateGC(display,window,0,nullptr);
    XSetForeground(display,gc,0xff0000);
    XSetLineAttributes(display,gc,5,LineOnOffDash,CapButt, JoinMiter);
    XDrawLine(display,window,gc,15,15,30,30);
    XFreeGC(display,gc);
}

以上程序绘制了一条线条宽度为5像素，线条样式为虚线的线段。运行结果如下

在这里插入图片描述

使用XDrawLines可以一次性的画多条线段。这此我们仅简单展示linux操作系统下可以在窗口中做哪些事情，并不准备详细讲解每个函数和参数的意义。关于xlib相关开发资料极少，后续将搜集到的xlib api函数讲解以及相关的开发示例文档上传至互联网中，以便于后续查询需要。

绘制矩形

使用XDrawRectangle绘制矩形，示例程序如下

void DoPaint(Display *display, Window window){
    GC gc = XCreateGC(display,window,0,nullptr);
    XSetForeground(display,gc,0xff0000);
    XSetLineAttributes(display,gc,5,LineSolid,CapButt, JoinMiter);
    XDrawRectangle(display,window,gc,30,30,80,60);
    XFreeGC(display,gc);
}

以上程序绘制了一个起点为30,30，宽度为80，高度为60，线条宽度为5像素，线条样式为实线的矩形。以上程序运行结果如下：

在这里插入图片描述

绘制弧形

使用XDrawArc绘制一个弧形，示例代码如下：

void DoPaint(Display *display, Window window){
    GC gc = XCreateGC(display,window,0,nullptr);
    XSetForeground(display,gc,0xff0000);
    XSetLineAttributes(display,gc,5,LineSolid,CapButt, JoinMiter);
    XDrawArc(display,window,gc,100,100,50,50,0*64,180*64);
    XFreeGC(display,gc);
}

XDrawArc函数原型如下：

extern int XDrawArc(
    Display*        /* display */,
    Drawable        /* d */,
    GC            /* gc */,
    int            /* x */,
    int            /* y */,
    unsigned int    /* width */,
    unsigned int    /* height */,
    int            /* angle1 */,
    int            /* angle2 */
);

使用XDrawArc，设置的(x,y)并不是弧形的起点或是中心点坐标，而是弧形的左上角坐标，如下图所示,我使用XDrawArc绘制一个半圆，这个传入的(x,y)是下图所示矩形左上角坐标。angle1，和angle2是弧线起始的角度和偏移量，并且角度值需要乘以64。比如我想要在笛卡尔坐标系下第二象限的四分之一圆，我们从y轴的正方向画向x轴负方向，这样给angle1传入的参数就是90*64，从y轴正方向到x轴负方向经过了90度，所以angle2也是传入90*64。

在这里插入图片描述

编译运行以上程序，窗口显示如下

在这里插入图片描述

4.填充区域

我们可以使用XFillRectangle或XFillArc来填充一个矩形或是弧形区域。这里的XFillRectangle、XFillArc的参数与XDrawRectangle、XDrawArc相应的参数意义一致。唯一的不同是Draw是绘制图形，Fill是向图形中填充颜色。以下是示例程序

void DoPaint(Display *display, Window window){
    GC gc = XCreateGC(display,window,0,nullptr);
    XSetForeground(display,gc,0xff0000);
    XFillArc(display,window,gc,100,100,50,50,0*64,180*64);
    XSetForeground(display,gc,0x00ff00);
    XFillRectangle(display,window,gc,200,200,100,80);
    XFreeGC(display,gc);
}

编译以上程序，运行结果如下
在这里插入图片描述

xlib编程手册
09-10
xlib编程手册
Xlib 编程手册
08-07
非常全面的Xlib学习学习手册。
XLib编程手册 ---- 简介
Linux应用程序开发的博客
05-03 7942
Xlib - C语言的X接口是一个参考指南，以低层C语言接口的X窗口系统协议。它既不是编写X Window系统的教程，也不是用户指南。相反，它提供了库中每个函数的详细描述以及相关背景信息的讨论。Xlib - C语言X Interface假定对图形窗口系统和C编程语言有基本的了解。其他高级抽象(例如，由工具包为X提供的抽象)构建在Xlib库之上。有关这些高级库的更多信息，请参阅适当的工具包文档。X ...
linux xlib函数手册,Xlib 编程手册之颜色
weixin_40009099的博客
05-07 1064
第七章 颜色这一章说明如何在程序中使用颜色。在 X中颜色的处理可能比在其它系统更加复杂，因为需要针对许多不同类型显示(display)的可移植性。颜色处理中的一些先进的主题在 X标准中规定的仍然比较差。这一章从每个人都应该读的基础开始，并且逐渐地转移到更先进的主题，包括R5的设备无关的颜色。从最新的部分中适当地摘录和选择了一些。典型的 X应用程序允许用户指定窗口的背景和边框，指定光标的颜色，以及...
Xlib 基础概念
河 的 第 三 条 岸
06-29 2430
1.1 一个Display 包含了一个或者多个Screen， 是一个集合了键盘，鼠标和一个或多个Screen 的工作站。 1.2  X协议（X protocol）是X 客户程序和服务器进行通信的一套协定，X 协议支持网络，能在本地系统中和网络实现这个协议，支持的网络协议有TCP/IP， DECnet等。 1.3  XServer 是控制每个Display 的程序，一个XServer
Xlib
linuxheik的专栏
06-13 8078
Xlib 维基百科，自由的百科全书 汉漢▼ Xlib 是一种 X Window System 协定的用户端，以C语言撰写。其功能是与 X server 沟通. 这样的功能可以让程式人员撰写程式时, 毋须了解其协定的细节。但甚少应用程式会直接使用 Xlib; 通常是透过其他的函式库来呼叫 Xlib 用以提供部件工具箱（widget toolkit
xlib编程-一个简单的xlib程序
道路与梦想
08-09 3966
/* * Simple Xlib application drawing a box in a window. */ #include #include #include int main() {         struct _XDisplay *d;
Linux Xlib.h函数库
最新发布
10-12
引用[1]描述“三、xlib窗口图元”、“四、xlib区域”，这表明库可用于创建自定义控件（如按钮或编辑框），通过组合图元实现复杂UI[^1]。数学上，坐标系统基于笛卡尔坐标系，像素位置可表示为 $(x, y)$。 - **输入...
【OpenGL在Python中的应用】创建窗口与渲染上下文的管理
[【OpenGL在Python中的应用】创建窗口与渲染上下文的管理](https://opengraph.githubassets.com/c12f755e355fb90c52d70af1037b61a83d9dc88efe8d47608fac34887988fed6/OpenGL-Graphics/glfw-window) # 1. OpenGL和...
精选资源
Linux下X-Window系统程序设计简介.pdf
09-07
Xlib提供了一些用于绘制点、线、矩形、多边形、正文、图象等的子程序，这些子程序一般称为图元（graphics primitive）。但是，一个给定的图元并不包含要绘制一定图形所需要的所有信息，许多适用于每一图元的信息（如...
OpenGL GLUT资源包包含开发所需DLL与头文件
所谓“窗口类库”，指的是它封装了操作系统级别的窗口创建与管理API（例如在Windows上使用Win32 API，在X11系统上使用Xlib），通过统一的C语言接口暴露给OpenGL程序员。开发者无需直接调用复杂的系统API即可创建一个...
在linux平台将 QPainter 对象转换为 Windows 平台的设备上下文句柄 HDC的方法
06-03
请注意，这种方法需要使用 X11 窗口系统和 Xlib 库，只适用于在 Linux 平台上绘制增强型图元文件，并将其绘制到 Windows 平台的设备上下文中。如果您的应用程序需要在多个平台上运行并绘制矢量图形，建议使用跨平台...
Xlib - C Language X Interface
程永强
02-25 1325
Xlib - C Language X Interface 1. Xlib - C Language X Interface The X Window System is a network-transparent window system that was designed at MIT. X Window System 是由 MIT 设计的透明网络窗口系统。 transparent [trænsˈpærənt]：adj. 透明的，显然的，坦率的，易懂的 monochrome [ˈmɒnəkrəʊm]：
xlib todo
anjuenz87013的博客
04-17 180
todo 转载于:https://www.cnblogs.com/soul-stone/p/10721531.html
xlib入门
安泰
09-01 1466
一些基本概念， 例子：Introduction to  the x11 library 较上一个有更详细的解释， 这两个可以结合起来读Basic Programming with the X11 library待续。。。from ubuntu forum The XLib reference manual: The XLib manuals live in the "libx11-dev" p
linux xlib函数手册,Xlib 学习笔记
weixin_33400388的博客
05-07 1551
Xlib学习笔记第一章1.2 X Window System概念display:由键盘，鼠标和一个或多个屏幕组成的一个工作站screen：一个display可以有多个screenserver-client模型：窗口管理器事件X扩展第二章 X概念x协议：请求消息回复消息：需要回复的请求比较浪费资源，需要等待网络传输事件：错误：缓冲：xlib会保存请求来使客户端持续运行不至于等待网络传输。引起发送缓...
xlib笔记
多弗朗强哥的博客
07-16 676
无论是xlib还是qt，焦点都是窗口的属性之一，切换焦点意味着设置当前窗口焦点为false，设置新窗口焦点为true。事件是用于处理客户端和服务器之间的通信的。键盘事件、鼠标事件、窗口状态变更事件、窗口属性、剪切板，selection。
xlib图形界面
u012592081的专栏
06-30 4303
xlib又叫C11是linux底层的图形界面，当然一般也不会用到，大部分我们都用gtk等等。 xlib的资料也不多，刚好在公司时老大叫我去写xlib没办法只能硬着头皮去看东西。不过发现其实也不是那么难。 这里有点个人感觉不错的资料提供给大家参考，提醒一下，目前xlib属于比较老了，很多linux也开始使用wayland做底层了，gtk已经支持wayland。 wayland资料 htt
Xlib 学习笔记
Alex Xu's blog
01-27 2437
<br /> <!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } --> <br /><br /><br />第一章<br />1.2 X Window System概念<br />display: 由键盘，鼠标和一个或多个屏幕组成的一个工作站<br />screen：一个display可以有多个screen<br /><br />server-client模型：<br />窗口管理器<br />事件<br
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值