小程序图片双指缩放

最新推荐文章于 2024-07-01 16:18:09 发布
最新推荐文章于 2024-07-01 16:18:09 发布
阅读量3k 收藏 3
点赞数 2
分类专栏： 微信小程序 文章标签： 双指缩放 互动视频 互动白板
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20059455/article/details/102701161
版权

文章目录

需求

项目需要做一个互动视频，需要提供白板功能，白板可以播放ppt，但是做ppt的人没考虑到手机屏幕的小，ppt很多的内容就看不清，所以，就需要把投屏的ppt放大。这里就需要用到双指缩放的能力。

小程序提供的图片缩放能力

  • 小程序 movable-area movable-view组件，这俩个组件提供了可移动区域能力，不仅仅图片可以在里面被缩放，移动，所有组件都可以，但是这个组件提供的缩放能力不能大于手机屏幕大小，这种功能就不符合需求。
  • 小程序有个图片预览的api wx.previewImage()接口，可提供完美的图片缩放能力，但是这种功能类似相册预览，调用后，会掉起原生组件，组断视频流的传输，所以这个接口也不符合需求。

自己实现的符合业务的图片缩放能力

经过多次尝试，最终最佳的解决方案就是，根据手势，自己实现图片缩放能力，这样，与项目兼容好，符合项目要求。接下来就是参考各种轮子，实现自己的轮子。

代码示例

1. 我们首先先建个组件名子 zoomImgByView

2. zoomImgByView.json

{  
	"component": true,
	"usingComponents": {}
}

3. zoomImgByView.wxss

空

4. zoomImgByView.html

<view style="width:{{view_width}}px;height:{{view_height}}px;overflow: hidden; position: relative;">
  <image
    id="mapImage"
    style="width:{{imgWidth}}px;height:{{imgHeight}}px;margin-top:{{marginTop}}px;margin-left:{{marginLeft}}px;"
    src="{{img_src}}"
    mode="aspectFit"
    catchload="_imgLoadEvent"
    catchtouchstart="_touchStartEvent"
    catchtouchmove="_touchMoveEvent"
    catchtouchend="_touchEndEvent"
    catchtouchcancel="_touchEndEvent" />
</view>

5. zoomImgByView.js

