.

15.画板组件:绘画/签字/书法/涂鸦

老赵发表于:2016年09月06日 23:16:49更新于:2021年10月22日 15:29:45

00160f671a5c71208be24708618dbd2

点击播放腾讯视频教程

百度网盘


一、案例效果

image.png

《我画你猜》


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

00157cedd33793e89d6e9e81bce6ecb

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

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

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


二、应用场景

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

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


三、组件用法

基本用法

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

blob.png


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

0015ca1ed9fde7035e908d5e99f691a


高级用法

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

0015ca1ee8bdb300967b53beb27de8f


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

0015ca1eeeec9793a7ab8b0632f1fd4


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

0015ca1efe644fd42947b97bdde8e4b


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


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

0015ca1f076c594ec2df98c045ad963


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

0015ca1f240b7be8aed4551b2d0534c


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

0015ca1f2bd184d1bbda47cce5e3b07


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

0015ca1f32485ab2b62539675c62498


--------- 不了解设计的程序员不是好客服 ---------------

回复(5)