微信下程序(手势滑动图片缩放)

柔光的暖阳◎ 2022-05-15 15:14 232阅读 0赞

**微信下程序(手势滑动图片缩放)组件**  
先看效果:  
![手势缩放图片并移动][20181030131810-8FlDtlpwf7.gif]

1.  下载组件 [手势缩放组件][Link 1]
2.  导入组件  
    连同文件复制到自己的项目中
3.  配置组件  
    在自己的页面总的json中如图配置  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbGUwOQ_size_16_color_FFFFFF_t_70]

{
      "usingComponents": {
        "zoomImg":"../libs/ZoomPreview/index"
      }
    }

![配置详解][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbGUwOQ_size_16_color_FFFFFF_t_70 1]

1.  引入组件  
    ![引入组件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbGUwOQ_size_16_color_FFFFFF_t_70 2]
2.  在wxjs中配置

let zoomId = this.selectComponent("#zoomId");let zoomId = this.selectComponent("#zoomId");
        let igPath = "../../../images/zoomImg.jpg";
        zoomId.setImgSrc(igPath);

**详解: \`zoomId.setImgSrc(igPath);//通过设置组件的预览图片地址  
注意: 如果是网络图片直接传图完整路径(路径+图片名+图片格式),如果是相对路径,必须是组件相对的图片路径**  
**如果不想下载那就复制粘贴自己写组价------->跟我来写**

![新建组件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbGUwOQ_size_16_color_FFFFFF_t_70 3]  
**.wxml 文件**

**.wxss 文件**

.img{
      width: 100%;
      height: 100%;
      background: white;
      text-align: center;
    }

**.js 文件**

Component({
      data: {
        stv: {
          zoom: false, //是否缩放状态
          distance: 0, //两指距离
          scale: 1, //缩放倍数
          imgPath: "../../../images/timg.jpg", //图片路径
        }
      },
      methods: {
        setImgSrc: function(imgPath) {
          this.setData({
            'stv.imgPath': imgPath,
          })
        },
        //事件处理函数
        touchstartCallback: function(e) {
          //触摸开始
          if (e.touches.length === 1) {
            let {
              clientX,
              clientY
            } = e.touches[0];
            this.startX = clientX;
            this.startY = clientY;
            this.touchStartEvent = e.touches;
          } else {
            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({
              'stv.distance': distance,
              'stv.zoom': true, //缩放状态
            })
          }
    
        },
        touchmoveCallback: function(e) {
          //触摸移动中
          if (e.touches.length === 1) {
            //单指移动
            if (this.data.stv.zoom) {
              //缩放状态，不处理单指
              return;
            }
            let {
              clientX,
              clientY
            } = e.touches[0];
            let offsetX = clientX - this.startX;
            let offsetY = clientY - this.startY;
            this.startX = clientX;
            this.startY = clientY;
            let {
              stv
            } = this.data;
            stv.offsetX += offsetX;
            stv.offsetY += offsetY;
            stv.offsetLeftX = -stv.offsetX;
            stv.offsetLeftY = -stv.offsetLeftY;
            this.setData({
              stv: stv
            });
    
          } else {
            //双指缩放
            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);
    
            let distanceDiff = distance - this.data.stv.distance;
            let newScale = this.data.stv.scale + 0.005 * distanceDiff;
            this.setData({
              'stv.distance': distance,
              'stv.scale': newScale > 1 ? newScale:1,
            })
          }
    
        },
        touchendCallback: function(e) {
          //触摸结束
          if (e.touches.length === 0) {
            this.setData({
              'stv.zoom': false, //重置缩放状态
            })
          }
        },
      }
    })

**.json 文件**

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

**--------------完-----------------运行试试**  
有什么问题及时提出,不吝赐教  
邮箱: [chaoqianhong@163.com][chaoqianhong_163.com]

[20181030131810-8FlDtlpwf7.gif]: https://zhitu.isux.us/assets/img/imgTest/IMG20181030/20181030131810-8FlDtlpwf7.gif
[Link 1]: https://download.csdn.net/download/male09/10752768
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbGUwOQ_size_16_color_FFFFFF_t_70]: /images/20220503/1529ee02165b4b41b754b666d465e9e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbGUwOQ_size_16_color_FFFFFF_t_70 1]: /images/20220503/bc13eda5ee13428a95e3412f41528b43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbGUwOQ_size_16_color_FFFFFF_t_70 2]: /images/20220503/b100a1d18c1645a683015de9bb657a88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbGUwOQ_size_16_color_FFFFFF_t_70 3]: /images/20220503/dfefde782a2649caafbe85ffec69319e.png
[chaoqianhong_163.com]: mailto:chaoqianhong@163.com