如何用 .NET 構(gòu)建跨平臺 2D 編輯器PixiEditor 的做法【免費(fèi)下載鏈接】PixiEditorPixiEditor is a Universal Editor for all your 2D needs項(xiàng)目地址: https://gitcode.com/GitHub_Trending/pi/PixiEditor做像素畫的人遲早會撞上一堵很具體的墻逐幀動畫的工具不認(rèn)矢量導(dǎo)出 SVG 的工具又做不到像素級對齊想加個程序化效果就得把文件導(dǎo)出再導(dǎo)回另一個工具?？缙脚_只是這個問題的入口。PixiEditor 是一個用 .NET 8 編寫的 2D 編輯器它想把像素畫、繪畫、矢量三套工具集放進(jìn)同一張畫布讓同一個文檔能導(dǎo)出成 PNG、SVG、GIF 乃至 MP4。翻它的源碼目錄切分方式很干凈ChangeableDocument 管畫布上有什么文檔模型Drawie基于 Google Skia 的 2D 渲染庫管怎么畫Avalonia 管用戶看到什么。UI 和畫布渲染走兩條完全獨(dú)立的路。這個編輯器最有辨識度的不是工具集本身而是底下這兩塊基建文檔被建成一張節(jié)點(diǎn)圖渲染管線被做成后端可選。PixiEditor 是面向像素畫創(chuàng)作者和獨(dú)立游戲開發(fā)者的跨平臺 2D 編輯器Windows 與 Linux 目前體驗(yàn)完整macOS 版也在路線圖上。和 Aseprite、Piskel 這類同類相比關(guān)鍵差異不在界面而在它把整個文檔建模成節(jié)點(diǎn)圖——圖層、特效、結(jié)構(gòu)都是節(jié)點(diǎn)你給圖層加的效果是圖里的一條連線而不是寫死在文件里的屬性。文檔就是一張節(jié)點(diǎn)圖傳統(tǒng)編輯器里的高斯模糊是寫進(jìn)文件的屬性PixiEditor 里它是一張圖里的節(jié)點(diǎn)。Document.cs 里每個文檔持有自己的 NodeGraph圖層結(jié)構(gòu)、每個特效、時間線都是圖的成員。這個模型帶來兩個直接好處特效隨時可以改線重連渲染系統(tǒng)只需執(zhí)行這張圖完全不用關(guān)心用戶疊了多少層。圖像數(shù)據(jù)也不是整塊存——ChunkyImageLib 把畫面切成分塊chunk只有非空的塊占內(nèi)存所以改一個像素只重畫這一塊是天然成立的操作。渲染入口 DocumentRenderer.cs 把這件事做成了最樸素的圖遍歷public void UpdateChunk(VecI chunkPos, ChunkResolution resolution, KeyFrameTime frameTime) { Document.NodeGraph.TryTraverse((node { if (node is IChunkRenderable imageNode) { imageNode.RenderChunk(chunkPos, resolution, frameTime, Document.ProcessingColorSpace); } })); }這段代碼實(shí)際在做什么畫布上某個小塊需要刷新時遍歷一次節(jié)點(diǎn)圖讓每個圖像節(jié)點(diǎn)只重繪那一塊一次像素編輯不會觸發(fā)整畫布重繪。渲染管線交給 Avalonia 與 DrawieUI 和畫布不能擠在同一條渲染通道里。PixiEditor 的做法是Avalonia 負(fù)責(zé)窗口和控件畫布區(qū)域交給 Drawie底層繪制由 Skia 完成啟動時再根據(jù)用戶偏好或命令行參數(shù)決定 GPU 后端默認(rèn) Vulkan 優(yōu)先、OpenGL 兜底。承載畫布的 Scene.cs 繼承自 Zoombox縮放視口控件最終把渲染結(jié)果貼到 Avalonia 紋理上的只是一次 DrawSurface 拷貝。啟動邏輯全部寫在 Program.csreturn AppBuilder.ConfigureApp() .UsePlatformDetect() .With(new Win32PlatformOptions() { RenderingMode openGlPreferred ? [Win32RenderingMode.Wgl, Win32RenderingMode.Vulkan] : [Win32RenderingMode.Vulkan, Win32RenderingMode.Wgl], }) .WithDrawie();這段代碼實(shí)際在做什么應(yīng)用啟動時寫死 GPU 后端的回退順序Vulkan 或 OpenGL 誰在前末尾的 WithDrawie() 把 Drawie 掛進(jìn) Avalonia 的渲染樹畫布和 UI 從此共享同一幀調(diào)度?？缙脚_渲染的三個實(shí)操坑走 Skia 通道渲染大畫布時SkiaOptions.MaxGpuResourceSizeBytes必須提前調(diào)大——倉庫把默認(rèn)值放大到四倍就是因?yàn)?GPU 紋理額度不夠會直接渲染失敗。Vulkan 在老顯卡上卡頓時用--opengl啟動參數(shù)或偏好文件切后端即可不用重新編譯這正是上面那段回退順序存在的意義。渲染是多線程分塊進(jìn)行的源碼注釋自己都在提醒遍歷時文檔對象可能已被釋放動文檔模型前先把ObjectDisposedException接住。它適合什么不適合什么PixiEditor 不適合照片級修圖或大屏位圖工作——默認(rèn) 64x64 的畫布和逐幀時間線都是為圖小、幀多、層多的游戲資產(chǎn)場景調(diào)的。需要 PSD 級遮罩體系或 4K 視頻輸出的項(xiàng)目先選別的工具。但如果你想搭自己的 2D 工具這個倉庫的周邊值得翻samples/ 目錄給了 12 個 C# 擴(kuò)展示例能注冊自定義命令、調(diào)色板甚至 UI上面還掛著獨(dú)立的 SVG 解析庫 PixiEditor.SVG 和 Wasm 擴(kuò)展運(yùn)行時動畫功能則支持逐幀與著色器節(jié)點(diǎn)兩條路。想動手的話clone 倉庫https://gitcode.com/GitHub_Trending/pi/PixiEditor后先跑通 samples 里的 HelloWorld 擴(kuò)展比直接啃主項(xiàng)目快得多——對一個把文檔即節(jié)點(diǎn)圖、渲染即圖執(zhí)行貫徹到底的編輯器來說擴(kuò)展入口就是它架構(gòu)的濃縮版。【免費(fèi)下載鏈接】PixiEditorPixiEditor is a Universal Editor for all your 2D needs項(xiàng)目地址: https://gitcode.com/GitHub_Trending/pi/PixiEditor創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考