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

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

       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,这样就可以做到自由缩放和浏览图片。

       关于图片手势缩放的实现方法就先介绍到这里,如果还有哪些不明白的地方,可随时来电咨询,易速网络专业为您解答!

提供全面的搜索引擎优化学习交流,专注网站优化和搜索引擎营销推广服务。用专业的SEO技术为企业网站提升关键词排名,让你的网站不仅满足用户体验还要适合搜索引擎优化规则。
易速网站优化公司 » 小程序开发中图片如何实现手势缩放
享更多特权,立即登录下载海量资源
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