WhatsCanvas - 介于 NanoVG 和 Skia 之间C17 可嵌入式 2D 渲染库原创整理 | 关键词WhatsCanvas、C17、2D 渲染、跨平台、Canvas、NanoVG、Skia前言做原生应用的童鞋应该都遇到过这样的纠结用NanoVG吧API 简单、几十行就能画东西但多语言文本、滤镜、图层这些能力基本得自己补用Skia吧功能强大到什么都有但体积大、构建复杂、学习成本高很多项目根本用不到它 90% 的能力用 Qt/SDL 之类的框架自带的绘制能力吧又被框架绑死了想单独抽出来做离屏渲染、做服务端图片生成都不方便。WhatsCanvas就是冲着这个空档去的一个用 C17 编写的、面向原生应用的可嵌入式 2D 渲染库。它提供类似 HTML Canvas 的Canvas/Paint/PathAPI把多语言文本、图层滤镜、图片渲染、离屏渲染、像素回读这些中间地带的能力补齐了同时不接管你的窗口、布局、事件循环也不内置任何控件。一句话定位比 NanoVG 多得多比 Skia 轻得多源码可读、可验证、可裁剪。GitHubhttps://github.com/ClarkWain/WhatsCanvas在线文档https://clarkwain.github.io/WhatsCanvas/当前版本0.2.0pre-1.0许可证MIT目录WhatsCanvas 是什么60 秒画出第一帧获取与集成三种姿势多后端架构一个 API五种后端能力全景文本渲染这是重头戏性能数据附审计方法工程质量不只是能画像素选型建议什么时候用它什么时候别用总结一、WhatsCanvas 是什么WhatsCanvas 是一个可嵌入式的 2D 渲染库可嵌入式意味着它是你应用里的一个库而不是一个框架公开 API 很小就 16 个头文件约 74 KiB入口是#include wsc/wsc.h后端按 target 分离链接你只用 CPU 渲染就只链WhatsCanvas::SoftwareGPU 渲染链WhatsCanvas::OpenGL它不管你的窗口创建、事件循环、控件、布局和无障碍这些交给宿主应用它也不是HTML Canvas 的源码兼容实现只是 API 风格相似。你关心的事项当前答案适用场景原生应用自定义 UI、工具/数据界面、HUD、2D 游戏渲染层、服务端离屏出图、测试环境语言C17渲染后端Software纯 CPU、OpenGL 3.3 Core、OpenGL ES 3.0可选、Vulkan可选、MetalmacOS/iOS平台Windows / Linux / macOS 持续 CI发布包覆盖 win64、linux x64、macOS universal文本能力字体发现与 fallback、CJK/RTL、UAX #9 双向文本、换行省略、glyph atlas、COLR/CPAL v0接入方式find_package、add_subdirectory、源码生成本地安装目录许可证MIT需要完整 UI 框架的可以看它的下游项目 WhatsUI——基于 WhatsCanvas 的 C17 保留模式 UI 库带 Fluent 2 设计系统、控件、布局和输入处理。二、60 秒画出第一帧Software 后端不需要窗口、不需要 GL 上下文、不需要 GPU是验证 API 最快的方式。整个例子#includewsc/wsc.hintmain(){autocanvaswsc::Canvas::create(wsc::Canvas::Backend::Software,256,256);if(!canvas||!canvas-initializeContext()){return1;}canvas-beginFrame();wsc::Paint fill;fill.setColor(wsc::Color(40,120,240,255));fill.setAntiAlias(true);canvas-drawRoundRect(wsc::RectF(40,40,176,176),24.0f,fill);canvas-endFrame();returncanvas-savePixelsPPM(first.ppm)?0:1;}画一个蓝色圆角矩形savePixelsPPM直接落盘一张 PPM。程序在当前目录生成first.ppm用图片查看器打开或转成 PNG 就行。这段代码不是随手写的它以独立 CMake 项目的形式收在仓库的examples/hello_world/里开 demo 构建时会跟着主工程一起编译——README 里贴的代码保证能跑这是很多库做不到的。三、获取与集成三种姿势1. 预编译包GitHub Releases 提供whatscanvas-platform-release-version.zip如whatscanvas-win64-release-0.2.0.zip目录结构include/wsc/ 公开头文件 lib/ 渲染库 bin/ shared 构建的运行时库 lib/cmake/WhatsCanvas/ find_package 配置三个平台的包配置不完全一样选型前注意发布资产交付形式和 target字体/Vulkan 配置Windows x64sharedOpenGL / OpenGL ES / SoftwareFreeType、HarfBuzz 开启Vulkan 选项开启Linux x64staticOpenGL / SoftwareFreeType、HarfBuzz 开启Vulkan 关闭macOS universalstaticOpenGL / SoftwareFreeType、HarfBuzz 开启Vulkan 关闭2. CMake find_packagecmake_minimum_required(VERSION 3.16) project(MyApp LANGUAGES CXX) set(CMAKE_CXX_STANDARD 17) find_package(WhatsCanvas 0.2.0 CONFIG REQUIRED) add_executable(MyApp main.cpp) target_link_libraries(MyApp PRIVATE WhatsCanvas::Software)3. 源码 add_subdirectory / 从源码构建set(WHATSCANVAS_BUILD_OPENGL ON CACHE BOOL ) set(WHATSCANVAS_BUILD_SOFTWARE ON CACHE BOOL ) set(WHATSCANVAS_BUILD_DEMO OFF CACHE BOOL ) add_subdirectory(third_party/WhatsCanvas) target_link_libraries(MyApp PRIVATE WhatsCanvas::OpenGL)源码构建要求 CMake 3.16、C17 编译器、完整 Git submodule。仓库根目录提供了build.batWindows/VS 2022和build.shmacOS/Linux一键脚本加--package参数还能生成适配find_package的 Release 目录。小提醒Windows 官方包是 shared 构建运行前把包内bin加进 PATH或者把 DLL 复制到 exe 旁边。四、多后端架构一个 API五种后端这是 WhatsCanvas 设计上比较有意思的地方统一 API 多后端 运行时 fallback。后端CMake target默认状态特点SoftwareWhatsCanvas::Software开启纯 CPU 确定性参考实现适合 headless、测试、截图、兜底OpenGL 3.3 CoreWhatsCanvas::OpenGL开启桌面主 GL 路径应用自己建上下文OpenGL ES 3.0WhatsCanvas::OpenGLES关闭独立 target移动平台用Vulkan编入::OpenGL关闭-DWHATSCANVAS_ENABLE_VULKANON启用Win32 支持窗口呈现MetalApple 平台编入::OpenGLApple 默认开启离屏 MTLTexture互操作 CAMetalLayer呈现所有后端都通过Canvas::create(Backend, width, height)创建失败返回nullptr所以写 fallback 链特别自然usingBackendwsc::Canvas::Backend;autocanvaswsc::Canvas::create({Backend::Vulkan,Backend::Metal,Backend::OpenGL,Backend::Software},width,height);if(!canvas){return1;// 所有后端都失败优雅退出}一个 Vulkan、一个 Metal、一个 OpenGL、一个 Software按优先级传进去哪个能起来用哪个。对要尽量用上 GPU、但不许因为没 GPU 而崩的应用来说这个模式很实用。架构上它分了七层公开 API → 命令记录display list→ 后端无关的图形模型 → 文本层 → 渲染抽象IRenderer→ 后端实现 → 平台层。文本走ITextBackend抽象字体发现和 shaping 可插拔不是写死在 canvas 核心里的。仓库doc/architecture/下有完整的 ADR 记录想抠源码的同学可以顺着读。五、能力全景领域主要能力代表 API几何与路径点/线/矩形/圆角矩形/圆/椭圆/圆弧/曲线路径、fill/stroke 命中测试、虚线、路径效果drawPath、hitTestPathFillPaint填充/描边、解析式抗锯齿、线性/径向多 stop 渐变、14 种混合模式、真高斯阴影、颜色矩阵Paint、setBlendMode、setShadowLayerCanvas 状态save/restore、矩阵变换、矩形/抗锯齿路径裁剪、离屏层、quick rejectclipPath、saveLayer图片PNG/JPEG 解码、raw RGBA、外部纹理、九宫格、圆角/圆形裁剪、contain/cover、平铺Image、drawImageFit图层滤镜内容/背景模糊、内阴影、毛玻璃、饱和度/亮度/对比度/颗粒、颜色矩阵、滤镜链ImageFilter、ImageFilterChain文字系统字体、fallback、CJK/RTL、换行/省略号、描边/阴影/渐变文本、text-on-pathFontManager、drawTextBox、drawTextOnPath输出与互操作离屏图片、GL framebuffer、外部 Vulkan image/Metal texture、同步/异步 RGBA 回读OutputTarget、readPixelsRGBAAsync诊断像素 hash、PPM 导出、render stats、资源与 atlas 统计computePixelsHashRGBA、RenderStats几个值得单独说的点毛玻璃/内阴影/滤镜链ImageFilterChain支持 blur → 颜色矩阵 → offset 这种链式组合做现代 UI 效果半透明面板、backdrop blur不用自己写 shader真高斯阴影不是画个模糊的矩形那种假阴影是setShadowLayer走的真高斯模型文档里有完整的 shadow model 说明外部纹理互操作wrapExternalTexture可以把你自己的 GL texture / Vulkan image / Metal texture 包进来画方便和已有渲染管线共存异步像素回读readPixelsRGBAAsync适合做截屏、离屏出图这类场景不阻塞渲染线程。仓库里的效果图滤镜展示、文本展示都是 OpenGL 后端直接从 framebuffer 回读的 1920×1080 实图不是设计稿截图。六、文本渲染这是重头戏NanoVG 这类库的文本基本是英文够用而 WhatsCanvas 的文本管线是按生产级做的UTF-8 布局、UAX #29 扩展字素簇、按簇安全换行CJK 无空格换行、换行与省略号UAX #9 双向文本Unicode 17.0.0——RTL 语言阿拉伯语、希伯来语等方向与顺序处理已归档的一致性测试跑了861,948 例全部通过0 跳过 0 失败字体发现与 fallbackWindows DirectWrite可选 adapter、macOS/iOS CoreText、Linux fontconfig 三平台系统字体枚举带缓存刷新 API阿拉伯文、印度语系这类需要复杂字形替换/重排的文字走HarfBuzz OpenType shapingGL 家族 target 默认开启栅格化默认走FreeTypeglyph 查找、metrics、kerning、栅格化不可用时回退stb_truetypeglyph atlas 构建、COLR/CPAL v0 彩色字体支持CBDT/CBLC、SBIX、SVG、COLR v1 在路线图上。两个默认开关构建时WHATSCANVAS_ENABLE_FREETYPE_RASTERIZERON默认开WHATSCANVAS_ENABLE_OPENTYPE_SHAPINGON默认开注意一个坑关掉 shaping 或缺依赖时排版会退化到 simple shaping kerning阿拉伯语这类文字会出问题不能当成等价替代。发布前用你自己的字体和文案跑一遍像素回归仓库提供了scripts/text_pixel_regression.*脚本。七、性能数据附审计方法仓库里归档了一组画质对齐的基准矩阵Windows、Core i7-8700、GTX 1060、1920×1080、Release、OpenGL 3.3对比对象是 NanoVG GL3commit 固定为ce3bf74场景矩阵范围归档结果抗锯齿几何256–4,096 个图形静态/动态数据/动态结构8 项领先、1 项持平最大帧时间下降 26.7%图片64–1,024 张最多 32 纹理圆角与状态变化9/9 领先最大帧时间下降 58.5%动态文字64–1,024 次绘制文本/字号/状态变化9/9 领先最大帧时间下降 32.0%总计26 项领先、0 项落后、1 项持平27 项像素质量验证全部通过。我比较欣赏它审计的严谨度每进程预热 5 帧、测量 30 帧每个 cell 用 2 个 ABBA block 抵消漂移每端 4 个新进程10,000 次 bootstrap 出置信区间逐帧 JSONL 明细、像素残差全部留在仓库里可复现。同时它明确写了别外推——这些数据只代表这台机器、这套驱动、这个后端你在自己的 GPU 和工作负载上要复测。这种敢给数据但不吹的姿态在库的介绍文章里不多见。另外 Apple 平台也有数据M3 Pro 上 256×256、128 矩形 × 200 帧的场景Metal 1.66 ms/帧 vs OpenGL 2.45 ms/帧。八、工程质量不只是能画像素选 pre-1.0 的库工程验证体系比功能表更重要。WhatsCanvas 仓库里这一套是完整的三平台 CIWindowsMSVC、LinuxGCC Mesa/Xvfb、macOS 持续跑构建和单元测试OpenGL ES、Vulkan、Metal 各有独立的构建/像素门禁像素回归Software 后端 golden image 基线确定性参考OpenGL/GLES/Vulkan/Metal 滤镜结果跨后端对齐严格 hash 回归 模糊 PPM 回归两档集成验证package consumer 测试模拟真实下游用发布包构建、示例构建检查、API reference 文档时效性检查、版本一致性检查诊断设施像素 hash、PPM 导出、render stats、资源/atlas 统计、确定性首帧时序文档API Reference、API Stability明确 0.x 阶段哪些承诺、哪些不承诺、Feature Matrix滤镜/文本/输出目标各自的支持矩阵、Troubleshooting。已知风险它自己也写清楚了这里替大家划个重点版本仍是0.2.x升级前读 CHANGELOG 跑 package consumer 测试Vulkan 是 opt-in跨平台窗口呈现还在完善中iOS 真机/模拟器 CI 和仓库内 iOS 示例还没补齐移动端集成前要自己验证Canvas单实例不承诺并发访问跨线程共享图片/字体/外部纹理没有公开约定GPU 实时渲染受驱动影响确定性基线请用 SoftwareGPU 回归用容差比较。九、选型建议什么时候用它什么时候别用推荐用它原生应用里要自定义 UI、工具/数据界面、HUD、2D 游戏渲染层服务端/测试环境需要 CPU 离屏出图Software 后端无 GPU 依赖需要多语言文本CJK、RTL、复杂脚本 shaping 常见 UI 效果毛玻璃、阴影、渐变的组合你看重截图确定性、像素级回归、源码可读性愿意自己管窗口和事件。建议另寻方案强依赖现成 UI 控件体系 → 直接用 WhatsUI、Qt、WinUI 之类要在浏览器里跑 → 等它的 WebAssembly/WebGL 2 / WebGPU 计划尚未实现需要严格色彩管理、PDF/文档生成、复杂富文本编辑 → 不在当前支持范围需要一个 ABI 长期稳定的 1.0 成熟库 → 它还是 pre-1.0按官方建议评估升级风险。十、总结WhatsCanvas 的价值不在于又造了一个画 2D 的轮子而在于它把NanoVG 和 Skia 之间那段没人好好做的中间地带填上了统一的Canvas/Paint/PathAPI一个 API 跑五个后端fallback 链一行代码生产级文本管线CJK/RTL/shaping/字体发现86 万例 UAX #9 一致性测试全过滤镜、阴影、混合模式这些现代 UI 常用效果开箱即用完整的工程验证体系三平台 CI、跨后端像素对齐、可审计的 benchmark 原始数据MIT 许可公开 API 小、后端可裁剪、源码可读。当前 0.2.0 还不是 1.0但就可评估、可验证、可复现这三点而言它已经比很多标着 1.x 的库更诚实了。如果你有原生应用的 2D 渲染需求特别是多语言文本 滤镜 离屏出图的组合建议把examples/hello_world跑起来用你自己的 workload 复测一遍性能矩阵再下结论。相关链接仓库https://github.com/ClarkWain/WhatsCanvas在线文档https://clarkwain.github.io/WhatsCanvas/下游 UI 框架 WhatsUIhttps://github.com/ClarkWain/WhatsUI性能方法学doc/PERFORMANCE_BENCHMARKS.mdNanoVG 基线原始数据benchmarks/baselines/nanovg-win-i7-8700-gtx1060/README.md本文为技术介绍与整理基于 WhatsCanvas 0.2.0 版本的公开仓库资料。性能数据引用自仓库归档的基准矩阵具体环境见正文第七节请勿直接外推。本文为技术介绍与整理基于 WhatsCanvas 0.2.0 版本的公开仓库资料。性能数据引用自仓库归档的基准矩阵具体环境见正文第七节请勿直接外推。WhatsCanvas-介于 NanoVG 和 Skia 之间C17 可嵌入式 2D 渲染库 WhatsCanvas 全面介绍WhatsCanvas- 介于 NanoVG 和 Skia 之间C17 可嵌入式 2D 渲染库 WhatsCanvas 全面介绍WhatsCanvas - 介于 NanoVG 和 Skia 之间C17 可嵌入式 2D 渲染库 WhatsCanvas 全面介绍
介于 NanoVG 和 Skia 之间：C++17 可嵌入式 2D 渲染库 WhatsCanvas 全面介绍
WhatsCanvas - 介于 NanoVG 和 Skia 之间C17 可嵌入式 2D 渲染库原创整理 | 关键词WhatsCanvas、C17、2D 渲染、跨平台、Canvas、NanoVG、Skia前言做原生应用的童鞋应该都遇到过这样的纠结用NanoVG吧API 简单、几十行就能画东西但多语言文本、滤镜、图层这些能力基本得自己补用Skia吧功能强大到什么都有但体积大、构建复杂、学习成本高很多项目根本用不到它 90% 的能力用 Qt/SDL 之类的框架自带的绘制能力吧又被框架绑死了想单独抽出来做离屏渲染、做服务端图片生成都不方便。WhatsCanvas就是冲着这个空档去的一个用 C17 编写的、面向原生应用的可嵌入式 2D 渲染库。它提供类似 HTML Canvas 的Canvas/Paint/PathAPI把多语言文本、图层滤镜、图片渲染、离屏渲染、像素回读这些中间地带的能力补齐了同时不接管你的窗口、布局、事件循环也不内置任何控件。一句话定位比 NanoVG 多得多比 Skia 轻得多源码可读、可验证、可裁剪。GitHubhttps://github.com/ClarkWain/WhatsCanvas在线文档https://clarkwain.github.io/WhatsCanvas/当前版本0.2.0pre-1.0许可证MIT目录WhatsCanvas 是什么60 秒画出第一帧获取与集成三种姿势多后端架构一个 API五种后端能力全景文本渲染这是重头戏性能数据附审计方法工程质量不只是能画像素选型建议什么时候用它什么时候别用总结一、WhatsCanvas 是什么WhatsCanvas 是一个可嵌入式的 2D 渲染库可嵌入式意味着它是你应用里的一个库而不是一个框架公开 API 很小就 16 个头文件约 74 KiB入口是#include wsc/wsc.h后端按 target 分离链接你只用 CPU 渲染就只链WhatsCanvas::SoftwareGPU 渲染链WhatsCanvas::OpenGL它不管你的窗口创建、事件循环、控件、布局和无障碍这些交给宿主应用它也不是HTML Canvas 的源码兼容实现只是 API 风格相似。你关心的事项当前答案适用场景原生应用自定义 UI、工具/数据界面、HUD、2D 游戏渲染层、服务端离屏出图、测试环境语言C17渲染后端Software纯 CPU、OpenGL 3.3 Core、OpenGL ES 3.0可选、Vulkan可选、MetalmacOS/iOS平台Windows / Linux / macOS 持续 CI发布包覆盖 win64、linux x64、macOS universal文本能力字体发现与 fallback、CJK/RTL、UAX #9 双向文本、换行省略、glyph atlas、COLR/CPAL v0接入方式find_package、add_subdirectory、源码生成本地安装目录许可证MIT需要完整 UI 框架的可以看它的下游项目 WhatsUI——基于 WhatsCanvas 的 C17 保留模式 UI 库带 Fluent 2 设计系统、控件、布局和输入处理。二、60 秒画出第一帧Software 后端不需要窗口、不需要 GL 上下文、不需要 GPU是验证 API 最快的方式。整个例子#includewsc/wsc.hintmain(){autocanvaswsc::Canvas::create(wsc::Canvas::Backend::Software,256,256);if(!canvas||!canvas-initializeContext()){return1;}canvas-beginFrame();wsc::Paint fill;fill.setColor(wsc::Color(40,120,240,255));fill.setAntiAlias(true);canvas-drawRoundRect(wsc::RectF(40,40,176,176),24.0f,fill);canvas-endFrame();returncanvas-savePixelsPPM(first.ppm)?0:1;}画一个蓝色圆角矩形savePixelsPPM直接落盘一张 PPM。程序在当前目录生成first.ppm用图片查看器打开或转成 PNG 就行。这段代码不是随手写的它以独立 CMake 项目的形式收在仓库的examples/hello_world/里开 demo 构建时会跟着主工程一起编译——README 里贴的代码保证能跑这是很多库做不到的。三、获取与集成三种姿势1. 预编译包GitHub Releases 提供whatscanvas-platform-release-version.zip如whatscanvas-win64-release-0.2.0.zip目录结构include/wsc/ 公开头文件 lib/ 渲染库 bin/ shared 构建的运行时库 lib/cmake/WhatsCanvas/ find_package 配置三个平台的包配置不完全一样选型前注意发布资产交付形式和 target字体/Vulkan 配置Windows x64sharedOpenGL / OpenGL ES / SoftwareFreeType、HarfBuzz 开启Vulkan 选项开启Linux x64staticOpenGL / SoftwareFreeType、HarfBuzz 开启Vulkan 关闭macOS universalstaticOpenGL / SoftwareFreeType、HarfBuzz 开启Vulkan 关闭2. CMake find_packagecmake_minimum_required(VERSION 3.16) project(MyApp LANGUAGES CXX) set(CMAKE_CXX_STANDARD 17) find_package(WhatsCanvas 0.2.0 CONFIG REQUIRED) add_executable(MyApp main.cpp) target_link_libraries(MyApp PRIVATE WhatsCanvas::Software)3. 源码 add_subdirectory / 从源码构建set(WHATSCANVAS_BUILD_OPENGL ON CACHE BOOL ) set(WHATSCANVAS_BUILD_SOFTWARE ON CACHE BOOL ) set(WHATSCANVAS_BUILD_DEMO OFF CACHE BOOL ) add_subdirectory(third_party/WhatsCanvas) target_link_libraries(MyApp PRIVATE WhatsCanvas::OpenGL)源码构建要求 CMake 3.16、C17 编译器、完整 Git submodule。仓库根目录提供了build.batWindows/VS 2022和build.shmacOS/Linux一键脚本加--package参数还能生成适配find_package的 Release 目录。小提醒Windows 官方包是 shared 构建运行前把包内bin加进 PATH或者把 DLL 复制到 exe 旁边。四、多后端架构一个 API五种后端这是 WhatsCanvas 设计上比较有意思的地方统一 API 多后端 运行时 fallback。后端CMake target默认状态特点SoftwareWhatsCanvas::Software开启纯 CPU 确定性参考实现适合 headless、测试、截图、兜底OpenGL 3.3 CoreWhatsCanvas::OpenGL开启桌面主 GL 路径应用自己建上下文OpenGL ES 3.0WhatsCanvas::OpenGLES关闭独立 target移动平台用Vulkan编入::OpenGL关闭-DWHATSCANVAS_ENABLE_VULKANON启用Win32 支持窗口呈现MetalApple 平台编入::OpenGLApple 默认开启离屏 MTLTexture互操作 CAMetalLayer呈现所有后端都通过Canvas::create(Backend, width, height)创建失败返回nullptr所以写 fallback 链特别自然usingBackendwsc::Canvas::Backend;autocanvaswsc::Canvas::create({Backend::Vulkan,Backend::Metal,Backend::OpenGL,Backend::Software},width,height);if(!canvas){return1;// 所有后端都失败优雅退出}一个 Vulkan、一个 Metal、一个 OpenGL、一个 Software按优先级传进去哪个能起来用哪个。对要尽量用上 GPU、但不许因为没 GPU 而崩的应用来说这个模式很实用。架构上它分了七层公开 API → 命令记录display list→ 后端无关的图形模型 → 文本层 → 渲染抽象IRenderer→ 后端实现 → 平台层。文本走ITextBackend抽象字体发现和 shaping 可插拔不是写死在 canvas 核心里的。仓库doc/architecture/下有完整的 ADR 记录想抠源码的同学可以顺着读。五、能力全景领域主要能力代表 API几何与路径点/线/矩形/圆角矩形/圆/椭圆/圆弧/曲线路径、fill/stroke 命中测试、虚线、路径效果drawPath、hitTestPathFillPaint填充/描边、解析式抗锯齿、线性/径向多 stop 渐变、14 种混合模式、真高斯阴影、颜色矩阵Paint、setBlendMode、setShadowLayerCanvas 状态save/restore、矩阵变换、矩形/抗锯齿路径裁剪、离屏层、quick rejectclipPath、saveLayer图片PNG/JPEG 解码、raw RGBA、外部纹理、九宫格、圆角/圆形裁剪、contain/cover、平铺Image、drawImageFit图层滤镜内容/背景模糊、内阴影、毛玻璃、饱和度/亮度/对比度/颗粒、颜色矩阵、滤镜链ImageFilter、ImageFilterChain文字系统字体、fallback、CJK/RTL、换行/省略号、描边/阴影/渐变文本、text-on-pathFontManager、drawTextBox、drawTextOnPath输出与互操作离屏图片、GL framebuffer、外部 Vulkan image/Metal texture、同步/异步 RGBA 回读OutputTarget、readPixelsRGBAAsync诊断像素 hash、PPM 导出、render stats、资源与 atlas 统计computePixelsHashRGBA、RenderStats几个值得单独说的点毛玻璃/内阴影/滤镜链ImageFilterChain支持 blur → 颜色矩阵 → offset 这种链式组合做现代 UI 效果半透明面板、backdrop blur不用自己写 shader真高斯阴影不是画个模糊的矩形那种假阴影是setShadowLayer走的真高斯模型文档里有完整的 shadow model 说明外部纹理互操作wrapExternalTexture可以把你自己的 GL texture / Vulkan image / Metal texture 包进来画方便和已有渲染管线共存异步像素回读readPixelsRGBAAsync适合做截屏、离屏出图这类场景不阻塞渲染线程。仓库里的效果图滤镜展示、文本展示都是 OpenGL 后端直接从 framebuffer 回读的 1920×1080 实图不是设计稿截图。六、文本渲染这是重头戏NanoVG 这类库的文本基本是英文够用而 WhatsCanvas 的文本管线是按生产级做的UTF-8 布局、UAX #29 扩展字素簇、按簇安全换行CJK 无空格换行、换行与省略号UAX #9 双向文本Unicode 17.0.0——RTL 语言阿拉伯语、希伯来语等方向与顺序处理已归档的一致性测试跑了861,948 例全部通过0 跳过 0 失败字体发现与 fallbackWindows DirectWrite可选 adapter、macOS/iOS CoreText、Linux fontconfig 三平台系统字体枚举带缓存刷新 API阿拉伯文、印度语系这类需要复杂字形替换/重排的文字走HarfBuzz OpenType shapingGL 家族 target 默认开启栅格化默认走FreeTypeglyph 查找、metrics、kerning、栅格化不可用时回退stb_truetypeglyph atlas 构建、COLR/CPAL v0 彩色字体支持CBDT/CBLC、SBIX、SVG、COLR v1 在路线图上。两个默认开关构建时WHATSCANVAS_ENABLE_FREETYPE_RASTERIZERON默认开WHATSCANVAS_ENABLE_OPENTYPE_SHAPINGON默认开注意一个坑关掉 shaping 或缺依赖时排版会退化到 simple shaping kerning阿拉伯语这类文字会出问题不能当成等价替代。发布前用你自己的字体和文案跑一遍像素回归仓库提供了scripts/text_pixel_regression.*脚本。七、性能数据附审计方法仓库里归档了一组画质对齐的基准矩阵Windows、Core i7-8700、GTX 1060、1920×1080、Release、OpenGL 3.3对比对象是 NanoVG GL3commit 固定为ce3bf74场景矩阵范围归档结果抗锯齿几何256–4,096 个图形静态/动态数据/动态结构8 项领先、1 项持平最大帧时间下降 26.7%图片64–1,024 张最多 32 纹理圆角与状态变化9/9 领先最大帧时间下降 58.5%动态文字64–1,024 次绘制文本/字号/状态变化9/9 领先最大帧时间下降 32.0%总计26 项领先、0 项落后、1 项持平27 项像素质量验证全部通过。我比较欣赏它审计的严谨度每进程预热 5 帧、测量 30 帧每个 cell 用 2 个 ABBA block 抵消漂移每端 4 个新进程10,000 次 bootstrap 出置信区间逐帧 JSONL 明细、像素残差全部留在仓库里可复现。同时它明确写了别外推——这些数据只代表这台机器、这套驱动、这个后端你在自己的 GPU 和工作负载上要复测。这种敢给数据但不吹的姿态在库的介绍文章里不多见。另外 Apple 平台也有数据M3 Pro 上 256×256、128 矩形 × 200 帧的场景Metal 1.66 ms/帧 vs OpenGL 2.45 ms/帧。八、工程质量不只是能画像素选 pre-1.0 的库工程验证体系比功能表更重要。WhatsCanvas 仓库里这一套是完整的三平台 CIWindowsMSVC、LinuxGCC Mesa/Xvfb、macOS 持续跑构建和单元测试OpenGL ES、Vulkan、Metal 各有独立的构建/像素门禁像素回归Software 后端 golden image 基线确定性参考OpenGL/GLES/Vulkan/Metal 滤镜结果跨后端对齐严格 hash 回归 模糊 PPM 回归两档集成验证package consumer 测试模拟真实下游用发布包构建、示例构建检查、API reference 文档时效性检查、版本一致性检查诊断设施像素 hash、PPM 导出、render stats、资源/atlas 统计、确定性首帧时序文档API Reference、API Stability明确 0.x 阶段哪些承诺、哪些不承诺、Feature Matrix滤镜/文本/输出目标各自的支持矩阵、Troubleshooting。已知风险它自己也写清楚了这里替大家划个重点版本仍是0.2.x升级前读 CHANGELOG 跑 package consumer 测试Vulkan 是 opt-in跨平台窗口呈现还在完善中iOS 真机/模拟器 CI 和仓库内 iOS 示例还没补齐移动端集成前要自己验证Canvas单实例不承诺并发访问跨线程共享图片/字体/外部纹理没有公开约定GPU 实时渲染受驱动影响确定性基线请用 SoftwareGPU 回归用容差比较。九、选型建议什么时候用它什么时候别用推荐用它原生应用里要自定义 UI、工具/数据界面、HUD、2D 游戏渲染层服务端/测试环境需要 CPU 离屏出图Software 后端无 GPU 依赖需要多语言文本CJK、RTL、复杂脚本 shaping 常见 UI 效果毛玻璃、阴影、渐变的组合你看重截图确定性、像素级回归、源码可读性愿意自己管窗口和事件。建议另寻方案强依赖现成 UI 控件体系 → 直接用 WhatsUI、Qt、WinUI 之类要在浏览器里跑 → 等它的 WebAssembly/WebGL 2 / WebGPU 计划尚未实现需要严格色彩管理、PDF/文档生成、复杂富文本编辑 → 不在当前支持范围需要一个 ABI 长期稳定的 1.0 成熟库 → 它还是 pre-1.0按官方建议评估升级风险。十、总结WhatsCanvas 的价值不在于又造了一个画 2D 的轮子而在于它把NanoVG 和 Skia 之间那段没人好好做的中间地带填上了统一的Canvas/Paint/PathAPI一个 API 跑五个后端fallback 链一行代码生产级文本管线CJK/RTL/shaping/字体发现86 万例 UAX #9 一致性测试全过滤镜、阴影、混合模式这些现代 UI 常用效果开箱即用完整的工程验证体系三平台 CI、跨后端像素对齐、可审计的 benchmark 原始数据MIT 许可公开 API 小、后端可裁剪、源码可读。当前 0.2.0 还不是 1.0但就可评估、可验证、可复现这三点而言它已经比很多标着 1.x 的库更诚实了。如果你有原生应用的 2D 渲染需求特别是多语言文本 滤镜 离屏出图的组合建议把examples/hello_world跑起来用你自己的 workload 复测一遍性能矩阵再下结论。相关链接仓库https://github.com/ClarkWain/WhatsCanvas在线文档https://clarkwain.github.io/WhatsCanvas/下游 UI 框架 WhatsUIhttps://github.com/ClarkWain/WhatsUI性能方法学doc/PERFORMANCE_BENCHMARKS.mdNanoVG 基线原始数据benchmarks/baselines/nanovg-win-i7-8700-gtx1060/README.md本文为技术介绍与整理基于 WhatsCanvas 0.2.0 版本的公开仓库资料。性能数据引用自仓库归档的基准矩阵具体环境见正文第七节请勿直接外推。本文为技术介绍与整理基于 WhatsCanvas 0.2.0 版本的公开仓库资料。性能数据引用自仓库归档的基准矩阵具体环境见正文第七节请勿直接外推。WhatsCanvas-介于 NanoVG 和 Skia 之间C17 可嵌入式 2D 渲染库 WhatsCanvas 全面介绍WhatsCanvas- 介于 NanoVG 和 Skia 之间C17 可嵌入式 2D 渲染库 WhatsCanvas 全面介绍WhatsCanvas - 介于 NanoVG 和 Skia 之间C17 可嵌入式 2D 渲染库 WhatsCanvas 全面介绍
