uni-app 图片拖拽 旋转 缩放 功能实现

在uni-app中实现图片的拖拽、旋转和缩放功能，可以结合canvas组件和一些手势识别逻辑来完成。以下是一个简化的代码示例，展示了如何实现这些功能。请注意，这只是一个基础实现，实际应用中可能需要进一步优化和调整。

1. 创建页面结构

在pages/index/index.vue文件中，设置基本的页面结构，包含一个canvas组件和一些控制按钮（可选）。

<template>
  <view class="container">
    <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imagePath: '/static/your-image.png', // 图片路径
      image: null,
      context: null,
      // 图片状态
      imgX: 150,
      imgY: 150,
      imgScale: 1,
      imgRotate: 0,
      // 手势状态
      startX: 0,
      startY: 0,
      lastX: 0,
      lastY: 0,
      isDragging: false,
    };
  },
  onLoad() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      const ctx = uni.createCanvasContext('myCanvas');
      this.context = ctx;
      uni.getImageInfo({
        src: this.imagePath,
        success: (res) => {
          this.image = res.path;
          this.drawImage();
        },
      });
    },
    drawImage() {
      this.context.clearRect(0, 0, 300, 300);
      this.context.save();
      this.context.translate(this.imgX, this.imgY);
      this.context.rotate(this.imgRotate * Math.PI / 180);
      this.context.scale(this.imgScale, this.imgScale);
      this.context.drawImage(this.image, -this.imageWidth / 2, -this.imageHeight / 2, this.imageWidth, this.imageHeight);
      this.context.restore();
      this.context.draw();
    },
    // 省略手势监听和处理函数...
  },
};
</script>

2. 添加手势监听

在methods中添加手势监听和处理函数，包括触摸开始、移动和结束事件，用于更新图片的位置、旋转角度和缩放比例。

methods: {
  // ... initCanvas 和 drawImage 方法

  onTouchStart(e) {
    this.startX = e.touches[0].x;
    this.startY = e.touches[0].y;
    this.lastX = this.imgX;
    this.lastY = this.imgY;
    this.isDragging = true;
  },
  onTouchMove(e) {
    if (!this.isDragging) return;
    const deltaX = e.touches[0].x - this.startX;
    const deltaY = e.touches[0].y - this.startY;
    this.imgX = this.lastX + deltaX;
    this.imgY = this.lastY + deltaY;
    this.drawImage();
  },
  onTouchEnd() {
    this.isDragging = false;
  },
  // 省略旋转和缩放处理函数...
},

3. 绑定事件

在template中的canvas组件上绑定触摸事件。

<canvas 
  canvas-id="myCanvas" 
  style="width: 300px; height: 300px;" 
  @touchstart="onTouchStart" 
  @touchmove="onTouchMove" 
  @touchend="onTouchEnd">
</canvas>

以上代码提供了一个基本的框架，展示了如何在uni-app中实现图片的拖拽、旋转和缩放功能。实际应用中，你可能需要添加更多的手势识别逻辑，比如双指缩放和旋转，以及优化性能。