UWP图片编辑器(涂鸦、裁剪、合成)
***图片停止解析***
一、编辑器简介
写这个控件之前总想找一找开源的,可以偷下懒省点事。可是各种地方都搜遍了也没有找到。
于是,那就做第一个吃螃蟹的人吧!
控件主要有三个功能:涂鸦、裁剪、合成。
涂鸦:主要是用到了InkToolbar和InkCanvas。
裁剪:这个用到的比较复杂,源码会公布出来。
合成:将涂鸦图层按比例缩放到原图大小,然后两个图层进行合成。
本文GitHub地址:***链接停止解析***
二、涂鸦功能实现方法
这里为了省事用了一个别人写好的控件,主要是切换画笔、颜色方便。其实可以自己单独写控件的。
能用现成的就用现成的,少写好多行代码了。
Inktoolbar下载地址:***链接停止解析***
初始化Ink相关控件:
[mw_shl_code=csharp,false]<InkCanvas Name="ink_canvas">
<ink:InkToolbar x:Name="inktoolbar" ButtonHeight="60" ButtonWidth="60" ButtonBackground="Transparent" >[/mw_shl_code]
[mw_shl_code=csharp,false]ink_canvas.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Touch | CoreInputDeviceTypes.Pen;
inktoolbar.TargetInkCanvas = this.ink_canvas;[/mw_shl_code]
获取涂鸦方法:
1、从InkCanvas中获取:
这个获取的就是屏幕渲染出来的图片,也就是说图片基本都是被缩放过的。
优点:速度快。
缺点:图片是被放缩成控件大小的,不是原图的大小。比如原图是2880*1600的图,涂鸦过后取出来的图片就变成288*160的大小了。
[mw_shl_code=csharp,false]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);
}[/mw_shl_code]
2、图层合成
先获取ink图层,缩放至原图大小。然后将Ink图层和原图图层合并。缩放和合并算法的源码会在文章末尾。
优点:图片大小不改变,相当于是在原图上涂鸦。
缺点:计算复杂,比较耗时。
[mw_shl_code=csharp,false]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);[/mw_shl_code]
三、裁剪功能实现方法
在WPF中已经有很多前人写过的模板了,这里不需要做太多修改就可以使用。代码会在文章末尾给出
但是有一个问题在UWP中会引起卡顿现象。
剪裁的时候为了方便用户对齐,会将裁剪区域分成九宫格。
这时候想到了画四个矩形,但是这样子会卡顿,非常卡顿、非常卡顿、非常卡顿。
[mw_shl_code=csharp,false]<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}"/>[/mw_shl_code]
解决方案是画Path,由于绘图机制的原因,这样子就不会有卡顿现象,给用户如丝般润滑的感觉。
[mw_shl_code=csharp,false]<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>[/mw_shl_code]
四、图片合成
先对涂鸦图层进行缩放,这里可以用Fant、双三次样条插值等算法。然后根据涂鸦图层和原图层通透度进行合成。
图层合并的方法不一定正确,感觉上是这样的:上层的通透度如果是0.7。那么合成后的像素就是 :上层像素值 x 0.7 + 下层像素值 x (1-0.7) 。如果有多层图层的话,从上至下依次进行合成。
[mw_shl_code=csharp,false]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;
}[/mw_shl_code]
文章来自:MS-UAP 开发者交流群:53078485,期待你的加入!
为防止不可控的内容风险,本站已关闭新用户注册,新贴的发表及评论;
你现在看到的内容只是互联网用户曾经发表的言论快照,仅用于老用户留存纪念,且仅与科技行业相关,全部内容不代表本站观点及立场;
本站重新开放前已针对包括用户隐私、版权保护、信息安全、国家政策在内的各种互联网法律法规要求,执行了隐患内容的自查、屏蔽和删除;
本站目前所属个人主体,未有任何盈利安排与计划,且与原WFUN.COM所属公司不存在任何关联关系;
如果本帖内容或者相关资源侵犯到您的合法权益,或者您认为存在问题,那么请您务必点此举报或投诉!