小程序中拖拽和缩放图片

需求:点击元素后选中,出现缩放按钮,拖动缩放按钮可实现元素的缩放;并且元素本身是可以拖动的。

html:

html 复制代码
  <block wx:for="{{imageControls}}" wx:key="index">
          <view hidden="{{item.hiddenModel}}" class='insertImg_item' style='transform: scale({{item.scale}});top:{{item.insertImgTop}}px;left:{{item.insertImgLeft}}px;z-index:{{levelNum[index]}}'>
            <view class='insertImg_box {{currentImgIndex == index ? "insertImg_active":""}}'>
              <image src='{{item.url}}' data-index='{{index}}' style='width:{{item.insertImgWidth}}px;height:{{item.insertImgHeight}}px;' bindtouchstart='imgTouchStart' catchtouchmove='imgTouchMove' bindtouchend='imgTouchEnd'></image>
              <image wx:if="{{currentImgIndex == index}}" class='delete_icon' src='/image/state_icon3.png' style='transform: scale({{item.oScale}});transform-origin:center;' data-index='{{index}}' bindtap='toDeleteImg'></image>
              <image wx:if="{{currentImgIndex == index}}" class='drag_icon' src='/image/scale_icon.png' style='transform: scale({{item.oScale}});transform-origin:center;' data-index='{{index}}' bindtouchstart='scaleTouchStart' catchtouchmove='scaleTouchMove' bindtouchend='scaleTouchEnd'></image>
            </view>
          </view>
        </block>

css:

css 复制代码
.insertImg_item {
  transform-origin: center;
  position: absolute;
  z-index: 100;
}
.insertImg_box {
  width: 100%;
  transform-origin: center;
  float: left;
  box-sizing: border-box;
  position: relative;
}
.insertImg_active {
  border: 4rpx solid #4672FF;
}
/* 删除按钮 */
.delete_icon {
  position: absolute;
  top: -20rpx;
  left: -20rpx;
  width: 40rpx;
  height: 40rpx;
  z-index: 99;
}
/* 缩放按钮 */
.drag_icon {
  position: absolute;
  bottom: -25rpx;
  right: -25rpx;
  width: 50rpx;
  height: 50rpx;
  z-index: 99;
}

js:

javascript 复制代码
  // 开始拖拽
  imgTouchStart(e) {
    let index = e.currentTarget.dataset.index
    this.activateComponent(index)
    initialImgArray[index].lx = e.touches[0].clientX;  // 记录点击时的坐标值
    initialImgArray[index].ly = e.touches[0].clientY;
    this.setData({
      imageControls: initialImgArray
    })
  },
  // 拖拽中
  imgTouchMove(e) {
    let index = e.currentTarget.dataset.index
    const { clientX, clientY } = e.touches[0];
    const dx = clientX - initialImgArray[index].lx;
    const dy = clientY - initialImgArray[index].ly;
    // 更新图片位置
    initialImgArray[index].insertImgLeft += dx;
    initialImgArray[index].insertImgTop += dy;
    initialImgArray[index].x += dx;
    initialImgArray[index].y += dy;
    // 更新 lx 和 ly
    initialImgArray[index].lx = clientX;
    initialImgArray[index].ly = clientY;
    // 更新数据
    this.setData({
      imageControls: initialImgArray
    });
  },
  // 拖拽结束
  imgTouchEnd(e) {
    console.log(e)
    let index = e.currentTarget.dataset.index
    //重新计算左上角的坐标(如果没有缩放需求,不需要写这段代码)
    const imageWidth = initialImgArray[index].insertImgWidth * initialImgArray[index].scale;
    const imageHeight = initialImgArray[index].insertImgHeight * initialImgArray[index].scale;
    initialImgArray[index].newInsertImgLeft = Math.round(initialImgArray[index].x - imageWidth / 2);
    initialImgArray[index].newInsertImgTop = Math.round(initialImgArray[index].y - imageHeight / 2);
    this.setData({
      imageControls: initialImgArray
    })
  },
  //开始缩放
  scaleTouchStart: function (e) {
    let index = e.currentTarget.dataset.index;
    let clientX = e.touches[0].clientX;
    let clientY = e.touches[0].clientY;
    // 记录触摸初始位置
    initialImgArray[index].touchX = clientX;
    initialImgArray[index].touchY = clientY;
  },
  //缩放中
  scaleTouchMove: function (e) {
    let index = e.currentTarget.dataset.index;
    let clientX = e.touches[0].clientX;
    let clientY = e.touches[0].clientY;
    // 获取当前元素的位置和大小信息
    let element = initialImgArray[index];
    // 计算手指移动的距离变化
    let diffX = clientX - element.touchX;
    let diffY = clientY - element.touchY;
    // 计算移动距离与初始元素宽高的比例变化
    let scaleChangeX = diffX / element.insertImgWidth;
    let scaleChangeY = diffY / element.insertImgHeight;
    // 设置缩放的灵敏度,根据需要调整
    let sensitivity = 0.9;
    // 计算新的缩放比例,这里可以根据X和Y方向的缩放变化来综合计算
    let newScale = element.scale + (scaleChangeX + scaleChangeY) * sensitivity;
    // 限制最小缩放比例
    if (newScale < 0.2) {
      newScale = 0.2;
    }
    // 更新元素的缩放比例
    element.scale = newScale;
    // 更新手指位置
    element.touchX = clientX;
    element.touchY = clientY;
    // 更新视图
    this.setData({
      imageControls: initialImgArray
    });
  },
  // 缩放完成
  scaleTouchEnd(e) {
    let index = e.currentTarget.dataset.index
    // 计算缩放后的图片宽高
    const imageWidth = initialImgArray[index].insertImgWidth * initialImgArray[index].scale;
    const imageHeight = initialImgArray[index].insertImgHeight * initialImgArray[index].scale;
    initialImgArray[index].scaleInsertImgWidth = imageWidth
    initialImgArray[index].scaleInsertImgHeight = imageHeight
    // 计算缩放后图片的坐标
    initialImgArray[index].newInsertImgLeft = Math.round(initialImgArray[index].x - imageWidth / 2);
    initialImgArray[index].newInsertImgTop = Math.round(initialImgArray[index].y - imageHeight / 2);
    this.setData({
      imageControls: initialImgArray
    })
    console.log(this.data.imageControls)
  },
    // 删除图片
  toDeleteImg(e) {
    let index = e.currentTarget.dataset.index
    initialImgArray.splice(index, 1);
    that.setData({
      imageControls: initialImgArray
    })
  },

效果图:

相关推荐
拼图20925 分钟前
微信小程序——skyline版本问题
微信小程序·小程序
mg6681 小时前
微信小程序入门实例_____打造你的专属单词速记小程序
微信小程序·小程序
程序员陆通2 小时前
Vibe Coding开发微信小程序实战案例
微信小程序·小程序·notepad++·ai编程
「、皓子~2 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
nbsaas-boot2 小时前
[特殊字符] 分享裂变新姿势:用 UniApp + Vue3 玩转小程序页面分享跳转!
小程序·uniapp·notepad++
老A技术联盟3 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
you45803 小时前
小程序学习笔记:使用 MobX 实现全局数据共享,实例创建、计算属性与 Actions 方法
笔记·学习·小程序
风铃喵游3 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
说私域3 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的抖音渠道力拓展与多渠道利润增长研究
人工智能·小程序·开源
MonkeyKing_sunyuhua4 小时前
微信小程序能不能获取物联网的上的设备数据
物联网·微信小程序·小程序