一、編輯器簡介

寫這個控件之前總想找一找開源的，可以偷下懶省點事?？墒歉鞣N地方都搜遍了也沒有找到。

于是，那就做第一個吃螃蟹的人吧！

控件主要有三個功能：涂鴉、裁剪、合成。

涂鴉：主要是用到了InkToolbar和InkCanvas。

裁剪：這個用到的比較復雜，源碼會公布出來。

合成：將涂鴉圖層按比例縮放到原圖大小，然后兩個圖層進行合成。

本文GitHub地址

二、涂鴉功能實現方法

這里為了省事用了一個別人寫好的控件，主要是切換畫筆、顏色方便。其實可以自己單獨寫控件的。

能用現成的就用現成的，少寫好多行代碼了。

Inktoolbar下載地址：

https://visualstudiogallery.msdn.microsoft.com/58194dfe-df44-4c4e-893a-1eca40675269

初始化Ink相關控件：

<InkCanvas Name="ink_canvas"> <ink:InkToolbar x:Name="inktoolbar" ButtonHeight="60" ButtonWidth="60" ButtonBackground="Transparent" > ink_canvas.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Touch | CoreInputDeviceTypes.Pen; inktoolbar.TargetInkCanvas = this.ink_canvas;

獲取涂鴉方法：

1、從InkCanvas中獲取：

這個獲取的就是屏幕渲染出來的圖片，也就是說圖片基本都是被縮放過的。

優點：速度快。

缺點：圖片是被放縮成控件大小的，不是原圖的大小。比如原圖是2880*1600的圖，涂鴉過后取出來的圖片就變成288*160的大小了。

CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, (int)ink_canvas.ActualWidth, (int)ink_canvas.ActualHeight, 96); renderTarget.SetPixelBytes(new byte[(int)ink_canvas.ActualWidth * 4 * (int)ink_canvas.ActualHeight]);using (var fileStream = await file.OpenAsync(FileAccessMode.ReadWrite)) {await renderTarget.SaveAsync(fileStream, CanvasBitmapFileFormat.Png, 1f); }

2、圖層合成

先獲取ink圖層，縮放至原圖大小。然后將Ink圖層和原圖圖層合并?？s放和合并算法的源碼會在文章末尾。

優點：圖片大小不改變，相當于是在原圖上涂鴉。

缺點：計算復雜，比較耗時。

CanvasDevice device = CanvasDevice.GetSharedDevice(); CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, (int)ink_canvas.ActualWidth, (int)ink_canvas.ActualHeight, 96); renderTarget.SetPixelBytes(new byte[(int)ink_canvas.ActualWidth * 4 * (int)ink_canvas.ActualHeight]); using (var ds = renderTarget.CreateDrawingSession()) {IReadOnlyList<InkStroke> inklist = ink_canvas.InkPresenter.StrokeContainer.GetStrokes();Debug.WriteLine("Ink_Strokes Count: " + inklist.Count);ds.DrawInk(inklist); } var inkpixel = renderTarget.GetPixelBytes(); WriteableBitmap bmp = new WriteableBitmap((int)ink_canvas.ActualWidth, (int)ink_canvas.ActualHeight); Stream s = bmp.PixelBuffer.AsStream(); s.Seek(0, SeekOrigin.Begin); s.Write(inkpixel, 0, (int)ink_canvas.ActualWidth * 4 * (int)ink_canvas.ActualHeight);WriteableBitmap ink_wb = await ImageProcessing.ResizeByDecoderAsync(bmp, sourceImage.PixelWidth, sourceImage.PixelHeight, true); WriteableBitmap combine_wb = await ImageProcessing.CombineAsync(sourceImage, ink_wb);

?

三、裁剪功能實現方法

在WPF中已經有很多前人寫過的模板了，這里不需要做太多修改就可以使用。代碼會在文章末尾給出

但是有一個問題在UWP中會引起卡頓現象。

剪裁的時候為了方便用戶對齊，會將裁剪區域分成九宮格。

這時候想到了畫四個矩形，但是這樣子會卡頓，非常卡頓、非?？D、非?？D。

?

