美文网首页
【minitouch】如何实现拖拽效果

【minitouch】如何实现拖拽效果

作者: 打瞌睡的灰 | 来源:发表于2020-08-08 10:51 被阅读0次

背景:想利用minitouch实现拖拽的效果,开始的思路是直接从坐标1滑动到坐标2,但是运行后发现没有效果,后来终于解决了,因此把这个过程记录下来。


minitouch的命令格式

minitouch 可以实现点击、滑动、松开手指,基本命令如下:

d <contact> <x> <y> <pressure> 

示例输入: d 0 10 10 50 指在x=10,y=10,以压力50按压,并记录此为第contact=0个操作位置

m <contact> <x> <y> <pressure>

示例输入: m 0 10 10 50 指操作目标contact=0 使用pressure=50的压力原来坐标滑动到 x = 10,y =10

u <contact>

 示例输入:u 0 指松开contact =0的操作目标

w <ms>

示例输入:w 50,指立即等待 <ms> 毫秒

c

提交当前更改的触摸集,使它的在屏幕上播放。在提交之前,输入的命令不会有效果

minitouch实现拖拽效果

拖拽拆分,即点击坐标点a(x1,y1),滑动到坐标点b(y1, y2)然后松开,使用minitouch的命令写下来就

d 0 x1 y1 50

c

m 0 x1 y1 50

c

u

这是我第一阶段输入的命令,但是实际没有起到滑动的效果。打开开发者模式中的坐标,可以指示触摸轨迹的指针是有痕迹的,说明命令输入有效但是没有生效。

查了一下,看到一种思路就是将移动的路径拆分成几个小段,并在其中增加延时。所以把拖拽改成从起始位置到目标位置拆分10个中间节点,并且每个节点滑动过去后增加100毫秒的延时,在实现代码中如下

d_x = (x2 - x1)/10

d_y = (y2 - y1)/10

command = ""

command += "d 0 {} {} 50\\nc\\n".format(x1, y1)

for i in range(0, 10):

     command += "m 0 {} {} 50\\nc\\n".format(x1 + i * d_x, y1 + i * d_y)

    command += "w 100\\nc\\n"

command += "m 0 {} {} 50\\nc\\n".format(end_x, end_y)

command += "u 0\\nc\\n"

再次运行,即可正常进行拖拽了😄

参考文章:http://lm.432234.com/archives/1144.html

相关文章

  • 【minitouch】如何实现拖拽效果

    背景:想利用minitouch实现拖拽的效果,开始的思路是直接从坐标1滑动到坐标2,但是运行后发现没有效果,后来终...

  • 拖拽API

    实现拖拽效果 目前实现拖拽效果 HTML5拖拽 源元素事件例子 目标元素事件 从本地拖放图片到页面中 实现拖拽

  • HTML5实现拖拽

    实现拖拽效果源元素 - 要拖拽的文件目标元素 - 要拖拽到哪里去 目前实现拖拽效果使用原生DOM就能实现 - 最麻...

  • JS实现拖拽功能

    拖拽功能是我们日常项目中常用的效果,今天我们就来研究一下如何实现简单的拖拽功能。想实现拖拽功能其实很简单,主要需要...

  • HTML5拖拽drag

    通过拖拽实现页面元素的位置改变 实现拖拽效果 源元素 - 要拖拽的文件 目标元素 - 要拖拽到哪里去 目前实现拖拽...

  • 原生拖拽,拖放事件(drag and drop)

    拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的...

  • Flutter 仿QQ消息拖拽(贝塞尔曲线实现)

    Flutter 仿qq消息拖拽效果通过自定义view实现,效果如下 如果要实现最终的效果,首先绘制拖拽连接处的线(...

  • JavaScript拖拽效果

    要实现JavaScript的拖拽效果,首先我们需要知道事件对象几个有关于实现拖拽效果的坐标。 获取事件对象 var...

  • [Android] 仿网易新闻客户端分类排序

    效果图 先来看看网易新闻客户端以及自己实现的效果图,效果当然还是网易的好 如何实现拖拽一个Item 用Window...

  • HTML5拖拽上传

    传统拖拽效果小demohtml5实现拖拽小demo调查问卷小demo拖拽拼图小demo拖拽上传小demo h5拖拽...

网友评论

      本文标题:【minitouch】如何实现拖拽效果

      本文链接:https://www.haomeiwen.com/subject/zntrrktx.html