var lastTouchPoint = { x: 0, y: 0 };
var newDist = 0;
var oldDist = 0;
var app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 图片地址
    img_src: {
      type: String
    },
    // 可视区域的大小
    view_width: {
      type: String
    },
    view_height: {
      type: String
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    imgWidth:0,
    imgHeight:0,
    marginTop:0,
    marginLeft:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 图片加载完成方法
     */
    _imgLoadEvent: function (event) {
      this.setData({
        imgWidth: this.data.view_width,
        imgHeight: this.data.view_height,
        marginLeft: 0,
        marginTop: 0,
      })
    },
    /**
     * 触摸开始事件
     */
    _touchStartEvent: function () {
      lastTouchPoint = { x: 0, y: 0 }
      oldDist = 0
    },
    /**
     * 手指移动事件
     */
    _touchMoveEvent: function (e) {
      // 单指移动事件
      if (e.touches.length == 1) {
        if (lastTouchPoint.x == 0 && lastTouchPoint.y == 0) {
          lastTouchPoint.x = e.touches[0].clientX
          lastTouchPoint.y = e.touches[0].clientY
        } else {
          var xOffset = e.touches[0].clientX - lastTouchPoint.x
          var yOffset = e.touches[0].clientY - lastTouchPoint.y
          this.setData({
            marginTop: this.data.marginTop + yOffset,
            marginLeft: this.data.marginLeft + xOffset,
          })
          lastTouchPoint.x = e.touches[0].clientX
          lastTouchPoint.y = e.touches[0].clientY
        }
      }
      // 双指缩放事件
      if (e.touches.length == 2) {
        if (oldDist == 0) {
          oldDist = this._spacing(e);
        } else {
          newDist = this._spacing(e);
          if (newDist > oldDist + 1) {
            this._zoom(newDist / oldDist, e);
            oldDist = newDist;
          }
          if (newDist < oldDist - 1) {
            this._zoom(newDist / oldDist, e);
            oldDist = newDist;
          }
        }
      }
    },
    /**
     * 触摸事件结束
     */
    _touchEndEvent: function () {
      this._reboundAnimation();
    },
    /**
     * 计算x轴上的双指中心点比例
     */
    _calcXRatio: function (event) {
      var xRatio = ((event.touches[0].clientX + event.touches[1].clientX) / 2 - this.data.marginLeft) / this.data.imgWidth
      return xRatio
    },
    /**
     * 计算y轴上的双指中心点比例 注意是图片的中心点
     */
    _calcYRatio: function (event) {
      let max, min;
      if (app.globalData.systemInfo.screenHeight > app.globalData.systemInfo.screenWidth) {
        max = app.globalData.systemInfo.screenHeight;
        min = app.globalData.systemInfo.screenWidth;
      } else {
        min = app.globalData.systemInfo.screenHeight;
        max = app.globalData.systemInfo.screenWidth;
      }
      let top;
      if (app.globalData.systemInfo.deviceOrientation === 'portrait' ) {
        top = 0.75 * min + 35 + 42;
      } else {
        if (app.globalData.systemInfo.model.indexOf('iPad') > -1) {
          top = 0.03 * max;
        } else {
          top = (min - 0.421875 * max) / 2;
        }
      }
      var yRatio = ((event.touches[0].clientY + event.touches[1].clientY) / 2 - this.data.marginTop - top) / this.data.imgHeight
      return yRatio
    },
    /**
     * 双指缩放
     */
    _zoom: function (f, event) {
      var xRatio = this._calcXRatio(event)
      var yRatio = this._calcYRatio(event)
      if (this.data.imgWidth <= this.data.view_width && f < 1) {
        var ratio = this.data.view_width / this.data.imgWidth
        this.setData({
          imgWidth: this.data.imgWidth * ratio,
          imgHeight: this.data.imgHeight * ratio
        })
        return;
      }
      if (this.data.imgHeight <= this.data.view_height && f < 1) {
        var ratio = this.data.view_height / this.data.imgHeight
        this.setData({
          imgWidth: this.data.imgWidth * ratio,
          imgHeight: this.data.imgHeight * ratio
        })
        return;
      }
      this.setData({
        // 此处的ratio为双指中心点在图片的百分比
        marginLeft: this.data.marginLeft + xRatio * this.data.imgWidth * (1 - f),
        marginTop: this.data.marginTop + yRatio * this.data.imgHeight * (1 - f),
        imgWidth: this.data.imgWidth * f,
        imgHeight: this.data.imgHeight * f,
      })
    },
    /**
     * 计算两指间距
     */
    _spacing: function (event) {
      var x = event.touches[0].clientX - event.touches[1].clientX;
      var y = event.touches[0].clientY - event.touches[1].clientY;
      return Math.sqrt(x * x + y * y);
    },
    /**
     * 边界的回弹动画
     */
    _reboundAnimation: function () {
      if (this.data.marginTop > 0) {
        this.setData({
          marginTop: 0
        })
      }
      if (this.data.marginLeft > 0) {
        this.setData({
          marginLeft: 0
        })
      }
      if (this.data.marginLeft < 0 && (this.data.imgWidth - Math.abs(this.data.marginLeft)) < this.data.view_width) {
        this.setData({
          marginLeft: this.data.view_width - this.data.imgWidth
        })
      }
      if (this.data.marginTop < 0 && (this.data.imgHeight - Math.abs(this.data.marginTop)) < this.data.view_height) {
        this.setData({
          marginTop: this.data.view_height - this.data.imgHeight
        })
      }
    },
    // 强制图片宽高缩放为1
    initImgSize(size) {
      this.setData({
        imgWidth: size.x,
        imgHeight: size.y,
        marginLeft: 0,
        marginTop: 0,
      })
    }
  }
})

6. 使用

// 传入图片大小 和连接即可
<zoomImgByView id="zoomImg" class="whiteboard-img" img_src="{{showDocumentUrl}}" view_width="{{boardArea.x}}" view_height="{{boardArea.y}}"/>