<Rectangle x:Name="horizontalLine" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding HorizontalLineCanvasTop}" Height="1" Width="{Binding SelectedRect.Width}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/> <Rectangle x:Name="verticalLine" Canvas.Left="{Binding VerticalLineCanvasLeft}" Canvas.Top="{Binding SelectedRect.Top}" Width="1" Height="{Binding SelectedRect.Height}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/> <Rectangle x:Name="horizontalLine1" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding HorizontalLine1CanvasTop}" Height="1" Width="{Binding SelectedRect.Width}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/> <Rectangle x:Name="verticalLine1" Canvas.Left="{Binding VerticalLine1CanvasLeft}" Canvas.Top="{Binding SelectedRect.Top}" Width="1" Height="{Binding SelectedRect.Height}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/>

解決方案是畫Path，由于繪圖機制的原因，這樣子就不會有卡頓現象，給用戶如絲般潤滑的感覺。

<Path x:Name="horizontalLine" Fill="{ThemeResource ApplicationForegroundThemeBrush}" Stroke="{ThemeResource ApplicationForegroundThemeBrush}" StrokeThickness="0.5"> 　　<Path.Data><RectangleGeometry Rect="{Binding HorizontalLine1}"/> 　　</Path.Data> </Path> <Path x:Name="horizontalLine1" Fill="{ThemeResource ApplicationForegroundThemeBrush}" Stroke="{ThemeResource ApplicationForegroundThemeBrush}" StrokeThickness="0.5"> 　　<Path.Data> 　　　　<RectangleGeometry Rect="{Binding HorizontalLine2}"/> 　　</Path.Data> </Path> <Path x:Name="verticalLine" Fill="{ThemeResource ApplicationForegroundThemeBrush}" Stroke="{ThemeResource ApplicationForegroundThemeBrush}" StrokeThickness="0.5"> 　　<Path.Data> 　　　　<RectangleGeometry Rect="{Binding VerticalLine1}"/> 　　</Path.Data> </Path> <Path x:Name="verticalLine1" Fill="{ThemeResource ApplicationForegroundThemeBrush}" Stroke="{ThemeResource ApplicationForegroundThemeBrush}" StrokeThickness="0.5"> 　　<Path.Data> 　　　　<RectangleGeometry Rect="{Binding VerticalLine2}"/> 　　</Path.Data> </Path>

?

四、圖片合成

先對涂鴉圖層進行縮放，這里可以用Fant、雙三次樣條插值等算法。然后根據涂鴉圖層和原圖層通透度進行合成。

?圖層合并的方法不一定正確，感覺上是這樣的：上層的通透度如果是0.7。那么合成后的像素就是 ：上層像素值 x 0.7 + 下層像素值 x （1-0.7） 。如果有多層圖層的話，從上至下依次進行合成。

　　　　 public static byte[] Combine(byte[] basesrc, byte[] floatsrc,int width, int height){byte[] retsrc = new byte[height * 4 * width];for (int x = 0; x < width; ++x){for (int y = 0; y < height; ++y){int[] color_float = getBGR(floatsrc, x, y, width);int alpha_float = GAP(floatsrc, x, y, width);int[] color_base = getBGR(basesrc, x, y, width);int alpha_base = GAP(basesrc, x, y, width);int R=0, G=0, B=0, A=0;if (alpha_base != 255){color_base[0] = color_base[1] = color_base[2] = alpha_base = 255;color_base[0] = (255 * (255 - alpha_float) + color_float[0] * alpha_base) / 255;color_base[1] = (255 * (255 - alpha_float) + color_float[1] * alpha_base) / 255;color_base[2] = (255 * (255 - alpha_float) + color_float[2] * alpha_base) / 255;alpha_base = 255;}if (color_float[0] == 0 && color_float[1] == 0 && color_float[2] == 0 && alpha_float == 0){B = color_base[0];G = color_base[1];R = color_base[2];A = alpha_base;}else{B = (color_base[0] * (255 - alpha_float) + color_float[0] * alpha_float) / 255;G = (color_base[1] * (255 - alpha_float) + color_float[1] * alpha_float) / 255;R = (color_base[2] * (255 - alpha_float) + color_float[2] * alpha_float) / 255;A = alpha_float+(255-alpha_float)*(alpha_base/255);A = A > 255 ? 255 : A;}putpixel(retsrc, x, y, width, R, G, B, A);}}return retsrc;}

?

GtiHub地址：https://github.com/LeoLeeCN/UWP_Toolkit

總結

以上是生活随笔為你收集整理的UWP图片编辑器（涂鸦、裁剪、合成）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。