小程序中拖拽和缩放图片

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

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:

.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：

// 开始拖拽imgTouchStart(e) {let index = e.currentTarget.dataset.indexthis.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.indexconst { 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 和 lyinitialImgArray[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 = imageWidthinitialImgArray[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.indexinitialImgArray.splice(index, 1);that.setData({imageControls: initialImgArray})},

效果图：