微信小程序中实现手指缩放图片_echarts在手机端无法缩放

微信,小,程序,中,实现,手指,缩放,图片,

60 浏览量更新于2023-04-28 评论收藏 48KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

微信小程序中实现手指缩放图片微信小程序中实现手指缩放图片

公司开发微信小程序，pm想实现如下需求：

用手指缩放图片。其实在实现这个需求以前，并不知道，微信公众号以及微信小程序里面有一个原生的api就自带这个特效，

而且微信朋友圈也是用的这个api。wx.previewImage，就是它。预览图片。除了不能预览开发环境的本地电脑的图片外，你手

机真机的图片，以及http服务器上的图片都是可以预览的，而且缩放功能做得很流畅。下面就说说如何用js来实现这个功能

吧。

文章里面的思路参考此文章：链接描述

先上源码，然后在逐步剖析：

Page({

data: {

touch: {

distance: 0,

scale: 1,

baseWidth: null,

baseHeight: null,

scaleWidth: null,

scaleHeight: null

}

touchstartCallback: function(e) {

// 单手指缩放开始，也不做任何处理

if(e.touches.length == 1) return

console.log('双手指触发开始')

// 注意touchstartCallback 真正代码的开始

// 一开始我并没有这个回调函数，会出现缩小的时候有瞬间被放大过程的bug

// 当两根手指放上去的时候，就将distance 初始化。

let xMove = e.touches[1].clientX - e.touches[0].clientX;

let yMove = e.touches[1].clientY - e.touches[0].clientY;

let distance = Math.sqrt(xMove * xMove + yMove * yMove);

this.setData({

'touch.distance': distance,

})

touchmoveCallback: function(e) {

let touch = this.data.touch

// 单手指缩放我们不做任何操作

if(e.touches.length == 1) return

console.log('双手指运动')

let xMove = e.touches[1].clientX - e.touches[0].clientX;

let yMove = e.touches[1].clientY - e.touches[0].clientY;

// 新的 ditance

let distance = Math.sqrt(xMove * xMove + yMove * yMove);

let distanceDiff = distance - touch.distance;

let newScale = touch.scale + 0.005 * distanceDiff

// 为了防止缩放得太大，所以scale需要限制，同理最小值也是

if(newScale >= 2) {

newScale = 2

}

if(newScale <= 0.6) {

newScale = 0.6

}

let scaleWidth = newScale * touch.baseWidth

let scaleHeight = newScale * touch.baseHeight

// 赋值新的 => 旧的

this.setData({

'touch.distance': distance,

'touch.scale': newScale,

'touch.scaleWidth': scaleWidth,

'touch.scaleHeight': scaleHeight,

'touch.diff': distanceDiff

})

bindload: function(e) {

// bindload 这个api是<image>组件的api类似<img>的onload属性

this.setData({

'touch.baseWidth': e.detail.width,

'touch.baseHeight': e.detail.height,

'touch.scaleWidth': e.detail.width,

'touch.scaleHeight': e.detail.height

})

}

})

wxml文件对应如下，就不做解释了：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38598745

粉丝: 3
资源: 924

会员权益专享

微信小程序中实现手指缩放图片

评论0

会员权益专享

最新资源

微信小程序中实现手指缩放图片

评论0

小程序实现图片移动缩放效果

微信小程序 图片缩放拖动

微信小程序自定义组件实现图片单指拖动双指缩放效果

微信小程序嵌入微信小程序怎么实现

微信小程序怎么实现 WebRTC

怎么在微信小程序中实现微信登录

微信小程序canvas实现图片拼接

微信小程序如何实现对esp8266进行远程控制

微信小程序和spring boot实现音乐播放器

微信小程序打开支付宝怎么实现

微信小程序 webrtc 怎么实现

微信小程序 WebRTC 怎么实现

外部链接到微信小程序怎么实现

微信小程序制作微博小程序

微信小程序怎么实现长按图片识别二维码

微信小程序中怎么固定背景图片

微信小程序实现图片点击放大缩放

微信小程序 是否可以加载 png图片

微信小程序实现个人主页

会员权益专享

最新资源

微信小程序图片缩放拖动

微信小程序是否可以加载 png图片