cairo填充_cairo图形库

简介

提到cairo，估计很少知道这还是一个图形库的名字(http://cairographics.org)，Linux的两大流行桌面环境KDE和Gnome，其对应的基础组件QT和GTK+，相对于框架性质的QT，GTK+依然保持着自由与开放的传统，从底层绘图到上层程序库都由其他开源库构成。cairo就是GTK+采用的底层图形库，负责构建图形界面。cairo是一款开源的2d矢量图形库，支持多种后端输出，用c语言编写而且模块化设计得很出色。这篇博客介绍一份cairo的windows移植和定制(Visual Studio 编译)，及跟windows的全新图形子系统DXGI对接，通过DXGI来显示cairo产生的图像帧，即基于cairo的不依赖操作系统GUI、不依赖于应用程序框架的图形库。主要内容是介绍、分析、演示

cairo 图形库

cairo能够做各种复杂的点线图案、填充、文字渲染、图像变换、剪切、层混合等等操作。但是他没有涉及到用户交互，用户输入如鼠标、touch、事件处理，交互窗口，这些统统没有，他只有专一的绘图。他有surface可以理解为画布，这个surface可以是基于内存(必选的surface)也可以基于某种backend(和操作系统或驱动接口对接)，使用过程是创建一个surface，然后在surface里做各种绘图，最后使用Painting类的functions时图像就显示在了surface上。当然surface也是一块image，可以吧image通过png(源码有对接libpng库)图像压缩输出png文件，本文的最后的绘图像演示就是使用cairo输出png文件，不是屏幕截图(上传图片后图像质量可能会降低)

下面是cairo移到Visual Studio的一些技术要点

在cairo/src创建cairo-features.h，描述cairo的功能模块。cairo的图像将通过DXGI显示，IMAGE、FT(FreeType)是必须，其余可选，如下图

创建cairo的VS Win32 DLL空项目，参考src\Makefile.sources里的代码文件列表和组织结构。另外还有依赖库pixman、zlib、libpng、freetype，如下图

编译生成DLL，VS编译cairo会有一千多条警告，如下图，基本上是level 3、level 4级别的warning。对于一款成熟稳健的开源库来讲，修改大量的level3 warning就没必要了，即使移除这些warning，后续的版本跟进，新版本代码同步将是个问题。

Windows 图形接口

下面两张图摘自微软官方文档，1是windows xp图形系统接口，2是vista及其之后windows的。从vista开始，微软设计了全新的显示驱动模型，调整了图形系统架构，可以提供更好的图像质量，可以为界面提供硬件加速。参考文档：https://msdn.microsoft.com/en-us/library/ee417756(v=vs.85).aspx 。

下图是DXGI(DirectX Graphics Infrastructure)，是从vista开始的一个新的子系统。DXGI用于处理一些底层任务如枚举硬件设备，创建缓存交互链(swap-chain)，呈现渲染好的图像帧到输出设备等，程序可以直接访问DXGI。参考文档：https://msdn.microsoft.com/en-us/library/bb205075(v=vs.85).aspx

cairo创建image surface其像素格式一般用CAIRO_FORMAT_RGB24是32位，对应的DXGI像素格式DXGI_FORMAT_B8G8R8A8_UNORM。desc.OutputWindow即是关联的输出窗口。cairo绘图完毕后调用cairo_image_surface_get_data 得到图像数据写入DXGI * @CAIRO_FORMAT_RGB24: each pixel is a 32-bit quantity, with * the upper 8 bits unused. Red, Green, and Blue are stored * in the remaining 24 bits in that order. (Since 1.0) surface = cairo_image_surface_create(cairo_format_t::CAIRO_FORMAT_RGB24, width, height); //一些绘图操作... cairo_image_surface_get_data(surface); //DXGI 对接 DXGI_SWAP_CHAIN_DESC desc; desc.BufferDesc.Format = DXGI_FORMAT_B8G8R8A8_UNORM; desc.OutputWindow = hWnd; desc.Windowed = TRUE;

此部分coding文档请参阅读Microsoft官方的Programming Guide还有Reference，文档位于MSDN章节Desktop app technologies-----> Graphics and Gaming-----> Direct 2D / Direct 3D / DirectX Graphics Articles。

图像演示

线及其端点(支持反走样抗锯齿)

程序精准控制下产生的一组贝塞尔曲线

填充

文本

图像层，蒙板和剪切

混合，2个层之间使用不同的混合算法的效果

变换

knight.mobile@outlook.com