slughorn — GPU 矢量图形

# slughorn — GPU 矢量图形 Source: https://slughorn.io/ slughorn (https://slughorn.io/index.html) - 文档 (https://slughorn.io/#resources) - 示例 (https://slughorn.io/#examples) - GitHub ↗ (https://github.com/AlphaPixel/slughorn) slughorn ## GPU 矢量图形，*重新定义\.* 一个采用现代 C\+\+20 编写的库，实现了 Slug GPU 矢量图形技术。支持导入 SVG、FreeType、Blend2D、Cairo、Skia —— ***也可以直接使用 slughorn 原生 Canvas API 创作图形*** —— 然后上传至 OpenGL、Vulkan、WebGPU、DirectX 等多种后端。 ## 文档与链接 ## 你需要的一切 ```python import slughorn # 创建一个图集（GPU 纹理后备存储） atlas = slughorn.Atlas(2048) canvas = slughorn.canvas.Canvas(atlas) # 构建分层复合图形 canvas.begin_composite() # 深色背景填充 canvas.rect(0.0, 0.0, 1.0, 1.0) canvas.fill(slughorn.Color(0.12, 0.12, 0.14, 1.0), 1.0) # 金色渐变圆角面板 canvas.rounded_rect(0.06, 0.06, 0.94, 0.94, 0.09) gradient = canvas.create_linear_gradient(0.0, 0.0, 1.0, 1.0, [ slughorn.GradientStop(0.0, slughorn.Color(0.55, 0.31, 0.02, 1.0)), slughorn.GradientStop(1.0, slughorn.Color(1.00, 0.85, 0.35, 1.0)), ]) canvas.fill_gradient(gradient, 1.0) # 镂空圆形（反向缠绕方向） canvas.arc(0.5, 0.5, 0.28, 0.0, 2.0 * math.pi, True) canvas.fill() canvas.finalize() # 构建 → 纹理就绪，可供 GPU 上传 atlas.build() curve_tex = atlas.curve_texture # RGBA32F band_tex = atlas.band_texture # RGBA16UI ``` ```cpp #include <slughorn/slughorn.hpp> // Atlas 是 GPU 纹理后备存储 slughorn::Atlas atlas(2048); slughorn::canvas::Canvas canvas(atlas); // 双色标金色渐变 auto gradient = canvas.createLinearGradient( 0_cv, 0_cv, 1_cv, 1_cv, { slughorn::GradientStop{0_cv, {0.55_cv, 0.31_cv, 0.02_cv, 1_cv}}, slughorn::GradientStop{1_cv, {1_cv, 0.85_cv, 0.35_cv, 1_cv}} } ); // 构建分层复合图形 canvas.beginComposite(); // 深色背景填充 canvas.rect(0_cv, 0_cv, 1_cv, 1_cv); canvas.fill({0.12_cv, 0.12_cv, 0.14_cv, 1_cv}, 1_cv); // 金色渐变圆角面板 canvas.roundedRect(0.06_cv, 0.06_cv, 0.94_cv, 0.94_cv, 0.09_cv); canvas.fillGradient(gradient, 1_cv); // 镂空圆形（反向缠绕方向） canvas.arc(0.5_cv, 0.5_cv, 0.28_cv, 0_cv, 2_cv * slughorn::PI_CV, true); canvas.fill(); canvas.finalize(); // 构建 → 纹理就绪，可供 GPU 上传 atlas.build(); const auto& curveTex = atlas.getCurveTextureData(); // RGBA32F const auto& bandTex = atlas.getBandTextureData(); // RGBA16UI ``` Canvas API 镜像了大家熟悉的浏览器 `<canvas>` 元素。复合图形将填充、描边和渐变堆叠进一个可供 GPU 上传的单一图集中，**运行时零细分开销** —— 重活在构建阶段一次性完成，让 GPU 管线保持简洁高效。