ifanr:微信小程序中实现手势缩放图片
2017-09-13 14:22
926 查看
在小程序中,image 组件的 mode 有 12 种,其中只有三种是缩放模式。而在这三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片。此模式是保证图片长边完整地显示出来,而手机屏幕宽度都较小,以 ip ...
在小程序中,image 组件的 mode 有 12 种,其中只有三种是缩放模式。而在这三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片。此模式是保证图片长边完整地显示出来,而手机屏幕宽度都较小,以 iphone 6 为例,仅有 375 px。因此在小程序中浏览横向的图片或尺寸较大的图片时,图片细节就难以查看清楚(如下图)。 因此能动态的通过手势缩放图片,就很有必要。大众比较熟悉的手势是类似 app 中的双指缩放,我们的目标也是在小程序中实现此效果。 爱范儿工程师在仔细研究微信小程序的所有事件后发现,可以通过 touchmove 事件来实现双指缩放图片。此技术的核心思想是根据两只手指相对距离的变化来对图片进行放大或缩小。因此只要能知道两只手指相对距离的变化,并能做到对图片的动态缩放,就能实现我们想要的功能。 在手指接触到屏幕并开始移动后,对应的组件上就会以约为 16ms(屏幕渲染频率) 一次的速度不断触发 touchmove事件,最后手指离开屏幕后,则会触发 touchend事件。 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)。 通过下面的方式就可以实现动态的更改图片的高宽 实现了图片的缩放之后,还需要一个容器存放图片,用 view组件包裹 image,并设置 overflow:scroll,即可以做到自由的缩放和浏览图片。 但是微信小程序中有一个更合适的组件: scroll-view,设置 scroll-x和 scroll-y为 true,在放大图片后,滑动浏览图片时拥有比较良好的浏览体验。 但是,目前版本(0.10.102800)中的 scroll-view组件还存在一个渲染上的 bug,偶尔会出现界面闪动的现象。而在双指缩放存在于 scroll-view中的图片,极易触发此 bug。此问题,暂时只能等待微信进行修复,或者放弃 scroll-view,即放弃更好的滑动浏览效果,而使用 view 组件。 你可以在这里发表自己的学习笔记及心得:http://www.wxapp-union.com/forum.php?mod=forumdisplay&fid=2,有问题也可以发在这里求助; |
相关文章推荐
- 微信小程序中实现手指缩放图片的示例代码
- AngularJS1.x学习(仿微信图片手势缩放效果实现)
- 微信小程序中实现首饰缩放图片
- 微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
- 如何实现手势缩放图片
- 微信小程序实现图片上传功能实例(前端+PHP后端)
- 微信小程序实现图片自适应(支持多图)
- 微信小程序实现图片上传功能
- 微信小程序实现图片懒加载的示例代码
- 微信小程序实现收藏与取消收藏切换图片功能
- 微信小程序图片选择、上传到服务器、预览(PHP)实现实例
- 微信小程序实现图片预加载组件
- Xamarin.iOS滑动视图上图片(视图)的缩放(双击手势实现缩放)
- 微信小程序 图片等比例缩放(图片自适应屏幕)
- Android手势控制实现缩放、移动图片
- [置顶] viewPager+photoView实现网络图片加载左右滑动+手势缩放功能+滑动到下一页其他页面恢复默认大小
- iOS用三个手势和仿射变换实现图片的旋转缩放移动效果(类iBooks教科书)
- 使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
- 微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应