h5 上 删除 交互_iH5高级教程：H5交互进阶，擦一擦效果

先行知识：事件、时间轴

重点控件：画图、事件、时间轴、擦除/绘画面积

知识点：

1、画图：画图工具可以在一定区域内随意涂鸦或用来制作擦一擦效果。点击画图工具图标，图线条颜色与线条宽度，也可以把画笔类型改成橡皮，擦掉之前的内容，保存之后，可以对此对象进行拖拽调整位置。

2、擦除/绘画开始：用户在案例里开始进行擦除动作/画图动作。

3、擦除/绘画结束：用户在案例里擦除动作/画图动作结束。

4、擦除/绘画长度：用户在案例里擦除/画图的线条总长度达到某个值。这个触发目标动作的长度值是可以自定义的，以像素为单位；注意：是用户已进行擦除/画图的长度是叠加计算的，例如设置长度为100px，那么当用户进行擦除动作时，无论是分别擦除了5条20px的线条，还是2条50px的线条或者1条100px的线条，这3个方式中任意一个都能使目标动作被触发。

5、擦除/绘画面积：用户在案例里已进行擦除/画图的面积达到整个擦除范围/画图范围的面积的某个百分比。面积的百分比通过调整“大小”选项的控制条来设置。例如设置“大小”为20%，那已擦除/画图的范围达到总范围的20%。

6、擦除/绘画次数：用户在案例里进行擦除/画图的次数达到设定的限定次数。例如：将“次数”选项的值设为2，那么当用户在规定的擦除/画图范围内进行擦除/画图的次数达到2次时，目标动作就会被触发。

7、手势擦除：用户在案例里进行擦除动作，达到设定擦除的大小和长度。此触发条件只对在编辑作品时“要模仿绘制手势解锁图案”等之类的画板对象起作用，擦除过程中只要不松手一直移动，则轨迹会一直进行计算(类似于一笔画)；例如：编辑作品时用画板在作品上画了一条直线，触发条件为手势擦除，设置了大小(擦除范围大小)和规定了长度(擦除轨迹的长度)，擦除的长度不超于设置的长度且同时擦除的范围达到了设定的大小或以上，目标动作就会被触发；否则，在不满足任意一个条件的情况下，目标动作都不会被触发；但是，如果只设置大小，不规定长度，则擦除轨迹的长度不会受限制，只要擦除范围达到设置的大小或以上，目标动作就会被触发。

8、手势擦除少于：用户在案例里进行擦除动作，不满足设定擦除的大小和长度。建议与手势擦除对应使用。此触发条件只对在编辑作品时“要模仿绘制手势解锁图案”等之类的画板对象起作用，擦除过程中只要不松手一直移动，则轨迹会一直进行计算；例如：编辑作品时用画板在作品上画了一条直线，触发条件为手势擦除少于，设置了大小(擦除范围大小)和规定了长度(擦除轨迹的长度)，擦除的长度不超于设置的长度且同时擦除的范围在设定的大小之内，目标动作就会被触发；否则，在不满足任意一个条件的情况下，目标动作都不会被触发；但是，如果只设置大小，不规定长度，则擦除轨迹的长度不会受限制，只要擦除范围在设定的大小之内，目标动作就会被触发。

重点事件：

触发对象：画图

触发条件：擦除绘画面积50%

目标对象：画图

目标动作：删除

触发对象：画图

触发条件：触发条件擦除绘画面积50%

目标对象：时间轴

目标动作：继续播放