要点

  1. 确定双指缩放中心点，xRatio yRatio,需要注意的是图片的中心点，不是屏幕的中心点，所以点的距离是到图片的边距，不是到屏幕的边距。
  2. 我们是通过margin 和 中心点来确定缩放后的图片位置移动。所以上边的中心点至关重要。
  3. 代码只是符合自己的项目需求，可参考代码实现自己的轮子。

演示

在这里插入图片描述

llxhzm
关注
专栏目录
微信小程序中实现双指缩放功能
weixin_49628108的博客
03-22 1619
微信小程序中实现的双指缩放功能
双指缩放canvas图片_小程序实现图片双指缩放
weixin_39923572的博客
12-20 2348
一：小程序实现图片双指缩放介绍1：大体思路监听图片加载完成 给图片初始化宽高 ▶ 双手指触发开始 计算两个手指坐标的距离 ▶ 双手指移动 计算两个手指坐标和距离 ▶ 根据探测到用户的手指距离变化，确定图片缩放倍数，然后根据倍数给图片赋值新的宽高进行缩放图片。2：需要的标签实现图片的缩放，需要一个容器存放图片。微信为视图组件提供了 scroll-view 和 view 两种容器。图片放大的情况下...
微信小程序movable-view移动图片和双指缩放
03-29
先从movable-view开始说起吧. movable-view是小程序自定义的组件.其描述为:”可移动的视图容器，在页面中可以拖拽滑动”. 官方文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html. 值得注意的是文档中有一段备注: “当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方
微信小程序自定义组件实现图片单指拖动双指缩放效果
03-18
一个小程序用的双指缩放组件，相关文章地址见博客《微信小程序使用自定义组件实现图片双指缩放效果》。(现在资源怎么不可以设置为不要积分了0.)
uniapp使用 movable-area movable-view 实现按双指中心位置缩放及拖拽功能
最新发布
HHH917的博客
07-01 827
uniapp 实现双指中心位置缩放及拖拽功能
微信小程序，从0到1实现图片的双指缩放和单指移动功能的代码分享
im_crazy_stone的博客
02-03 2259
（historyX ，historyY）， 记录触摸屏幕的实际坐标，记录这个坐标的原因是手指在屏幕上滑动时会先触发该事件，后触发手指移动的事件，正好记录下手动滑动屏幕的起始点，后面计算滑动距离时会用到该坐标值。// 出了 35 个像素块, 中心点落在其中某个块后，就对应的修改 left，top 的大小，达到以中心点为。// middleX， middleY 的值都为零，说明中心点还未初始化，那么就将双指间的中心点赋予它。// screenWidth - pWidth 之差决定了图片横向移动的最大距离。
微信小程序，图片双指放大缩小
04-26 2530
本文分析怎么在微信小程序实现双指缩放图片的功能。
微信小程序实现手指缩放移动图片
qq_36495140的博客
08-07 1917
微信小程序实现手指缩放移动图片 实现方式一：view子元素缩放、移动 通过监听父view的touch事件，单指touch move用于移动，双指touch move则用于缩放，通过transform:translate进行移动、transform:scale进行缩放。 wxml: <!--scale.wxml--> <view class="container"> <view class="tip"> <text>view子元素缩放、移动
微信小程序中图片自适应及双指缩放
Jarry007的博客
03-16 7538
思路 wx.chooseImage上传图片 wx.getImageInfo获取图片宽高等信息 bindtouchstart,bindtouchmove记录双指事件 通过双指移动的距离与初始距离的关系判断缩放 规定阈值，最大与最小缩放 开始操作 上传图片 由于上传的图片需要放大与缩小，所以我们首先要在style动态绑定width 和height，其次要设置overflow为scroll。 然后开...
微信小程序手势缩放图片
10-30
微信小程序手势缩放图片,移动查看组件,简单的配置直接可以使用
微信小程序canvas实现图片双指缩放和移动
skillart的专栏
01-19 634
csdn不能上传视频就算了，双指锚点缩放，适配高分辨率屏幕。
微信小程序单手实现图片的拖动、旋转、缩放
01-27
wx-drop 实现了微信小程序内单手对图片进行拖动、缩放、旋转 可以根据此原理进一步升级到对各种组件的拖动、缩放、旋转，不单单是图片 把项目克隆到本地，放在微信开发工具就可以了 新添加的图片合成功能 特别需要注意的是：本项目中使用的图片都是本地图片，如果使用线上图片的话，需要先下载到本地再继续使用合成功能！
微信小程序使用自定义组件实现图片双指缩放效果
大大大大大乔的博客
03-18 8190
导读   之前需要在小程序里实现对一张图片的单指拖动双指缩放效果。试了网上很多别人的代码已经微信自己的一些控件，基本双指缩放的时候都是会以左上角为原点进行缩放，而微信自己的那些控件使用的时候又比较有局限性（具体放弃原因已经忘了），效果不太理想。后来索性自己写了个组件来实现。 大概实现原理   单指移动很简单，主要就是通过控制&lt;image/&gt; 标签style中的margin-...
小程序通过计算两手指之间距离实现图片预览缩放移动
qq_45290368的博客
01-16 1003
小程序通过计算两手指之间距离实现图片预览缩放移动
微信小程序实现图片双滑缩放大小
weixin_30512785的博客
05-29 108
在做小程序开发的过程中，后端传来一张图片地图，需要实现双手指滑动，使图片缩放，最终得出了一下代码： js ：Page({ data: { touch: { distance: 0, scale: 1, baseWidth: null, baseHeight: null, scaleWidth: nu ... 【转】【小程序社区】 在做小程序开发的过程中，后端传来一张...
【微信小程序】参考官方 图片缩放拖挪（手指）
神创的博客
03-17 4023
参考：https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html问题来了：如何图片放入容器中？参考：百度：https://www.baidu.com/s?wd=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F+%E5%9B%BE%E7%89%87%E6%94%BE%E5%85%...
Web前端_配合swiper滑动插件实现同比例双指缩放图片
weixin_42137574的博客
08-12 2020
参考过的一篇文章：https://blog.csdn.net/gl0ry/article/details/56055414 html实例代码: 缩放的图片需要放在class 为list 的div里面 <!doctype html> <html> <head> <meta http-equiv="Content-Type" co...
小程序 canvas双指缩放图片
08-12
要在小程序的 canvas 中实现双指缩放图片的功能，你可以按照以下步骤进行操作： 1. 创建一个 canvas 组件，并设置好宽度和高度。 ``` <canvas id="myCanvas" style="width: 300px; height: 300px;"></canvas> ``` 2. 在小程序的 js 文件中获取到 canvas 组件的上下文对象。 ``` const ctx = wx.createCanvasContext('myCanvas'); ``` 3. 加载并绘制图片到 canvas 上。 ``` const imgPath = '图片路径'; // 替换为你的图片路径 wx.getImageInfo({ src: imgPath, success(res) { const imgWidth = res.width; // 图片原始宽度 const imgHeight = res.height; // 图片原始高度 // 计算图片缩放后的初始宽度和高度 const initialWidth = 300; const initialHeight = (imgHeight / imgWidth) * initialWidth; ctx.drawImage(imgPath, 0, 0, initialWidth, initialHeight); ctx.draw(); } }); ``` 4. 监听 canvas 组件的触摸事件，实现双指缩放功能。 ``` let touchStartDistance = 0; // 记录触摸开始时两指之间的距离 let scale = 1; // 记录当前缩放比例 wx.canvasTouchStart((e) => { if (e.touches.length >= 2) { const x1 = e.touches[0].x; const y1 = e.touches[0].y; const x2 = e.touches[1].x; const y2 = e.touches[1].y; // 计算两指之间的距离 touchStartDistance = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2); } }); wx.canvasTouchMove((e) => { if (e.touches.length >= 2) { const x1 = e.touches[0].x; const y1 = e.touches[0].y; const x2 = e.touches[1].x; const y2 = e.touches[1].y; // 计算两指之间的距离 const touchMoveDistance = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2); // 计算缩放比例 const newScale = touchMoveDistance / touchStartDistance; // 更新缩放比例 scale = newScale; // 清空 canvas ctx.clearRect(0, 0, 300, 300); // 根据缩放比例绘制图片 const newWidth = initialWidth * scale; const newHeight = initialHeight * scale; ctx.drawImage(imgPath, 0, 0, newWidth, newHeight); ctx.draw(); } }); ``` 请根据你的实际需求，将上述代码片段进行适当修改和组合。希望对你有所帮助！
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值