UWP图片编辑器（涂鸦、裁剪、合成）

2021-07-24 12:38:26

一、编辑器简介

写这个控件之前总想找一找开源的，可以偷下懒省点事。可是各种地方都搜遍了也没有找到。

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

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

涂鸦：主要是用到了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="" ButtonWidth="" 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, );

renderTarget.SetPixelBytes(new byte[(int)ink_canvas.ActualWidth *  * (int)ink_canvas.ActualHeight]);

using (var fileStream = await file.OpenAsync(FileAccessMode.ReadWrite))

{

    await renderTarget.SaveAsync(fileStream, CanvasBitmapFileFormat.Png, 1f);

}

2、图层合成

先获取ink图层，缩放至原图大小。然后将Ink图层和原图图层合并。缩放和合并算法的源码会在文章末尾。

优点：图片大小不改变，相当于是在原图上涂鸦。

缺点：计算复杂，比较耗时。

CanvasDevice device = CanvasDevice.GetSharedDevice();

CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, (int)ink_canvas.ActualWidth, (int)ink_canvas.ActualHeight, );

renderTarget.SetPixelBytes(new byte[(int)ink_canvas.ActualWidth *  * (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(, SeekOrigin.Begin);

s.Write(inkpixel, , (int)ink_canvas.ActualWidth *  * (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中会引起卡顿现象。

剪裁的时候为了方便用户对齐，会将裁剪区域分成九宫格。

这时候想到了画四个矩形，但是这样子会卡顿，非常卡顿、非常卡顿、非常卡顿。

<Rectangle x:Name="horizontalLine" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding HorizontalLineCanvasTop}" Height="" Width="{Binding SelectedRect.Width}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/>

<Rectangle x:Name="verticalLine" Canvas.Left="{Binding VerticalLineCanvasLeft}" Canvas.Top="{Binding SelectedRect.Top}" Width="" Height="{Binding SelectedRect.Height}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/>

<Rectangle x:Name="horizontalLine1" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding HorizontalLine1CanvasTop}" Height="" Width="{Binding SelectedRect.Width}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/>

<Rectangle x:Name="verticalLine1" Canvas.Left="{Binding VerticalLine1CanvasLeft}" Canvas.Top="{Binding SelectedRect.Top}" Width="" 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 *  * width];

            for (int x = ; x < width; ++x)

            {

                for (int y = ; 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=, G=, B=, A=;

                    if (alpha_base != )

                    {

                        color_base[] = color_base[] = color_base[] = alpha_base = ;

                        color_base[] = ( * ( - alpha_float) + color_float[] * alpha_base) / ;

                        color_base[] = ( * ( - alpha_float) + color_float[] * alpha_base) / ;

                        color_base[] = ( * ( - alpha_float) + color_float[] * alpha_base) / ;

                        alpha_base = ;

                    }

                    if (color_float[] ==  && color_float[] ==  && color_float[] ==  && alpha_float == )

                    {

                        B = color_base[];

                        G = color_base[];

                        R = color_base[];

                        A = alpha_base;

                    }

                    else

                    {

                        B = (color_base[] * ( - alpha_float) + color_float[] * alpha_float) / ;

                        G = (color_base[] * ( - alpha_float) + color_float[] * alpha_float) / ;

                        R = (color_base[] * ( - alpha_float) + color_float[] * alpha_float) / ;

                        A = alpha_float+(-alpha_float)*(alpha_base/);

                        A = A >  ?  : A;

                    }

                    putpixel(retsrc, x, y, width, R, G, B, A);

                }

            }

            return retsrc;

        }

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

码农公寓

一、编辑器简介

二、涂鸦功能实现方法

三、裁剪功能实现方法

四、图片合成

相关文章