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