movePoint.x = curPos.x + touch.pageX - startPoint.x;这公式不太理解

movePoint.x = curPos.x + touch.pageX - startPoint.x;这公式不太理解

问题描述:

为什么要加上curPos.x,这里不太理解

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2023-02-01 13:26:54

同学你好,可以参考如下解析理解:

第一次移动的时候看着和curPos.x位置没关系,但是第二次以及后面移动的时候就有关系了。

translate3d值是移动的距离,例如第一次移动到如下位置

https://img1.sycdn.imooc.com//climg/62aa9dcd09b13d3013610338.jpg

第二次移动的值是在原来移动值的基础上增加的,不是从0重新开始

https://img1.sycdn.imooc.com//climg/62aa9dde09b4f1f013300334.jpg

所以第二次移动后的位置应该第一次移动的movePoint.x+第二次移动的movePint.x的和,如下图:

https://img1.sycdn.imooc.com//climg/62aa9d570948c6e910010422.jpg

这样计算会简单一些,第二次移动后的touch.pageX-第二次开始移动的startPoint.x就是第二次移动后的movePoint.x 。然后再加上第一次移动后的movePoint.x,也就是curPos.x值。

在移动停止事件中赋值了,所以第二次移动中的curPos.x值也就是第一次移动的距离movePoint.x

https://img1.sycdn.imooc.com//climg/62aa9e8309672b1e04460114.jpg

祝学习愉快!


  • 提问者 啊聪聪 #1

    元素移动curPos.x会变化,移动距离(touch.pageX-startPoint.x所以要加上之前的curPos.x,才是元素最终的位置

    2023-02-01 14:52:47
  • 一个问题。 moveHandler里面的startPoint, 是会跟着touchmove变动吗? 还是说 在startHandle里面固定了?


    2023-03-13 08:01:20
  • 问题解答如下:

    1、在移动过程中的startPoint不会跟随变化。

    2、移动结束后,会重新计算下一次要移动的startPoint。

    祝学习愉快~

    2023-03-13 10:01:27
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师