微信小程序movable view移动图片和双指缩放实例代(2)

然而如果再支持双指缩放的话,movable-view实现不了.我暂没想出来怎么实现,如果有人知道,希望能够指点迷津. 主要原因是因为还是我上文提到的那句话:"movable组件加载成功后再去改变movable-view的大小,可移动区域是不会变的".缩放后图片大小肯定会改变的. 缩小还好,一旦放大,可移动区域还是原来的不会改变.想象一下,如果一张宽度刚刚好时屏幕可视宽度的图片,放大后,这张图片就只能在屏幕可视宽度windowWidth的范围中移动,看不到左也看不到右边超出的部分.

所以如果既要可移动图片又要可缩放,就不能用movable-view组件了,自己写个吧. 原来bindtouchmove会触发页面的滚动条,但是现在微信好像已经修复了这个BUG,我今天在真机上测试没有出现这个问题.

自定义控件resizePicModal.wxml:

<!-- 缩放 --> <template> <scroll-view catchtouchmove="bindTouchMove" catchtouchend="bindTouchEnd" bindtouchstart="bindTouchStart" > <view bindtap="closeResizeModal"> 取消预览 </view> <image catchtouchmove="bindTouchMove" bindtouchend="bindTouchEnd" bindtouchstart="bindTouchStart" mode="widthFix" src="https://www.jb51.net/{{img.currentSrc}}"></image> </scroll-view> </template>

JS: resizePicModal.js

/** * 使用方法: * 1) WXHTML要缩放的图片 必须 传入 src 以及绑定 bindtap事件, * e.g: * <image bindtap="toggleDtl" data-src="https://www.jb51.net/{{item}}" wx:for="{{productCard.arrImg}}" wx:key="*this" src="https://www.jb51.net/{{item}}" mode="widthFix"></image> * 2) WXHTML 要引入Modal模板(isCheckDtl无需再定义): * <view wx:if="{{isCheckDtl}}"> * <import src="https://www.jb51.net/components/resizePicModal/resizePicModal.wxml"/> * <template is="resizePic" data="{{img}}"></template> * </view> * 3) JS页面要引入JS文件,覆盖当前页面的事件: * var resizePicModalService = require ('../../components/resizePicModal/resizePicModal.js') * var resizePicModal = {} * 4) 在onLoad事件中,实例化ResizePicModal * resizePicModal = new resizePicModalService.ResizePicModal() */ var app = getApp() let modalEvent = { distanceList: [0, 0],//存储缩放时,双指距离.只有两个数据.第一项为old distance.最后一项为new distance disPoint: { x: 0, y: 0 },//手指touch图片时,在图片上的位置 imgIdList:{}, /** * 打开弹窗 */ showResizeModal: function (e) { var src = e.currentTarget.dataset.src; var x = 0 var y =0 try { var width = this.imgIdList[e.currentTarget.id].width; //图片原宽 var height = this.imgIdList[e.currentTarget.id].height; //图片原高 //小程序固定宽320px height = height * (320 / width); width = 320; x = (app.windowWidth - width) / 2 //> 0 ? (app.windowWidth - width) / 2 : 0; y = (app.windowHeight - height) / 2// > 0 ? (app.windowHeight - height) / 2 : 0; } catch (e) { } var img = { top: y, left: x, x: x, y: y, width: '100%', baseScale: 1, currentSrc: src, }; this.setData({ img: img, isCheckDtl: true }); }, /** * 关闭弹窗 */ closeResizeModal:function(){ this.setData({ isCheckDtl: false }) }, /** * 加载图片 */ imageOnload:function(e){ var id = e.currentTarget.id this.imgIdList[id] = { width:e.detail.width, height:e.detail.height } }, /** * bindtouchmove */ bindTouchMove: function (e) { if (e.touches.length == 1) {//一指移动当前图片 this.data.img.left = e.touches[0].clientX - this.disPoint.x this.data.img.top = e.touches[0].clientY - this.disPoint.y this.setData({ img: this.data.img }) } if (e.touches.length == 2) {//二指缩放 var xMove = e.touches[1].clientX - e.touches[0].clientX var yMove = e.touches[1].clientY - e.touches[0].clientY var distance = Math.sqrt(xMove * xMove + yMove * yMove);//开根号 this.distanceList.shift() this.distanceList.push(distance) if (this.distanceList[0] == 0) { return } var distanceDiff = this.distanceList[1] - this.distanceList[0]//两次touch之间, distance的变化. >0,放大图片.<0 缩小图片 // 假设缩放scale基数为1: newScale = oldScale + 0.005 * distanceDiff var baseScale = this.data.img.baseScale + 0.005 * distanceDiff if(baseScale>0){ this.data.img.baseScale = baseScale var imgWidth = baseScale * parseInt(this.data.img.imgWidth) var imgHeight = baseScale * parseInt(this.data.img.imgHeight) this.setData({ img: this.data.img }) }else{ this.data.img.baseScale = 0 this.setData({ img: this.data.img }) } } }, /** * bindtouchend */ bindTouchEnd: function (e) { if (e.touches.length == 2) {//二指缩放 this.setData({ isCheckDtl: true }) } }, /** * bindtouchstart */ bindTouchStart: function (e) { this.distanceList = [0, 0]//回复初始值 this.disPoint = { x: 0, y: 0 } if (e.touches.length == 1) { this.disPoint.x = e.touches[0].clientX - this.data.img.left this.disPoint.y = e.touches[0].clientY - this.data.img.top } } } function ResizePicModal(){ let pages = getCurrentPages() let curPage = pages[pages.length - 1] Object.assign(curPage, modalEvent)//覆盖原生页面事件 this.page = curPage curPage.resizePicModal = this return this } module.exports = { ResizePicModal }

业务页面wxml:引入自定义控件模板

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wydxfz.html