MyException - 我的异常网
当前位置:我的异常网» WinRT Metro » UWP 手绘视频作品工具技术分享系列

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

www.MyException.Cn  网友分享于:2013-10-16  浏览:0次
UWP 手绘视频创作工具技术分享系列

开篇先来说一下写这篇文章的初衷。

    初到来画,通读了来画 UWP App 的代码,发现里面确实有很多比较高深的技术点,同时也是有很多问题的,扩展性,耦合,性能,功能等等。于是我们决定从头重构这个产品,做一个全新的 “来画Pro” 出来,历经三个月的世间,这个产品终于正式上架。 (做个小广告,在 Windows 应用商店搜索 “来画Pro” 就可以找到,目前公司定位为收费应用,但是有一个月试用期,如果大家感兴趣,可以跟我要免费代码。这里是 IT之家的报道:https://www.ithome.com/html/win10/324042.htm)。在实现了旧版 “来画” 所有工具功能的基础上,我们实现了更多的 Ink 画笔和 Dial 功能,更好的 SVG 解析和绘制,更好的文字绘制过程,视频和 gif 图的插入等等。而写这篇文章,以及后面一个系列文章的初衷,就是想全方位的回顾一下 “来画Pro” 开发中使用到的技术和遇到的问题,希望能分享给更多对 UWP 和手绘视频有兴趣的人。

 

现在言归正传,开始对 “来画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. SVG 的解析和绘制

    如大家所了解的,SVG 是一种矢量图格式,不同于位图的是,它的组成是一个 XML,节点信息包括了 path,stroke,fill 等,分别代表了 SVG 的路径,路径边框和填充规则。我们对 SVG 的操作,先是 SVG 的解析和静态展示,再是根据 SVG 原有的路径组成和顺序,结合手绘习惯的顺序,路径的总长度和绘制总时长,在每一帧里决定展示哪一部分路径,或填充哪一部分形状。来看一下应用中的实现效果,下面三张图显示的是一个 SVG 的绘制过程:

  

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

    PNG/JPEG/BMP 等图片格式,有着不同的压缩和编码格式,但因为都属于位图,所以组成元素都是像素,由一个 width * height 的长度的数组来存储每个像素点的像素值,像素值的组成可能是 ARGB/BGR/YUV 等多种格式。因为位图是没有路径的,默认我们没办法像 SVG 那样绘制出它的创作过程, 所以我们选择了一种相对简单的渲染绘制方法:从图片的一个角绘制到另一个角,比如左上角到右下角,保持稳定的速度和方向,这样就由了下图的绘制过程。

    当然上面只是最简单粗暴的处理方法,实际场景中,很多的 SVG 中不只包含路径,也会包含位图。例如在 PS 里处理好一张图片,然后导入到 AI 中,手动划出一些路径,最后导出 SVG。这样的 SVG 正确的绘制过程,应该是以 AI 中路径,结合位图中对应位置的 Stroke,来绘制出来。我们在对位图的处理中,也可以加入让用户去勾勒路径的方式,丰富展现方式。或者对位图做自动边缘勾勒,抠图操作等等,后面会展开详细分享。

 

4. 文字的解析和绘制

    文字,是手绘视频里很重要的展现和表达方式,也是解析和绘制过程中相对复杂的一个。在确定一种字体后,我们会在对应的字体 TTF 文件中取出相应的文字来展示,也可以拿到代表文字所有边缘的路径数据。但是手绘视频中展现的方式,是描绘字体的填充,而不是边缘;另外字体自身的边缘,是没有任何顺序和规律的,只是简单的组成字体的边缘,所以我们需要对边缘路径做以下处理:

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

  

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之家的报道):

 

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

    手绘视频中插入视频,可以让表现形式变得更加丰富。常见的场景,在视频旁加入手绘人物素材,变成人在解说和旁白;或在视频中加入贴纸或道具等,可以在视频旁或视频中动态变化,这样比单纯的处理视频加入贴纸更丰富,电视节目中经常能看到;再如在手绘中插入视频,变成一个动态的背景等等。下面时其中一种场景:

    对于我们在程序中的处理,在操作和预览时,更多的时直接利用了系统的 MediaElementPlayer 播放器。而在导出视频时,需要对插入视频的帧做单独处理,还有对视频的音轨做处理。

 

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

5楼ExperDot
哈,看来我博客里的的自动画画算法可以用于这方面的应用
Re: shaomeng
@ExperDot,赞!用户的创作,结合自动绘画,这也是我们想要做的事情。
4楼盘诚
markmarkmark
3楼郑明
好。。
2楼dino.c
赞一个
1楼其实我不笨
mark

文章评论

每天工作4小时的程序员
每天工作4小时的程序员
一个程序员的时间管理
一个程序员的时间管理
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
 程序员的样子
程序员的样子
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
那些争议最大的编程观点
那些争议最大的编程观点
旅行,写作,编程
旅行,写作,编程
程序员都该阅读的书
程序员都该阅读的书
程序员的鄙视链
程序员的鄙视链
我的丈夫是个程序员
我的丈夫是个程序员
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
老程序员的下场
老程序员的下场
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
程序员必看的十大电影
程序员必看的十大电影
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
我是如何打败拖延症的
我是如何打败拖延症的
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
代码女神横空出世
代码女神横空出世
漫画:程序员的工作
漫画:程序员的工作
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
10个调试和排错的小建议
10个调试和排错的小建议
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
程序员应该关注的一些事儿
程序员应该关注的一些事儿
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序员和编码员之间的区别
程序员和编码员之间的区别
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
编程语言是女人
编程语言是女人
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
中美印日四国程序员比较
中美印日四国程序员比较
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有