phyTouch.js 跟canvas结合使用

官方github: https://github.com/AlloyTeam/PhyTouch

html:

        <div class="touch" style="width: 100%;height:100vh;"><canvas style="width: 100%;height: 100%;" id="canvas"></canvas></div>

使用场景比如一镜到底类型的H5，或者其他需要在固定一屏的canvas里展示很长的图片场景，或者需要在Canvas里模拟原生的滚动等等

 var phyTouch = new PhyTouch({
                    touch:".touch",//反馈触摸的dom
                    vertical: false,//不必需，默认是true代表监听竖直方向touch
                    target: { x: 0 }, //运动的对象
                    property: "x",  //被运动的属性
                    sensitivity: 1,//不必需,触摸区域的灵敏度，默认值为1，可以为负数
                    factor: 1,//不必需,表示触摸位移运动位移与被运动属性映射关系，默认值是1
                    moveFactor: 1,//不必需,表示touchmove位移与被运动属性映射关系，默认值是1
                    step: 45,//用于校正到step的整数倍
                    bindSelf: false,
                    maxSpeed: 1.5, //不必需，触摸反馈的最大速度限制 
                    value: 0,
                    
                    touchend:function(){
                        self.isTouch = false
                    },
                    pressMove:function(evt, value){ 
                        //这是监听触摸移动的方法，evt是移动的系数，可以判断方向。value就是移动的距离，跟change的value值是一样的，最大区别是change的值是带滑动惯性的，pressMove的值是不带的,所以要模拟原生滚动最好还是用change
                        
                    },
                   change:function(value){
　　　　　　　　　　　　　　//滑动的逻辑主要写在这里，value值就是在绑定的容器滑动的距离，只要是在容器上滑动了value都会改变，所以只需要将value赋值给canvas里需要滚动的元素
　　　　　　　　　　　　　　//主要问题是边界判断，change里的value是带惯性回弹的，不过惯性有点大，所以我一般会设置1.5秒左右的定时器，手动调用phyTouch.stop()停止惯性滑动
　　　　　　　　　　　　　　//如果滚动到了边界我们一般都会让视图停住了，比如滚动到底了，你再怎么滑动，视图都应该停住在最底部了。不过value值实际上是不会停止的，理论你只要滑动它就会改变，所以往回滚动的时候就会发生问题。因此我们在滚动到边界的时候，可以调用一下phyTouch.to(value, time, ease)方法，让value值重新跳回到边界的坐标。

                   },
                })