小程序中canvas的拖拽功能详解

1. 什么是canvas

Canvas是HTML5新增的一个元素，它可以用来制作很多动态效果，如图形绘制、图片处理、动画效果等。它有一个非常重要的属性叫做Context，可以用它来操作图形绘制，比如画线条、描边、填充、设置阴影等。另外，canvas的大小是可以自己设置的。通常情况下，canvas宽和高使用CSS指定，但它也可以通过JavaScript来设置。

2. 小程序中使用canvas

在小程序中使用canvas，需要使用小程序的Canvas组件。在WXML模板中，使用<canvas/>标签来声明。以下是一个简单的示例：

<canvas id="myCanvas" style="width: 300px; height: 300px;" />

在JS文件中，可以使用wx.createCanvasContext(canvasId)方法来创建一个上下文，通过这个上下文可以操作canvas。

const ctx = wx.createCanvasContext('myCanvas');
ctx.setFillStyle('red');
ctx.fillRect(10, 10, 150, 75);
ctx.draw();

上面的代码演示了如何在canvas上绘制一个红色的矩形。

3. 实现canvas拖拽

3.1 获取手指触摸的位置

为了实现拖拽，我们需要知道手指触摸在canvas上的位置。在小程序中，可以通过bindtouchstart、bindtouchmove和bindtouchend等事件来获取手指的触摸位置和状态。这些事件都会携带一个TouchEvent对象，其中包含了手指的触摸位置等信息。

canvasTouchStart(event) {
  const touch = event.touches[0];
  this.touchX = touch.clientX;
  this.touchY = touch.clientY;
},
canvasTouchMove(event) {
  const touch = event.touches[0];
  const offsetX = touch.clientX - this.touchX;
  const offsetY = touch.clientY - this.touchY;
  this.x += offsetX;
  this.y += offsetY;
  this.touchX = touch.clientX;
  this.touchY = touch.clientY;
  this.draw();
},
canvasTouchEnd(event) {
  this.touchX = 0;
  this.touchY = 0;
},

上面的代码演示了如何获取手指触摸的位置，并且根据手指移动的距离更新x和y的值。需要注意的是，在touchmove事件中需要重新绘制canvas，才能看到元素的位置发生改变。

3.2 绘制拖拽元素

我们可以使用drawImage方法来在canvas上绘制拖拽元素，如下所示：

canvasTouchStart(event) {
  const touch = event.touches[0];
  const x = touch.clientX;
  const y = touch.clientY;
  if(x >= this.x && x <= this.x + this.width && y >= this.y && y <= this.y + this.height) {
    this.isDragging = true;
    this.dragX = x - this.x;
    this.dragY = y - this.y;
  }
},
canvasTouchMove(event) {
  if (this.isDragging) {
    const touch = event.touches[0];
    const x = touch.clientX - this.dragX;
    const y = touch.clientY - this.dragY;
    this.x = x;
    this.y = y;
    this.draw();
  }
},
canvasTouchEnd(event) {
  this.isDragging = false;
},
draw() {
  const ctx = wx.createCanvasContext('myCanvas');
  ctx.drawImage(this.imagePath, this.x, this.y, this.width, this.height);
  ctx.draw();
}

上面的代码演示了如何在canvas上绘制一个img标签，并且实现拖拽的效果。

3.3 避免超出canvas边界

最后，我们需要避免拖拽元素超出canvas的边界。我们可以在canvasTouchMove事件中添加判断，判断拖拽元素的左上角是否距离canvas的左上角不小于0，右下角是否距离canvas的右下角不大于0，如果超出边界，则停止拖拽。如下所示：

canvasTouchMove(event) {
  if (this.isDragging) {
    const touch = event.touches[0];
    const x = touch.clientX - this.dragX;
    const y = touch.clientY - this.dragY;
    if (x >= 0 && y >= 0 && x + this.width <= this.canvasWidth && y + this.height <= this.canvasHeight) {
      this.x = x;
      this.y = y;
      this.draw();
    } else {
      this.isDragging = false;
    }
  }
},

4. 总结

以上是实现canvas拖拽的详细步骤。要实现拖拽功能，我们需要获取手指触摸的位置，绘制拖拽元素，避免超出canvas边界。通过本文的介绍，希望读者能够更深入地了解canvas的基础知识和在小程序中的使用方法。