PixiEditor 速通指南：从源码跑通一个像素、矢量、动画三合一的 2D 编辑器

PixiEditor 速通指南从源码跑通一个像素、矢量、动画三合一的 2D 编辑器【免费下载链接】PixiEditorPixiEditor is a Universal Editor for all your 2D needs项目地址: https://gitcode.com/GitHub_Trending/pi/PixiEditor当你需要在一个画布上既做像素画、又画矢量 Logo还能顺手导出帧动画 GIF 时PixiEditor 就是一个值得从源码跑一遍的 .NET 2D 编辑器——像素、绘画、矢量三套工具集共存于同一份文档节点渲染系统驱动一切效果。 一套编辑器覆盖 2D 全流程PixiEditor 的核心能力PixiEditor 解决的是像素画工具画不了矢量、矢量工具做不了动画的割裂问题它把三套工具集塞进同一个画布并且所有图层、特效、图层结构本身都是节点图上的节点因此你可以像搭积木一样自定义整张图像的生成方式。关键指标一眼看完技术栈.NET 8 Avalonia UI跨平台桌面应用工具集像素画、绘画软笔刷/抗锯齿图形、矢量路径与形状三套可混用于一个画布导出格式PNG、JPG、SVG、GIF、MP4 等平台兼容Windows / Linux / macOSx64 与 ARM64 双架构动画能力时间轴逐帧动画 节点驱动的着色器动画内置 FFmpeg 渲染管线⚡ 最短上手路径克隆仓库到启动编辑器环境要求.NET SDK 8.0仓库 global.json 锁定 8.0.405rollForward: latestMinor任意 8.0.x 均可gitWindows / Linux / macOS 之一Linux 需 X11 桌面环境从克隆到启动一共四行命令git clone https://gitcode.com/GitHub_Trending/pi/PixiEditor cd PixiEditor/src dotnet build PixiEditor.sln -c Release dotnet run --project PixiEditor.Desktop启动后你会看到带时间轴、图层面板和工具栏的主界面新建一张画布即可开始创作。默认优先使用 Vulkan 渲染后端OpenGL 作为回退。️ 核心用法拆解三套工具集与节点系统像素与栅格绘画逐像素精确控制这一路解决画像素画和常规修图。像素画工具集面向像素级精确场景硬边笔刷、填充、魔棒绘画工具集则提供软笔刷与抗锯齿形状。像素画工具集适合像素级编辑笔刷不产生半透明过渡绘画工具集软笔刷、抗锯齿直线/矩形/椭圆选区与填充套索、魔棒、洪水填充Flood Fill色板内置调色板可拖入画布取色预期效果画一张 32×32 精灵图再放大查看边缘保持硬边无锯齿切换绘画工具集后笔刷则带平滑过渡。矢量与栅格同画布画完直接导出 SVG这一路解决矢量稿和位图混编。矢量工具集提供路径、形状工具绘制结果与普通图层在同一个文档里共存——你可以在矢量图形下面垫一张位图纹理再整体导出。矢量工具路径Path、矩形、椭圆、直线混合编辑矢量层与栅格层自由叠放导出SVG 保留矢量信息PNG/JPG 输出光栅结果预期效果矢量 Logo 放大 10 倍依然锐利导出 SVG 到浏览器打开路径可继续编辑。节点图与时间轴程序化动画的入口这一路解决手动逐帧太慢的问题。PixiEditor 对每个文档都暴露节点图层混合、特效、变换都是节点连接的结果你可以把整张图的生成过程当作可重放、可调参的图来驱动配合时间轴做逐帧动画最终经内置 FFmpeg 管线导出 GIF 或 MP4。节点图每张文档独有暴露所有图层与效果连接时间轴逐帧动画关键帧驱动渲染管线FFmpeg 封装支持 MP4/GIF 输出预期效果把一张图接上变换节点并拖动时间轴即可看到节点驱动的重绘动画导出后即为 MP4 序列。写一个扩展调用官方 API 注入功能这一路面向想扩展编辑器的开发者。PixiEditor 提供 C# 扩展 SDK 与 WASM 运行时仓库内附带 12 个示例最小实现只需一个类// 继承 PixiEditorExtension生命周期回调中调用 Api public class HelloWorldExtension : PixiEditorExtension { public override void OnLoaded() { } public override void OnInitialized() { Api.Logger.Log(Hello PixiEditor!); } }元数据extension.json声明名称、版本、作者加载时机扩展先被 Load 再 InitializeApi在初始化后可用完整示例扩展示例目录 含本地化、偏好设置、面板、命令注册等 12 个场景预期效果构建后加载扩展日志窗口即打印 Hello PixiEditor!且扩展可注册自己的命令与面板。⚙️ 进阶调优把构建和渲染调到顺手切换渲染后端默认 Vulkan 优先Vulkan 初始化失败或需要 OpenGL 时启动加--opengl参数即可强制回退见 PixiEditor.Desktop/Program.cs。指定目标平台发布dotnet publish PixiEditor.Desktop -c Release -r win-x64仓库已预置 win/linux/mac 的 x64 与 arm64 六种 RID。跳过更新器出包使用-c ReleaseNoUpdate配置产出不含在线更新逻辑的发行版适合内部分发。扩展开发隔离扩展只依赖 PixiEditor.Extensions.Sdk不要把主程序逻辑带进扩展保持可独立编译。 遇到报错先查这五处Linux 启动黑屏或窗口不出现→ 缺少 X11 环境或无显示服务 → 在带桌面会话的终端运行确认DISPLAY已设置。Vulkan 初始化失败、闪退→ 驱动过旧或不兼容 → 加--opengl参数启动走 OpenGL 后端。build 报 SDK 版本错误→ 本机 .NET SDK 低于 8.0 → 安装任意 8.0.x 版本global.json允许 latestMinor 自动滚动。扩展项目编译报找不到 PixiEditorExtension→ 未引用 SDK 包 → 参照 samples 示例 中的 csproj 补齐包引用与元数据。大帧数动画导出卡死→ FFmpeg 管线在逐帧合成属正常耗时 → 先降低导出分辨率试跑再上全尺寸。 延伸资源项目总览与功能清单README.md参与贡献与子项目说明ColorPicker、Drawie、PixiDocks、PixiParserCONTRIBUTING.md节点渲染系统核心源码PixiEditor.ChangeableDocument导入导出与文件格式模块Models/IO第三方 FFmpeg 许可说明Third Party Licenses【免费下载链接】PixiEditorPixiEditor is a Universal Editor for all your 2D needs项目地址: https://gitcode.com/GitHub_Trending/pi/PixiEditor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考