UWP 手绘视频创作工具技术分享系列 - 位图的绘制

前面我们针对 SVG 的解析和绘制做了介绍,SVG 是图片的一种形式,而另一种很重要的图片是:位图,包括 png、jpeg、bmp 等格式。位图的基本规则是,组成的基本元素是像素点,由宽度 * 高度个像素组成,每个像素存储了一个点的颜色和位置信息,颜色信息可以是 ARGB、RGBA、BGR 或 YUV 等组成。在手绘视频中,位图也是一种很重要的表现形式,因为我们在网上下载的图片,或者自己拍摄的照片,都是位图形式,我们可以用它来做成相册类型的视频等等。下面看一个用户使用来画Pro制作的视频中的截图,用户制作的是一个旅游方面的视频,每个景点的图片都是位图,人物也有一部分位图,这就是位图在手绘视频中的一种表现形式:

 

下面来详细介绍一下位图在手绘视频中的普通绘制方式:

一般来讲,如果对于位图的处理会简单粗暴一些,就是采用一种默认的方式,而不是图片信息包含的路径数据(因为位图本身没有路径数据),来绘制位图,比如从位图的左上角开始,按照固定的间隔绘制直至位图的右下角完毕。绘制过程效果如下图:

  

我们看到上面一张 png 位图的绘制过程,从左上角开始,以某个角度的倾斜完成左到右的画笔描绘,而以另一个相近的角度完成从右到左的画笔绘制,最终到完成整个位图的绘制。而这整个过程的处理流程和示意图如下:

其中,初始化图片资源和动画路径数据,分别用到 CanvasBitmap 和 CanvasGeometry;而转换绘制动画路径的点集使用 CanvasGeometry.ComputePointOnPath(float distance),最终得到的 distance 就是绘制的总长度;而绘制过程使用的是 CompositeEffect。

以上是所谓简单粗暴的处理方式,作为一个 bige 高的专业工具,怎么可能没有专业的处理方式呢,往下看:

在应用内,我们提供了两种方式来获取位图的路径数据,一种是利用 OpenCV 获取图片的物体边缘数据,另一种是让用户自己定义想以怎样的路径描绘位图。

第一种很容易理解,首先膜拜一下 OpenCV,计算机视觉方面的神器,我们这里使用的就是 OpenCV 的边缘检测方法,它和图像平滑算法相反,是一种“高通滤波器”,去检测图像中像素跨度很大的点组成的边缘,例如物体景观的深度不连续,多面体表面方向的不连续,光照和阴影的临界,物体表面材质不一致的临界等,使用的方法有 Sobel,Laplacian 和 Canny,我们使用的是 Canny,效果如下图:

  

位图按照检测到的边缘路径一点点描绘出来,只有路径划过的地方才显示位图,这样就有了路径描绘的视觉感受。其实这也是画师在素材制作中一种很常见的方式,在 PS 中处理静态图片的特效,处理完成后保存导入到 AI 中,在静态图片上面描画透明路径,描绘完成后保存成 SVG 文件。这就是一种比较特殊的 SVG,包含了一张位图作为底图,而透明路径的作用,是在路径描绘时,显示路径对应位置的位图像素。

另外一种方式,更多的由用户自己来操作实现,相当于把我们的应用当作 AI,用户自己准备的静态图片,放到应用中进行上面所说的路径描绘,然后直接导入到应用内作为 SVG 使用。应用的界面和操作如下:

  

上面图1是用户操作界面,用户可以指定画笔的粗细来描绘路径,描绘完成后,会以图2到图3的过程来描述位图。如图1中我们指定的路径是先画头像的边框,再用粗的画笔描绘头像的填充,就如图2和图3的过程一样。

上述的两种处理方式,一个是由系统来检测位图的边缘,另一个是由用户来指定边缘,我们计划把两种方式结合在一起,先由系统检测,再由用户补充和纠正,这样可以减少用户操作的难度,因为有些位图的边缘会很复杂。另外系统检测的一个缺点就是,边缘路径是完全无序,没有分组的,就是说路径不会按照物体的区别分组绘制,也不会按照某个固定顺序绘制,这都需要我们后续再去处理,根据边缘路径的相连属性去分组,在根据方向上的某个顺序去处理排序,当然这还是一种简单粗暴的处理方法。更深一层的处理,应该是检测边缘时,识别物体分类,也就是物体是什么?然后根据这些信息分组和按照分类去排序。这些都是我们后面要做的事情。

位图的处理方式就介绍到这里了,如果大家有好的处理方法,或者有好的想法,欢迎联系我,感谢!

 

posted @ 2017-10-16 18:17  shaomeng  阅读(...)  评论(...编辑  收藏