canvas文字绘制，并根据鼠标按下后拖动更新位置

canvas文字绘制，并根据鼠标按下后拖动更新位置

canvas绘制文本的基本方法为：

ctx.font = "30px Arial";
ctx.fillText("文字描述!", 50, 50);

根据这个方法，我们可以写一个绘制文字的对象

var textObject = { 
    x: 50, 
    y: 50,
    text: "文字描述!", 
    color: "black"
}

考虑到绘制的文字还需要进行拖动，那么就需要添加以下相关变量

var textObject = { 
    x: 50, 
    y: 50,
    text: "文字描述!", 
    color: "black"
    isDragging: false,
    dragStartX: 0,  // 开始拖动的点坐标X
    dragStartY: 0   // 开始拖动的点坐标Y
}

当前对象只有绘制文字时的基本变量，缺少对应的绘制方法，以及开始拖动事件、停止拖动事件、还有最重要的拖动事件

var textObject = { 
    x: 50, 
    y: 50,
    text: "文字描述!", 
    color: "black"
    isDragging: false,
    dragStartX: 0,  // 开始拖动的点坐标X
    dragStartY: 0,   // 开始拖动的点坐标Y
    // 绘制文本
    draw: function() { 
        ctx.fillStyle = this.color; 
        ctx.font = "30px Arial"; 
        ctx.fillText(this.text, this.x, this.y);
    },
    // 开始拖动 
    startDragging: function(x, y) {
        this.isDragging = true; 
        this.dragStartX = x;
        this.dragStartY = y; 
    },
    // 停止拖动 
    stopDragging: function() { 
        this.isDragging = false; 
    }, 
    // 拖动文本 
    drag: function(x, y) { 
        var deltaX = x - this.dragStartX; 
        var deltaY = y - this.dragStartY; 
        this.x += deltaX; 
        this.y += deltaY; 
        this.dragStartX = x; 
        this.dragStartY = y; 
    }
}

基本的绘制文本对象已构建完毕，接下来就是完善鼠标按下、鼠标拖动、鼠标抬起事件，通过文本对象方法，来修改文本对象的变量

首先是监听鼠标按下操作

// 添加mousedown事件侦听器以启动拖动操作 
canvas.addEventListener("mousedown", function(event) { 
    if (event.button == 0) { 
        // 左键单击 
        var mouseX = event.clientX - canvas.offsetLeft; 
        // 获取鼠标相对于Canvas的x坐标 
        var mouseY = event.clientY - canvas.offsetTop;
        // 获取鼠标相对于Canvas的y坐标
        if (mouseX > textObject.x && mouseX < textObject.x + ctx.measureText(textObject.text).width && mouseY > textObject.y - 30 && mouseY < textObject.y) { 
            // 如果鼠标在文本上
            textObject.startDragging(mouseX, mouseY); 
        } 
    }
});

其次是监听鼠标移动操作

// 添加mousemove事件侦听器以更新文本对象位置 
document.addEventListener("mousemove", function(event) {
    if (textObject.isDragging) {
        var mouseX = event.clientX - canvas.offsetLeft; 
        var mouseY = event.clientY - canvas.offsetTop;
        textObject.drag(mouseX, mouseY); 
        ctx.clearRect(0, 0, canvas.width, canvas.height);  // 清除当前Canvas 
        textObject.draw();  // 重新绘制文本对象
     } 
});

最后是监听鼠标抬起操作

// 添加mouseup事件侦听器以停止拖动操作 
document.addEventListener("mouseup", function() { 
    textObject.stopDragging(); 
});

到此，基本功能已完善，下面附上所有代码

<canvas id="myCanvas"></canvas>
<script>
  // 获取Canvas元素和上下文
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");

  // 绘制文本
  ctx.font = "30px Arial";
  ctx.fillText("Drag me!", 50, 50);

  // 创建文本对象
  var textObject = {
    x: 50,
    y: 50,
    text: "Drag me!",
    color: "black",
    isDragging: false,
    dragStartX: 0,
    dragStartY: 0,
    // 绘制文本
    draw: function() {
      ctx.fillStyle = this.color;
      ctx.font = "30px Arial";
      ctx.fillText(this.text, this.x, this.y);
    },
    // 开始拖动
    startDragging: function(x, y) {
      this.isDragging = true;
      this.dragStartX = x;
      this.dragStartY = y;
    },
    // 停止拖动
    stopDragging: function() {
      this.isDragging = false;
    },
    // 拖动文本
    drag: function(x, y) {
      var deltaX = x - this.dragStartX;
      var deltaY = y - this.dragStartY;
      this.x += deltaX;
      this.y += deltaY;
      this.dragStartX = x;
      this.dragStartY = y;
    }
  };

  // 绘制文本对象
  textObject.draw();

  // 添加mousedown事件侦听器以启动拖动操作
  canvas.addEventListener("mousedown", function(event) {
    if (event.button == 0) { // 左键单击
      var mouseX = event.clientX - canvas.offsetLeft; // 获取鼠标相对于Canvas的x坐标
      var mouseY = event.clientY - canvas.offsetTop; // 获取鼠标相对于Canvas的y坐标
      if (mouseX > textObject.x && mouseX < textObject.x + ctx.measureText(textObject.text).width && mouseY > textObject.y - 30 && mouseY < textObject.y) { // 如果鼠标在文本上
        textObject.startDragging(mouseX, mouseY);
      }
    }
  });

  // 添加mousemove事件侦听器以更新文本对象位置
  document.addEventListener("mousemove", function(event) {
    if (textObject.isDragging) {
      var mouseX = event.clientX - canvas.offsetLeft;
      var mouseY = event.clientY - canvas.offsetTop;
      textObject.drag(mouseX, mouseY);
      ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除当前Canvas
      textObject.draw(); // 重新绘制文本对象
    }
  });

  // 添加mouseup事件侦听器以停止拖动操作
  document.addEventListener("mouseup", function() {
    textObject.stopDragging();
  });
</script>