小程序中拖拽和缩放图片

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

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
    })
  },

效果图:

相关推荐
難釋懷2 小时前
微信小程序全局配置
微信小程序·小程序
Enti7c2 小时前
微信小程序核心知识点速览
微信小程序·小程序
2501_9159184115 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域16 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷16 小时前
第一个小程序
小程序
春哥的研究所16 小时前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld16 小时前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
今日热点17 小时前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
鸭鸭梨吖1 天前
微信小程序---下拉框
微信小程序·小程序
mon_star°1 天前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台