先行知识：事件、时间轴

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

知识点：

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

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

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

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

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

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

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

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

重点事件：

触发对象：画图

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

目标对象：画图

目标动作：删除

触发对象：画图

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

目标对象：时间轴

目标动作：继续播放

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

  1. 尚硅谷JavaScript高级教程(javascript实战进阶)学习笔记

    前言 这个是我学习过程中的笔记,分享给大家,希望对大家有用. 学习内容是尚硅谷JavaScript高级教程(javascript实战进阶),这里是视频链接. 我在前面有两篇对于web前端HTML和CS ...

  2. android与createjs交互,createjs高级教程：createjs与dom的协作

    今天这篇文章看名字是createjs与dom的协作,其实是createjs的游戏UI制作,非常重要,所以大家好好看. 一直以来大家用createjs都会有这样那样的问题,其中最难解决的就是什么?如果你 ...

  3. h5物体拖动_iH5高级教程：H5交互进阶，拖动物品效果

    1.选中糖图片对象,点击工具栏下的动效工具,为糖图片对象添加一个动效. 动效的属性设置,时长为1,动效类型为心跳,自动播放为YES,触发后延时为0,开始前隐藏为NO,播放次数为1次,循环播放为YES. ...

  4. ih5连接mysql数据库_iH5高级教程：H5数据应用，数据库基础

    1.选中舞台,点击工具栏下的图片工具,在舞台中画出一个矩形,添加一个空白的图片对象.右击图片对象,重命名为提交成功.开始要把图片对象前的小勾去掉,由事件来触发显示. 2.选中提交成功图片对象,点击工具 ...

  5. ih5连接mysql数据库_iH5高级教程：H5数据应用，多种数据的判断

    先行知识:事件.时间轴.数据库 重点控件:数据库.输入框.文本字段.事件 知识点: 1.输入为空:判断输入框是否为空,有两种判断方式(失焦时判断,提交数据库事件触发时判断) 2.长度大于(提交时判断) ...

  6. h5 修改title 微信_iH5中级教程：微信必备，为H5设定标题

    制作随机抽奖 1.选中页面,点击工具栏层工具,新建一个层,选中右键重命名为奖项.选中层,点击文本工具,在舞台上画一个框,填写文字.添加四个文本,分别为"谢谢惠顾"."一等 ...

  7. H5上传文件又双叒叕开测了！

    需求背景:为了方便用户上传自己手机内的本地视频,同时提高视频的分发量,故支持在移动端H5页面增加上传视频.音乐.图片. 原型图: 1.首页&上传素材空页面:     2.上传素材(有素材)&a ...

  8. 二十万字带你入门C语言-史上最强C语言教程（汇总篇）

    一.前言 至此,史上最强C语言教程系列已经全部完成,今天是给大家来做一个汇总,笔者目前已经完成了C语言阶段的学习,一直以来感谢大家的陪伴与支持,笔者后续还会继续更新C++.数据结构.Linux.Mys ...

  9. 微信中H5同层Video播放器接入教程

    微信中H5同层Video播放器接入教程 x5-video-player-type 启用H5同层播放器 通过video属性"x5-video-player-type"声明启用同层H5 ...

最新文章

  1. setAttibute和getParameter的区别
  2. C#中String对象转换为Font对象的方法
  3. BeetleX实现MessagePack和Protobuf消息控制器调用websocket服务详解
  4. 微型计算机中被处理信息称为,2011海南省计算机等级考试试题 二级C试题考资料...
  5. SpringCloud - 2. 服务注册 和 发现
  6. 最短路问题_Dijkstra算法
  7. Java NIO 详解（一）
  8. 毕设题目：Matlab心电信号
  9. 457.环形数组循环
  10. SingBoot集成JPA时单元测试报错：could not initialize proxy - no Session
  11. 英语语法自动矫正（nounplus）
  12. 软件测试好学吗？前期比较容易，后期有一定难度
  13. Mac技巧：新手必看Macbook快捷键使用大全
  14. 带遮挡效果的轮廓线(描边)在3D实时渲染中的一种实现
  15. 最常用的抖音直播话术大全，新手主播快收藏
  16. 制作openstack镜像（qcow2格式的win10系统）
  17. DHCPV6 开源代码如何获取device的MAC
  18. 百度搜索引擎接口测试报告
  19. 基于Joplin+PicGo+阿里OSS搭建自己的云笔记
  20. 数据库设计之物理结构设计

热门文章

  1. 微信小程序评论的实现
  2. Python Socket联机自动匹配双人五子棋（含登录注册系统与界面，数据库连接，可作结课作业，可用于学习）
  3. android计算器退格键,请问下计算器的退格键是哪个键？
  4. 服务器主板主要组成部分（个人笔记，请勿参考）
  5. Pathon简介和优势
  6. 【iOS】Ineligible Devices || “无法下载应用程序”
  7. STM32串口通信代码、ASCII码、XU4串口通信，printf只会转换为无符号类型，linux下的串口通信程序
  8. android 打开短信应用,通过短信打开手机应用
  9. notifier_call -----总结
  10. python、anaconda、jupyetr notebook的安装与配置