三端都能跑的跨平台像素编辑器：PixiEditor 渲染管线拆解

三端都能跑的跨平台像素编辑器：PixiEditor 渲染管线拆解

【免费下载链接】PixiEditor PixiEditor is a Universal Editor for all your 2D needs 项目地址: https://gitcode.com/GitHub_Trending/pi/PixiEditor

写图形编辑器的渲染层时，最容易掉进坑里的问题只有一类：同一个画布，在 Windows 上要走 WGL 或 Vulkan，在 Linux 的 X11 上要处理 GLX 与 Vulkan，macOS 又是另一套接口。如果为每个平台各写一遍绘制代码，维护成本会直接失控。PixiEditor 是一款跨平台像素艺术编辑器，它用 Skia + Avalonia + Drawie 的组合，把"画什么"和"画在哪"彻底拆开，一套代码跑在 Windows、Linux、macOS 三个系统上。

PixiEditor 是一个基于 .NET 开发的通用 2D 编辑器（仓库当前目标框架为 net8.0）：图层、特效、动画全部由节点图驱动，内置像素、绘画、矢量三套工具，构建时直接覆盖 win/linux/osx 的 x64 与 arm64 共六个运行标识符。

技术栈分工：Skia、Avalonia、Drawie 各自管什么

可以把三者理解为一个厨房里的三种角色：

• Skia 是锅和灶：真正执行 2D 绘制——矩阵变换、画纹理、做混合采样，这些都由 Skia 完成，Chrome 和 Android 的 2D 绘制也出自同一套引擎。
• Avalonia 是厨房的格局：负责窗口、布局、主题与鼠标键盘事件，并提供 Skia 的宿主层（Avalonia.Skia 包）。
• Drawie 是电源适配器：它是渲染后端的统一抽象，向上提供 Drawie.Backend.Core、Drawie.Skia 等 API，向下对接 Drawie.Interop.Avalonia 与 Drawie.Interop.VulkanAvalonia。业务代码只面向 Drawie 编程，具体走 Vulkan 还是 OpenGL，它来兜底。

项目引用关系在 src/PixiEditor/PixiEditor.csproj 里能直接看到：Avalonia、Avalonia.Skia、Drawie.Interop.Avalonia(.Core)、ChunkyImageLib 与 PixiParser.Skia 并列，说明"界面（Avalonia）— 绘制（Skia）— 后端适配（Drawie）"是三层解耦的结构。

渲染管线走读：一帧画面是怎么出来的

整帧流程可以概括为四步：

1. 节点图产出画面：文档的节点图（图层、混合、特效）计算完成后，按视口生成缓存纹理，存放在 Document.SceneTextures 中。
2. 请求合成帧：视口控件 Scene 调用 QueueNextFrame()，通过 compositor.RequestCompositionUpdate 排队；回调 UpdateFrame 触发 RenderFrame，尺寸变化时重建 framebuffer 与 renderTexture。
3. 绘制场景：Draw() 把缩放、旋转、翻转组合成 Skia 矩阵，依次绘制棋盘格透明底、文档缓存纹理（按缩放密度自动选半分辨率或双线性采样）、前后景叠加层。
4. 回刷上屏：renderTexture 被 DrawSurface 拷回 framebuffer 并 Flush，最后由 Avalonia 把合成 surface 贴进窗口。

启动阶段的配置决定了管线走哪条路。下面这段代码在应用启动时确定 GPU 后端优先级（默认 Vulkan，OpenGL 兜底）并放宽 Skia 的显存上限：

return AppBuilder.Configure<App>()
    .UsePlatformDetect()
    .With(new Win32PlatformOptions {
        RenderingMode = [Win32RenderingMode.Vulkan, Win32RenderingMode.Wgl],
        OverlayPopups = true })
    .With(new X11PlatformOptions {
        RenderingMode = [X11RenderingMode.Vulkan, X11RenderingMode.Glx],
        OverlayPopups = true })
    .With(new SkiaOptions {
        MaxGpuResourceSizeBytes = 1024 * 600 * 4 * 12 * 4 // quadruple the default size })
    .WithDrawie();

完整实现见 src/PixiEditor.Desktop/Program.cs。而绘制时，视图变换最终落到 Skia 矩阵上，场景绘制就是在这套变换里进行的：

texture.Canvas.SetMatrix(isFullscreen ? Matrix3X3.Identity : matrix.ToSKMatrix().ToMatrix3X3());
RectD dirtyBounds = new RectD(0, 0, outputSize.X, outputSize.Y);
RenderScene(texture, dirtyBounds, isFullscreen, renderOverlays);

实际表现与上手建议：渲染后端怎么选、Skia 资源限制怎么配

这套管线能支撑高分辨率画布的实时编辑、多视口同步显示以及带叠加层（选区、指针、标尺类 UI）的连续刷新。如果你在项目中参考它的做法，有四点可以直接借鉴：

• 渲染后端选择留退路：默认 Vulkan，同时把 WGL/GLX 放进备选队列。PixiEditor 提供了两种切换方式——启动参数 --opengl，或写入 %LOCALAPPDATA%/PixiEditor/render_api.config（读取逻辑在 RenderApiPreferenceManager），遇到个别硬件兼容问题可以不改代码降级。
• Skia 资源限制按画布调：SkiaOptions.MaxGpuResourceSizeBytes 被放大到默认值的四倍（代码注释写明 quadruple the default size）。自己的项目可按"目标最大画布面积 × 像素字节数"估算，显存紧张再回调。
• 用低分辨率预览省 GPU：Scene 按缩放密度自动在 1/1、1/2、1/4、1/8 分辨率间切换（ChunkResolution），缩得很小就不渲染全精度纹理；放大浏览时对缓存纹理走双线性采样，且受 MaxBilinearSamplingSize（默认 4096）封顶。大图编辑器都可以照搬这个"远处糊一点"的策略。
• 平台差异收敛到 RID：代码里不写平台分支，靠 csproj 按 RuntimeIdentifier 引入对应操作系统项目（PixiEditor.Windows / PixiEditor.Linux / PixiEditor.MacOs），发布时选对 RID 即可，六个平台共用同一套渲染逻辑。

需要 Windows、Linux、macOS 三端 GPU 渲染的 .NET 图形应用——像素编辑器、图像查看器、可视化设计工具——PixiEditor 的 Avalonia + Skia + Drawie 组合与上面的配置细节，都值得一并抄进自己的技术方案里。

【免费下载链接】PixiEditor PixiEditor is a Universal Editor for all your 2D needs 项目地址: https://gitcode.com/GitHub_Trending/pi/PixiEditor