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的过程一样。

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端那些事

理解标准盒模型和怪异模式&box-sizing属性

盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题)

1200
来自专栏数据小魔方

怎么“调教”你的柱形图!!!

今天给大家讲解的技巧,是如何设置柱形图和条形图的数据条之间间距问题! ❖❖❖❖❖❖ 或许平时作图时,大部分人都没有在意过柱形图的间距是否会影响图表的美观、专业性...

2545
来自专栏小白课代表

有了它,图片放大100倍不是梦

1794
来自专栏数据小魔方

蝴蝶图(升级版)

今天跟大家分享的是另一种升级版的条形蝴蝶图! ▽▼▽ 之前曾出过一期关于蝴蝶图的教程,是一个关于Facebook、Twitter用户年龄分布的图表,今天之所以还...

3206
来自专栏CDA数据分析师

这么漂亮的Excel图表,年终总结就用它了!

作者 罂粟姐姐 最近在某份研究报告中见到了这样一个图表: 看到它的瞬间,有一种看见美女惊为天人的感觉。很精致,很别致,让整个报告显得特别上档次。 所以,今天...

1919
来自专栏Android群英传

花式实现图片3D翻转效果

1641
来自专栏Material Design组件

Material Design — 分隔线(Dividers)

33612
来自专栏腾讯社交用户体验设计

打造高大上的Canvas粒子动画

3253
来自专栏数据小魔方

think-cell chart系列8——百分比堆积面积图

今天跟大家分享的是think-cell chart系列的第8篇——堆积面积图。 实在是没有找到合适的案例图,所以今天就一步一步自己做案例了。 作图表先要有数据...

3286
来自专栏PPV课数据科学社区

数据分析系列剧第五集:用户满意度研究(二)

本文续数据分析系列剧第五集:用户满意度研究(一)。 经过一周的调研,小蔡回收了问卷,并将问卷数据录入到SPSS中,在老刘的帮助下制作四分图,具体操作步骤如下: ...

4087

扫码关注云+社区