开赛先来说一下写那篇小说的初衷。

    初到来画,通读了来画 UWP App
的代码,发现中间确实有许多相比较高深的技术点,同时也是有好多难点的,扩大性,耦合,质量,功效等等。于是大家决定初叶重构这几个产品,做贰个全新的
“来画Pro” 出来,历经5个月的花花世界,那么些产品到底正式上架。
(做个小广告,在 Windows 应用集团搜索 “来画Pro”
就可以找到,如今商家定点为收费选拔,可是有一个月试用期,借使大家感兴趣,可以跟自身要免费代码。那里是
IT之家的通信:https://www.ithome.com/html/win10/324042.htm)。在落到实处了旧版
“来画” 全部工具效率的底子上,咱们落实了更加多的 Ink 画笔和 Dial
作用,更好的 SVG 解析和制图,更好的文字绘制进程,录制和 gif
图的插入等等。而写那篇作品,以及背后3个种种小说的初衷,就是想任何的追思一下
“来画Pro” 开发中利用到的技巧和遇到的标题,希望能享用给更加多对 UWP
和手绘视频有趣味的人。

 XML 1

现行言归正传,开头对 “来画Pro”
的顺序职能的落到实处形式和效用做回顾的享用,前面会有2个密密麻麻的稿子对每一个效用点做详细的求证。

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 截图:

XML 2

2. SVG 的辨析和制图

    如大家所明白的,SVG 是一种矢量图格式,差距于位图的是,它的组成是贰个XML,节点音讯包含了 path,stroke,fill 等,分别表示了 SVG
的门道,路径边框和填充规则。我们对 SVG 的操作,先是 SVG
的剖析和静态显示,再是基于 SVG
原有的不二法门组成和顺序,结合手绘习惯的依次,路径的总长度和制图总时长,在每一帧里决定显示哪部分门路,或填充哪一部分形象。来看一下施用中的落成效益,上面三张图呈现的是一个SVG 的绘图进度:

XML 3 XML 4 XML 5

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

    PNG/JPEG/BMP
等图片格式,有着不相同的削减和编码格式,但因为都属于位图,所以组成要素皆以像素,由3个width * height 的长短的数组来存储每一个像素点的像素值,像素值的整合大概是
AOdysseyGB/BGEvoque/YUV 等种种格式。因为位图是未曾门路的,默许我们不可以像 SVG
那样绘制出它的编写进程,
所以大家采纳了一种相对简便易行的渲染绘制方法:从图纸的三个角绘制到另3个角,比如左上角到右下角,保持平稳的快慢和样子,那样就由了下图的绘图进程。

    当然下边只是最简便残忍的拍卖措施,实际处境中,很多的 SVG
中不只含有路径,也会蕴藏位图。例如在 PS 里处理好一张图纸,然后导入到 AI
中,手动划出一部分路线,最终导出 SVG。那样的 SVG 正确的绘图进程,应该是以
AI 中路径,结合位图中对应地方的
Stroke,来绘制出来。大家在对位图的拍卖中,也足以投入让用户去形容路径的不二法门,丰裕展现形式。或然对位图做活动边缘勾勒,抠图操作等等,后边会进展详细分享。

XML 6 XML 7

4. 文字的剖析和制图

   
文字,是手绘视频里很关键的变现和表明格局,也是分析和制图进度中相对复杂的1个。在显然一种字体后,大家会在相应的书体
TTF
文件中取出相应的文字来显示,也得以得到表示文字具有边缘的路子数据。不过手绘视频中显示的措施,是描写字体的填写,而不是边缘;其余字体自个儿的边缘,是未曾其余顺序和公理的,只是简单的组成字体的边缘,所以我们须要对边缘路径做以下处理:

    取得边缘路径数据 ->
对路线中的点,逐点做横向或纵向的射线,记录全部相交的点集合 ->
边缘路径点集和交点集总计出中间点集 ->
对中间点集做健康文字的上到下/左到右的排序 -> 依据点距离做重新分组
-> 依据拍卖后的点集完结路径绘制。

XML 8 XML 9 XML 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之家的报导):

XML 11 XML 12

6. 手绘摄像中插入录制文件

   
手绘摄像中插入录像,可以让表现格局变得更其助长。常见的处境,在录像旁介下手绘人物素材,变成人在表明和独白;或在录制中参预贴纸或道具等,可以在视频旁或录像中动态变化,那样比仅仅的处理录像插手贴纸更增加,电视机节目中时常能看到;再如在手绘中插入录像,变成二个动态的背景等等。上边时其中一种情状:

    对于我们在先后中的处理,在操作和预览时,更多的时直接拔取了系统的
MediaElementPlayer
播放器。而在导出录像时,要求对插入摄像的帧做单独处理,还有对视频的音轨做处理。

XML 13 XML 14

7. 视频的变迁和导出

    在地点的要紧操作完毕后,大家需求把它导出成一个视频文件,如
mp3、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

相关文章

网站地图xml地图