是的,Cairo、Skia、GDI、Quartz、ragg 本质上都属于 2D 图形渲染系统 / 图形库(graphics rendering library / rasterization engine)。但它们所处的层级和职责略有不同。如果放到完整的**图形渲染管线(graphics rendering pipeline)**里看,会更清晰。
典型的软件渲染 / UI 渲染管线:
应用程序 │ │ (绘图API) ▼ 图形库 / 渲染引擎 │ │ (Rasterization) ▼ 像素缓冲区 / GPU │ ▼ 窗口系统 / 合成器 │ ▼ 显示设备
更细一点:
应用层 │ │ drawLine(), drawText() ▼ 图形 API / 绘图库 │ │ 矢量解析 ▼ Rasterizer (光栅化) │ │ 生成像素 ▼ Framebuffer │ ▼ Window compositor │ ▼ Display
可以理解为:
应用 │ │ (调用 API) ▼ Cairo / Skia / GDI / Quartz │ │ (光栅化) ▼ Pixel Buffer │ ▼ Window System │ ▼ Display
官网:Cairo Graphics
类型
矢量图形库
功能
支持 backend:
image PDF SVG X11 Win32 Quartz
渲染流程
vector path ↓ scanline rasterization ↓ pixel buffer
使用它的软件:
Skia
Google 的 高性能 2D 图形引擎。
特点:
支持 GPU:
OpenGL Vulkan Metal Direct3D
渲染管线
drawPath ↓ Skia display list ↓ CPU raster OR GPU shader ↓ framebuffer
Microsoft Windows GDI
Windows 的经典图形 API。
层级:
应用 ↓ GDI ↓ Windows driver ↓ display
后来被
GDI+ Direct2D
逐渐替代。
Quartz
macOS 的图形系统。
核心组件:
Quartz 2D Core Graphics Core Animation
结构:
App ↓ Quartz API ↓ PDF-based imaging model ↓ GPU compositor ↓ Display
ragg
R 语言图形设备。
底层:
AGG (Anti-Grain Geometry)
AGG 是一个 高质量 CPU rasterizer。
R plot ↓ ragg ↓ AGG rasterizer ↓ PNG/TIFF buffer
一个关键区别:
图示:
Application │ ├─ R → ragg │ ├─ App → Cairo │ ├─ Chrome → Skia │ ├─ Windows App → GDI │ └─ macOS App → Quartz
标准渲染 pipeline:
Scene description ↓ Vector geometry ↓ Tessellation ↓ Rasterization ← 这些库主要在这里 ↓ Pixel buffer ↓ Compositing ↓ Display
它们主要负责:
Vector → Pixel
也就是
Rasterizer
以 Chrome 为例:
HTML/CSS ↓ Layout ↓ Paint ↓ Skia ↓ GPU raster ↓ Compositor ↓ Display
Flutter:
Widget ↓ Layer tree ↓ Skia ↓ GPU ↓ Display
这些库本质上都是
Vector → Pixel 的光栅化引擎(Rasterization Engine)
在图形渲染管线中的位置是:
绘图 API ↓ 矢量解析 ↓ Rasterization ← Cairo / Skia / ragg ↓ Framebuffer ↓ Window System ↓ Display
如果你感兴趣,我可以再深入讲一个非常关键但很多人不知道的区别:
Immediate Mode Rendering vs Retained Mode Rendering
它决定了:
Cairo / Skia / Canvas vs Flutter / Qt / React Native
UI 框架架构完全不同。
Github开源生信云平台 DEMO