点击播放腾讯视频教程

百度网盘

一、案例效果

《我画你猜》

我们看看效果示意图，从中可以发现“画板组件”具有的功能特点：

• 笔触效果，根据手势和书写速度，会有不同的笔锋效果；

• 画笔颜色设定、画笔粗细设定；

• 还可以生成图片、再配合动画效果，就也能画小人了。

二、应用场景

涂鸦是人类的天性，在H5中涂鸦，可以极大增强交互性、趣味性。

15年春节人民网的《写福字贺新春》，属于比较早这么玩的H5，结合春节热点、刷爆朋友圈；8月份，网易发布的《里约大冒险》，可以画小人互动，传播效果也非常惊人。因此Epub360 发布了 “画板组件”，派友们也可以玩了。

三、组件用法

基本用法

1.点击画板组件，添加到页面

2.添加到页面中就可以使用了，预览即可。可以设置颜色、画笔粗细、笔触效果。

高级用法

1.画板组件涂鸦的结果如果想要合成到海报中，需要借助一般图片。原理是，涂鸦生成的画面会保存到服务器，是不能直接作为一张图显示的，所以需要借助另外的一张图来显示画面。

2.单独添加一张图用来替换资源，这张替换图的尺寸比例，注意是比例，必须跟画板的尺寸比例一致，尺寸可以不一致。

3.替换资源的这个过程，不是自动的过程，需要借助一定的触发行为

4.如果替换图图参与截屏，直接将该图添加到截屏元素即可。有关截屏的内容，可以戳教程了解《截屏组件》。

5.如果需要这个替换图在别的页面显示或者参与截屏，可以先把画板的生成的内容资源赋值给全局变量，然后让全局变量帮忙暂时保管一下，全局变量的类型为【文本】类型。

6.设置画板完成时，转换成图片，赋值给全局变量。

7.到其他页面时，一般是用页面触发器替换资源，前提也是要在这个页面提前放一张跟画板尺寸比例一样的一张图，要不然全局变量不能显示。

8.跟画板相关的触发行为。在触发行为里，还有很多有关画板组件的触发操作，可以看下，根据视频教程了解使用。