十年专注于网站建设与互联网应用开发,低调、有情怀的网络应用服务商!
南昌百恒科技微信公众号 扫一扫关注
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒科技微信公众号

小程序开发中图片如何实现手势缩放

百恒科技 2019-01-03 14:56:50 760
       在南昌小程序开发过程中如果需要用到坐标示意图的话,我们会发现在几寸的手机屏幕上是很难完整显示出来的,并且很难看清细节。因此,如果要在小程序中展示带有细节信息的图片,就需要为其加上缩放功能。而用双指张合手势进行缩放,是大部分智能手机用户都已经习惯了的缩放方法。今天小编就为大家简单介绍一下有关手势缩放功能的实现方法,希望对大家有所帮助!

小程序开发中图片如何实现手势缩放

       touchmove 事件所包含的事件对象中有一个 touches 属性,此属性为当前停留在屏幕中的触摸点信息的数组。触摸点的信息包括 identifier、pageX / pageY、clientX / clientY。通过 clientX / clientY 可确定手指在屏幕上的位置。

       xMove = e.touches[1].clientX - e.touches[0].clientX;
       yMove = e.touches[1].clientY - e.touches[0].clientY;
       distance = Math.sqrt(xMove * xMove + yMove * yMove);

       distance 即为两只手指之间的距离。将此距离储存下来,下一次 touchmove 被触发的时候,再计算一次 distance。distanceDiff(newDistance - oldDistance) 即为两次 touchmove 触发的间隔间两个手指相对距离的变化值。此值为正数时,表示两指间距离在变大,即需要放大图片,反之则为需要缩小图片。

       下面则需要确定一个规则,将distance的变化值与图片放大或缩小的变化率关联起来。我们将图片正常显示时的尺寸定为基准值,即baseWidth 和 baseHeight,图片需要放大的倍数为scale,scale 的初始值和最小值为 1,大值可根据需要来设置。

       公式如下:
       newScale = oldScale + 0.005 * distanceDiff

       此公式中的 0.005 为图片的缩放比例。在实测中,使用0.005这个值可获得比较良好的缩放体验。

       通过上面的步骤,图片上加上touchmove事件后,每次touchmove被触发后,我们都可以计算出新的图片需要被放大的倍数 scale。即每次 touchmove 被触发后,都可以得到一组图片被放大后的高宽值:scaleWidth(scale * baseWidth)、scaleHeight(scale * baseHeight)。

       通过下面的方式就可以实现动态的更改图片的高宽
       image class="image" style="width:{{ scaleWidth }}px; height:{{ scaleHeight }}px",注:记得带上<>。

       实现图片缩放后,还需要一个容器存放图片,可以用view组件包裹image,并设置overflow:scroll,这样就可以做到自由缩放和浏览图片。

       关于图片手势缩放的实现方法就先介绍到这里,如果还有哪些不明白的地方,可随时来电咨询,百恒网络专业为您解答!
400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
备案专线 备案专线
 
售后服务 售后服务
 
×