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

周見智發表於2016-06-23

目錄

 

說明

最近空餘時間研究了一下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可以自己去設計，底圖旋轉，剪下功能沒有完善，如果需要用得著的童鞋自己實現一下即可，不費力。

相關文章