Cairo 与 skia 与 GDI与 Quartz与 ragg 这些都是图形渲染引擎吗,在渲染管线中的位置是什么

最后发布时间:2026-03-10 09:50:39 浏览量:

是的,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

二、这些库在管线中的位置

系统类型在渲染管线中的位置
Cairo2D矢量图形库Rasterization 层
Skia2D图形引擎Rasterization + GPU backend
GDIWindows 图形 APIOS 图形 API
QuartzmacOS 图形系统OS 渲染系统
raggR 语言图形设备使用 AGG 进行 rasterization

可以理解为:

应用
 │
 │ (调用 API)
 ▼
Cairo / Skia / GDI / Quartz
 │
 │ (光栅化)
 ▼
Pixel Buffer
 │
 ▼
Window System
 │
 ▼
Display

三、逐个解释

1 Cairo

官网:
Cairo Graphics

类型

矢量图形库

功能

  • 路径绘制
  • Bézier curve
  • text rendering
  • anti-aliasing
  • compositing

支持 backend:

image
PDF
SVG
X11
Win32
Quartz

渲染流程

vector path
   ↓
scanline rasterization
   ↓
pixel buffer

使用它的软件:

  • GTK
  • Firefox (旧版本)
  • Inkscape

2 Skia

Skia

Google 的 高性能 2D 图形引擎

特点:

  • CPU rasterizer
  • GPU backend

支持 GPU:

OpenGL
Vulkan
Metal
Direct3D

渲染管线

drawPath
   ↓
Skia display list
   ↓
CPU raster OR GPU shader
   ↓
framebuffer

使用它的软件:

  • Chrome
  • Flutter
  • Android UI

3 GDI

Microsoft Windows GDI

Windows 的经典图形 API。

层级:

应用
 ↓
GDI
 ↓
Windows driver
 ↓
display

特点:

  • OS级 API
  • 很多实现是 CPU rasterization
  • Windows 95 时代设计

后来被

GDI+
Direct2D

逐渐替代。


4 Quartz

Quartz

macOS 的图形系统。

核心组件:

Quartz 2D
Core Graphics
Core Animation

结构:

App
 ↓
Quartz API
 ↓
PDF-based imaging model
 ↓
GPU compositor
 ↓
Display

特点:

  • PDF imaging model
  • 高质量 text rendering
  • Retina support

5 ragg

ragg

R 语言图形设备。

底层:

AGG (Anti-Grain Geometry)

AGG 是一个 高质量 CPU rasterizer

结构:

R plot
 ↓
ragg
 ↓
AGG rasterizer
 ↓
PNG/TIFF buffer

特点:

  • 高质量 anti-alias
  • 很适合统计图
  • ggplot2 推荐

四、它们的层级差异

一个关键区别:

系统层级
GDIOS API
QuartzOS graphics stack
Skia图形引擎
Cairo图形引擎
ragg语言绑定

图示:

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


六、CPU Rasterizer vs GPU Renderer

系统CPUGPU
Cairo部分
Skia
GDI
Quartz
ragg

七、现代 UI 渲染架构

以 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 框架架构完全不同。