【UWP開源】圖片編輯器，帶貼圖、濾鏡、塗鴉等功能

目錄

• 說明
• 功能
• 實現原理
• 使用方法
• 效果截圖

 

說明

最近空余時間研究了一下Win2D，它能為我們在UWP中提供一種類似GDI那樣的繪圖方法。就像傳統Winform、MFC中那樣重寫OnPaint相關的方法，然后調用DrawLine繪制一條直線。有了它的幫助，我們可以在UWP中創建復雜的UI，聽起來是不是很爽呢？

本文源碼地址：https://github.com/sherlockchou86/ImageEditor.UWP

 

功能

主要功能已經完成，主要包括：

• edit local and remote(net) images;
• select layout(1:1 3:4 4:3), select backcolor for canvas, rotate and crop the background image;
• tune brightness, degree of fuzzy and degree of sharpening;
• add stickers onto canvas(download templates from internet);
• apply a kind of filters(8 filters supported);
• add tags such as location, @friends, adn etc;
• draw on the canvas, you can select pen-size, pen-color(image) which you like;
• save the canvas as a BitmapImage object, which you can directly use.

Note：

- 貼紙是根據自定義的json文件，自動從網上下載的。也就是說，貼紙不是固定不變的，你可以隨時修改json文件，隨時更新貼紙模板。詳細json格式參見下面；

- 源碼中我並沒有創建單獨的Library，你如果需要封裝成獨立的庫，只需要創建一個Library Project，然后將'Controls', 'DrawingObjects', 'Images', 'Resources' and 'Tools' 目錄拷貝到新建的Project中去即可，注意必要時需要修改NS。

下面是下載貼紙的json文件范例：

 

實現原理

其實原理相當簡單，熟悉gdi繪圖的人很容易理解：

- 繪制直線

graphics.DrawLine((float)Left, (float)(Top + (Height / 3)), (float)(Left + Width), (float)(Top + Height / 3), Colors.Orange, 0.3f, style);

- 填充圓形

graphics.FillCircle((float)Left, (float)Top, radius, DrawColor);

- 關於濾鏡效果

Win2D中有現成的濾鏡類，只需要傳入Image，設置相關屬性，那么返回來的便是濾鏡效果。每種效果都是一個ICanvasImage，直接將其Draw在UI上或者一個CanvasBitmap上即可。

- 關於代碼結構 

  

可以看到，代碼中創建了許多的DrawingObject類型，熟悉gdi的童鞋們相比已經知道什么情況了。

 

使用方法

 關於控件的使用方法，就更簡單了。參見下面代碼：

分三步：

- 創建一個ImageEditor的對象；

- 調用它的Show方法，給它傳遞StorageFile或者Uri參數；

- 注冊它的ImageEditedCompleted事件，接收編輯完成的Image。

 

幾張截圖

幾張截圖，大部分是PC上的，手機上也適用。界面太糙，UI可以自己去設計，底圖旋轉，剪切功能沒有完善，如果需要用得着的童鞋自己實現一下即可，不費力。