UWP 手绘视频创作工具技术分享系列

开业先来说一下状这首文章的初衷。

    初到来画,通读了来画 UWP App
的代码,发现其间确实发诸多比大深的技术点,同时也是发生成百上千题目的,扩展性,耦合,性能,功能等等。于是我们决定开始重构这个活,做一个崭新的
“来作画Pro” 出来,历经三单月的人间,这个活到底正式达成架。
(做个小广告,在 Windows 应用商店搜索 “来写Pro”
就可以找到,目前店定点也收费用,但是有一个月试用期,如果大家感谢兴趣,可以与自身如果免费代码。这里是
IT之拙的通讯:https://www.ithome.com/html/win10/324042.htm)。在落实了旧版
“来作画” 所有工具功能的功底及,我们兑现了再度多的 Ink 画笔和 Dial
功能,更好之 SVG 解析和制图,更好之亲笔绘制过程,视频及 gif
图的插入等等。而写就首文章,以及背后一个系列文章的初衷,就是想任何的追思一下
“来画Pro” 开发中使到之艺以及遇的题目,希望会分享给再多对 UWP
和手绘视频发出趣味之人头。

 图片 1

现今言归正传,开始对 “来打Pro”
的各个职能的落实方式和力量做概括的分享,后面会产生一个文山会海的稿子针对性每个功能点举行详细的求证。

1. Win2D – 手绘视频渲染绘制的基本功

     Win2D 是根据 Windows Runtime 的 2D 图形 GPU 渲染 SDK,可以用当 UWP
、Windows Phone 和  Windows Runtime App 饱受, 编程语言可以是 C++、C# 或
VB,相信于 UWP 中品尝过图形渲染绘制的校友等,对 Win2D
都未会见生,毕竟自己自家软推荐的贯彻方式。 GitHub
地址:https://github.com/Microsoft/Win2D,微软官网地址:http://microsoft.github.io/Win2D/html/Introduction.htm,基础的用方法都好当里找到,另外官还提供了一个分外是的
Sample 供大家参考,在 Windows Store
也可下载:https://www.microsoft.com/zh-cn/store/p/win2d-example-gallery/9nblgggxwt9f?rtc=1,下面是
Sample 截图:

图片 2

2. SVG 的分析和制图

    如大家所了解的,SVG 是一致种矢量图格式,不同于位图的凡,它的构成是一个
XML,节点信息包括了 path,stroke,fill 等,分别代表了 SVG
的路,路径边框以及填充规则。我们本着 SVG 的操作,先是 SVG
的辨析和静态展示,再是依据 SVG
原有的途径组成和一一,结合手绘习惯的顺序,路径的毕竟长度和制图总时长,在各国一样帧里决定展示哪部分路线,或填充啊有相。来拘禁一下运用被之兑现效益,下面三摆图显示的是一个
SVG 的绘图过程:

图片 3 图片 4 图片 5

3. PNG/JPEG/BMP 等位图的绘图

    PNG/JPEG/BMP
等图片格式,有着不同的缩减和编码格式,但因为还属于位图,所以做元素还是像素,由一个
width * height 的长的数组来囤积每个像素点的如素值,像素值的做可能是
ARGB/BGR/YUV 等强格式。因为位图是无路子的,默认我们并未办法像 SVG
那样绘制有其的编写进程,
所以我们捎了相同种植相对简单的渲染绘制方法:从图纸的一个角绘制到其它一个竞赛,比如左上角顶右下角,保持安静之快慢及可行性,这样就算由于了下图的绘图过程。

    当然者才是绝简单易行粗暴的处理方法,实际状况被,很多底 SVG
中未单纯包含路径,也会含有位图。例如在 PS 里处理好同一摆放图,然后导入到 AI
中,手动划有一些路,最后导出 SVG。这样的 SVG 正确的绘图过程,应该是因
AI 中路径,结合各图中针对承诺位置的
Stroke,来绘制出。我们当对位图的处理着,也足以进入被用户失去描绘路径的方,丰富展现方式。或者对各项图做活动边缘勾勒,抠图操作等等,后面会开展详细分享。

图片 6 图片 7

4. 言的分析和制图

   
文字,是手绘视频里老重要之变现和表达方式,也是分析及制图过程遭到相对复杂的一个。在确定一种字体后,我们会于对应之书
TTF
文件被取出相应的文字来显示,也足以以到代表文字有边缘的门路数据。但是手绘视频中表现的点子,是形容字体的填写,而休是边缘;另外字体自身之边缘,是没有外顺序与规律的,只是略的成字体的边缘,所以我们得对边缘路径做以下处理:

    取得边缘路径数据 ->
对路线中的触及,逐点做横向或纵向的射线,记录有相交的点集合 ->
边缘路径点集和交点集计算起中间点集 ->
对中间点集做常规文字的上到下/左至右手的排序 -> 根据点距离做重新分组
-> 按照拍卖后的点集完成路径绘制。

图片 8 图片 9 图片 10

5. Ink 的绘图和 Surface Pen、Surface Dial 的采用

    Ink 笔迹,在 Windows 10
中有那个丰富的采取场景,如打图类,书写类,手绘视频类的应用。微软的 Windows
SDK 里提供了充分棒的 InkToolbar 和
InkCanvas,可以默认支持几种画笔的显现,如圆珠笔、钢笔、铅笔、荧光笔等。而我辈当手绘视频被待开的,就是拿
SDK
默认支持的静态展示,扩展为动态绘制的支持,以及导出视频中之支撑。像圆珠笔这种规则之笔尖,我们得以直接把
Ink
数据取出使用;而铅笔的墨粉效果、钢笔的笔触方向粗细和荧光笔的混色效果,则要团结做单独的处理了。后面会针对各级一样种画笔的拍卖做详细的上课,这里小不进行了。

    InkToolbar 和 InkCanvas 默认支持 Surface Dial 和 Surface Pen
的操作。而我辈的施用里对 Surface Dial
也做了还多扩大的支持,如选择颜色、选择画笔等。下面是 InkToolbar 和
InkCanvas 的平等张示意图和采取被运用 Surface Dial 的操作图(来自
IT之家的简报):

图片 11 图片 12

6. 手绘视频中插入视频文件

   
手绘视频中插入视频,可以吃表现形式变得愈加助长。常见的观,在视频旁加入手绘人物素材,变成人在解说和旁白;或于视频中在贴纸或道具等,可以以视频旁或视频被动态变化,这样比较单纯的处理视频在贴纸更增长,电视节目中经常会望;再使在手绘中插视频,变成一个动态的背景等等。下面时中同样种植现象:

    对于我们当次中之处理,在操作和预览时,更多之常常一直行使了系的
MediaElementPlayer
播放器。而以导出视频时,需要针对插入视频的轴做单独处理,还有针对性视频的音轨做处理。

图片 13 图片 14

7. 视频的变迁与导出

    在面的第一操作完后,我们得把它导出成一个视频文件,如
MP4、WMV。而此变化过程要包括了零星单部分:① 是以 Win2D
做后台的渲染操作,还原真实的渲染过程以及速度,按照指定的帧率把每一样帧位图保存下去;②
是利用类 FFMpeg
的方法,把帧序列按照指定帧率保存也视频,同时处理叠加背景音乐和插视频的音轨,完成视频文件生成。

 

   
到是结束,就完成了手绘视频的要元素解析、渲染、操作和视频导出的着力流程。今天之篇章先概括的牵线一下每个片的实现原理,后面会陆续对各国一个片段做详细的上课,尤其是
SVG 和
文字绘制方面,详细的规律同贯彻,以及支出过程遭到相见的各种题材,或协调的,或微软系统的。以及各种画笔的贯彻方式。

敬请期待,谢谢!

 

坐下面每首详细讲解的地点,持续创新:

UWP 手绘视频创作工具技术分享系列 – SVG
的辨析和制图 http://www.cnblogs.com/shaomeng/p/7476480.html 

UWP 手绘视频创作工具技术分享系列 – 文字的辨析及制图
http://www.cnblogs.com/shaomeng/p/7537979.html

UWP 手绘视频创作工具技术分享系列 – 手绘视频与视频的做
http://www.cnblogs.com/shaomeng/p/7594286.html

UWP 手绘视频创作工具技术分享系列 – Ink & Surface
Dial http://www.cnblogs.com/shaomeng/p/7634148.html

UWP 手绘视频创作工具技术分享系列 –
位图的绘图 http://www.cnblogs.com/shaomeng/p/7668523.html

UWP 手绘视频创作工具技术分享系列 –
手绘视频导出 http://www.cnblogs.com/shaomeng/p/7680210.html

UWP 手绘视频创作工具技术分享系列 – 有 AI
的手绘视频 https://www.cnblogs.com/shaomeng/p/8228491.html

UWP 手绘视频创作工具技术分享系列 – 全新的 UWP
来画视频 http://www.cnblogs.com/shaomeng/p/8228944.html