touch事件计算滑动距离

计算手势在手机屏幕上滑动时,手势滑动的距离,代码如下:

function wetherScroll(){
        var startX = startY = endX =endY =0;    
        var body=document.getElementsByTagName("body");
        body.bind('touchstart',function(event){
            var touch = event.targetTouches[0];
            //滑动起点的坐标
            startX = touch.pageX;
            startY = touch.pageY;
            // console.log("startX:"+startX+","+"startY:"+startY);

        });
        body.bind("touchmove",function(event){
            var touch = event.targetTouches[0];
            //手势滑动时,手势坐标不断变化,取最后一点的坐标为最终的终点坐标
                endX = touch.pageX;
                endY = touch.pageY;
                // console.log("endX:"+endX+","+"endY:"+endY); 
        })
        body.bind("touchend",function(event){

            var distanceX=endX-startX,
                distanceY=endY - startY;
               // console.log("distanceX:"+distanceX+","+"distanceY:"+distanceY);
               //移动端设备的屏幕宽度
               var clientHeight; =document.documentElement.clientHeight;
               // console.log(clientHeight;*0.2);
               //判断是否滑动了,而不是屏幕上单击了
               if(startY!=Math.abs(distanceY)){
 //在滑动的距离超过屏幕高度的20%时,做某种操作
                    if(Math.abs(distanceY)>clientHeight*0.2){
 //向下滑实行函数someAction1,向上滑实行函数someAction2
                    distanceY <0 ? someAction1():someAction2();
                }
               }
                startX = startY = endX =endY =0;
        })
    }
### STM32 TouchGFX框架中的滑动事件实现 在STM32 TouchGFX框架中,为了实现滑动事件,开发者可以利用内置的触摸手势识别功能。具体来说,在TouchGFX应用程序中可以通过配置特定的手势检测器来捕捉用户的滑动手势,并将其转换成相应的操作。 对于滑动事件的支持主要依赖于`SliderWidget`和自定义逻辑相结合的方式。当用户手指屏幕上移动时,系统会持续监测触控位置的变化并计算位移向量。一旦满足预设条件——比如最小滑动距离阈值被超过,则触发相应回调函数[^1]。 下面是一个简单的例子展示如何在一个页面内添加水平方向上的滑动效果: #### 创建一个新的C++源文件用于处理滑动逻辑 ```cpp #include <gui/main_screen/MainScreen.hpp> using namespace touchgfx; void MainScreen::handleSlideGesture(int deltaX, int deltaY) { // 如果横向偏移大于一定数值则认为发生了有效滑动 if (abs(deltaX) > SWIPE_THRESHOLD && abs(deltaY) < VERTICAL_DRIFT_TOLERANCE) { if (deltaX > 0) slideRight(); // 向右滑动动作 else slideLeft(); // 向左滑动动作 } } ``` 在此基础上还需要注册该方法作为触摸结束后的回调以便及时响应用户行为: ```cpp // 假定此代码位于MainScreen构造函数内部 setOnReleasedAction([this](PointerEvent& event){ handleSlideGesture(event.getDeltaX(), event.getDeltaY()); }); ``` 上述示例展示了基本原理;实际项目可能涉及更复杂的场景如多页间导航或是列表项滚动等,这时就需要进一步调整算法细节以适应需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值