效果：
<template><view class="container"><view class="rotatable" ref="view" :style="{ left: dragLeft + 'px', top: dragTop + 'px', transform: `scale(${scale}) rotate(${currentRotation}deg)`, }"src="your-image-source.jpg" @touchstart="touchStart" @touchmove="touchMove"@touchend="touchEnd" @touchcancel="touchEnd"></view></view>
</template><script>export default {data() {return {/*** 缩放的变量--开始*/scale: 1, // 初始缩放比例dragLeft: 0, // 初始位置dragTop: 0,startX: 0, // 记录第一个触点的初始位置startY: 0,prevDistance: null, // 上次触点间的距离isScaling: false, // 是否正在进行缩放/*** 缩放的变量--结束*/ /*** 旋转的变量--开始*/initialTouches: [],currentRotation: 0,/*** 旋转的变量--结束*//*** 移动的变量--开始*/// 初始位置dragLeft: 0,dragTop: 0,// 记录触摸开始时的位置startX: 0,startY: 0,// 是否正在拖动isDragging: false,/*** 移动的变量--结束*/initialTouch1: null,initialTouch2: null,prevAngle: null, // 上次触点连线与水平线的夹角isRotating: false, // 是否正在旋转initialTouches: [], // 存储初始的两个触点位置lastTouches: [], // 存储上一帧的两个触点位置initialScale: 1, // 初始缩放比例initialRotation: 0, // 初始旋转角度isScaling: false, // 是否正在缩放isRotating: false, // 是否正在旋转}},onLoad() {},methods: {touchStart(e) {if (e.touches.length === 2) {// 记录初始的两个触点位置this.initialTouches = [{ x: e.touches[0].pageX, y: e.touches[0].pageY },{ x: e.touches[1].pageX, y: e.touches[1].pageY },];// 计算初始的缩放比例和旋转角度（这里简化处理，实际可能需要更复杂的计算）this.initialScale = 1; // 实际应用中，可以通过计算两指间距与元素初始大小关系得到this.initialRotation = 0; // 可以基于两指间向量计算初始角度} else if (e.touches.length === 1) {// 防止页面滚动e.preventDefault();this.isDragging = true;// 记录起始位置this.startX = e.touches[0].clientX;this.startY = e.touches[0].clientY;}},touchMove(e) {if (e.touches.length === 2) {this.lastTouches = [{ x: e.touches[0].pageX, y: e.touches[0].pageY },{ x: e.touches[1].pageX, y: e.touches[1].pageY },];// 计算缩放const currentDistance = this.getDistance(this.lastTouches[0], this.lastTouches[1]);const initialDistance = this.getDistance(this.initialTouches[0], this.initialTouches[1]);const scale = currentDistance / initialDistance;if (Math.abs(scale - this.initialScale) > 0.1) {this.isScaling = true;this.updateScale(scale);} else {this.isScaling = false;}// 计算旋转const currentRotation = this.getRotation(this.lastTouches[0], this.lastTouches[1], this.initialTouches[0], this.initialTouches[1]);const rotationDelta = this.initialRotation - currentRotation ;if (Math.abs(rotationDelta) > 5) {this.isRotating = true;this.updateRotation(rotationDelta);} else {this.isRotating = false;}} else if (e.touches.length === 1) {if (!this.isDragging) return;e.preventDefault();// 计算新的位置let newX = this.dragLeft + (e.touches[0].clientX - this.startX);let newY = this.dragTop + (e.touches[0].clientY - this.startY);// 更新位置this.dragLeft = newX;this.dragTop = newY;// 重置起始位置this.startX = e.touches[0].clientX;this.startY = e.touches[0].clientY;}// }},touchEnd() {// 清空初始触点，以便下一次操作this.initialTouches = [];this.isDragging = false;this.isScaling = false;this.isRotating = false;this.prevAngle = null;// 触摸结束时重置状态this.isScaling = false;this.isRotating = false;this.initialTouches = [];this.lastTouches = [];},// 辅助方法getDistance(point1, point2) {return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));},getRotation(touch1, touch2, initialTouch1, initialTouch2) {// 使用向量叉乘法计算角度变化，注意根据具体场景调整计算逻辑const vector1 = [touch2.x - touch1.x, touch2.y - touch1.y];const vector2 = [initialTouch2.x - initialTouch1.x, initialTouch2.y - initialTouch1.y];return Math.atan2(vector1[0]*vector2[1] - vector1[1]*vector2[0], vector1[0]*vector2[0] + vector1[1]*vector2[1]) * (180 / Math.PI);},calculateAngle(touch1, touch2) {const dx = touch2.x - touch1.x;const dy = touch2.y - touch1.y;return Math.atan2(dy, dx) * (180 / Math.PI); // 返回角度（度）},calculateAngleDifference(startTouches, currentTouches) {// 计算两个触点间向量的角度差const angle1 = Math.atan2(startTouches[1].y - startTouches[0].y, startTouches[1].x - startTouches[0].x);const angle2 = Math.atan2(currentTouches[1].y - currentTouches[0].y, currentTouches[1].x - currentTouches[0].x);// 返回角度差（转换为度）return (angle2 - angle1) * (180 / Math.PI);},updateScale(newScale) {// 应用缩放变换，例如改变样式或更新数据绑定的变量this.scale = newScale;},updateRotation(rotationDelta) {// 应用旋转变换，累计旋转角度const newRotation = this.initialRotation + rotationDelta;this.currentRotation = newRotation;},// 计算两点之间的距离calculateDistance(touches) {const dx = touches[0].pageX - touches[1].pageX;const dy = touches[0].pageY - touches[1].pageY;return Math.sqrt(dx * dx + dy * dy);},}}
</script><style scoped lang="scss">.container {position: relative;.rotatable{position: absolute;width: 200px;height: 200px;border: 1px solid red;}}
</style>
