一、编辑器简介

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

于是,那就做第一个吃螃蟹的人吧!

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

涂鸦:主要是用到了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

UWP图片编辑器(涂鸦、裁剪、合成)的更多相关文章

  1. [UWP]如何实现UWP平台最佳图片裁剪控件

    前几天我写了一个UWP图片裁剪控件ImageCropper(开源地址),自认为算是现阶段UWP社区里最好用的图片裁剪控件了,今天就来分享下我编码的过程. 为什么又要造轮子 因为开发需要,我们需要使用一 ...

  2. [UWP]使用CompositionGeometricClip裁剪复杂图形及进行动画

    1. UWP中的其它裁剪方案 之前在 这篇文章 里,我介绍了如何使用UIElement.Clip裁剪UIElement的内容,使用代码如下: <Canvas> <Image Sour ...

  3. iOS视频录制裁剪合成

    网址链接: 视频裁剪合并:http://blog.sina.com.cn/s/blog_64ea868501018jx3.html 视频之定义裁剪高宽度:http://www.cocoachina.c ...

  4. [UWP]使用Picker构建应用内图片公共裁剪组件

    在上一篇博文<[UWP]如何实现UWP平台最佳图片裁剪控件>中我讲解了编写ImageCropper控件的过程及知识分享.在那篇文章里,我大言不惭的称其为UWP平台最佳图片裁剪控件(主要是没 ...

  5. WPF 中使用附加属性,将任意 UI 元素或控件裁剪成圆形(椭圆)

    不知从什么时候开始,头像流行使用圆形了,于是各个平台开始追逐显示圆形裁剪图像的技术.WPF 作为一个优秀的 UI 框架,当然有其内建的机制支持这种圆形裁剪. 不过,内建的机制仅支持画刷,而如果被裁剪的 ...

  6. [UWP]使用CompositionAPI的翻转动画

    1. 运行效果 在 使用GetAlphaMask和ContainerVisual制作长阴影(Long Shadow) 这篇文章里我介绍了一个包含长阴影的番茄钟,这个番茄钟在状态切换时用到了翻转动画,效 ...

  7. iOS CoreImage之滤镜简单使用

    代码地址如下:http://www.demodashi.com/demo/11605.html 老骥伏枥,志在千里 前记 最近一直在研究图像处理方面,既上一篇iOS Quart2D绘图之UIImage ...

  8. 在CorelDRAW中的自定义彩虹笔刷创建迷幻背景

    在60年代的艺术形式中,迷幻艺术对设计和图形艺术的影响尤为重要.在下面这个CorelDRAW教程中我们主要使用图形纸工具和艺术笔工具创建一个迷幻风格的背景,在这之前我们需要先创建出一个彩虹笔刷. 1. ...

  9. canvas基础简单易懂教程(完结,多图)

    目录 Canvas学习 一. Canvas概述 1.1 Hello world 1.2 Canvas的像素化 1.3 Canvas的动画思想 1.4 面向对象思维实现canvas动画 二.Canvas ...

随机推荐

  1. Yii2 事务操作

    官网关于Yii2 事务的说明文档 http://www.yiiframework.com/doc-2.0/guide-db-active-record.html Working with Transa ...

  2. XmlValidationHelper XSD、Schema(XmlSchemaSet)、XmlReader(XmlValidationSettings)、XmlDocument、XDocument Validate

    namespace Test { using Microshaoft; using System; using System.Xml; using System.Xml.Linq; class Pro ...

  3. Linux 线程管理

    解析1 LINUX环境下多线程编程肯定会遇到需要条件变量的情况,此时必然要使用pthread_cond_wait()函数.但这个函数的执行过程比较难于理解. pthread_cond_wait()的工 ...

  4. Chrome 中的彩蛋,一款小游戏,你知道吗?

    今天看到一篇文章,介绍chrome中的彩蛋,带着好奇心进去看了一眼,没想到发现了一款小游戏,个人觉得还不错,偶尔可以玩一下,放松放松心情!^_^ 当 Chrome 无法连接到互联网时, 或者上着网突然 ...

  5. locky勒索样本分析

    前段时间收到locky样本,分析之后遂做一个分析. 样本如下所示,一般locky勒索的先决条件是一个js的脚本,脚本经过了复杂的混淆,主要用于下载该样本文件并运行,. 解密 样本本身进行了保护,通过i ...

  6. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  7. 返水bug-中澳

    NOOK(Y) CSBFB(30000) off(N) QQ(2652880032) G(1) off1(Y) QQ1(3479301404) G1(1) off2(N) QQ2(309235846) ...

  8. 复利计算器(软件工程)及Junit测试———郭志豪

    计算:1.本金为100万,利率或者投资回报率为3%,投资年限为30年,那么,30年后所获得的利息收入:按复利计算公式来计算就是:1,000,000×(1+3%)^30 客户提出: 2.如果按照单利计算 ...

  9. Tsinsen A1493 城市规划(DP + CDQ分治 + NTT)

    题目 Source http://www.tsinsen.com/A1493 Description 刚刚解决完电力网络的问题, 阿狸又被领导的任务给难住了. 刚才说过, 阿狸的国家有n个城市, 现在 ...

  10. 词法分析程序(C)

    #include <stdio.h> #include <string.h> ],word[],ch; int type,p,i,n,sum; ]={"begin&q ...