浅谈canvas图形交互

前端

2024-02-07 21:55:10

浅谈canvas常见图形交互

总所周知canvas绘制的图形没有交互功能，这是由其本质特性决定的。传统的canvas只是一个画布，绘制的图形只起到展现作用，类似网页中图片的作用，不过由于canvas的图形是由代码控制生成，相比图片更具灵活性，可实现更复杂的交互。

基于这方面的思考，我们想实现canvas图形的交互，就必须跳出canvas的限制，从框架着手。在这个框架中，canvas图形是组成元素之一，而框架则负责处理交互事件，并控制canvas图形的绘制。

接下来，我将分享一些常用的canvas图形交互实现方法。

方法一：基于canvas API的交互

canvas API提供了一些事件处理方法，比如addEventListener()方法，我们可以使用这些方法来实现图形交互。

比如，我们可以在canvas上绘制一个矩形，当用户点击矩形时，矩形就会变色。

// 获取canvas元素
var canvas = document.getElementById("myCanvas");
// 获取画布上下文
var ctx = canvas.getContext("2d");
// 绘制一个矩形
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);
// 添加点击事件监听器
canvas.addEventListener("click", function(e) {
  // 获取点击位置
  var x = e.clientX;
  var y = e.clientY;
  // 判断点击位置是否在矩形内
  if (x >= 10 && x <= 110 && y >= 10 && y <= 110) {
    // 如果在矩形内，则改变矩形颜色
    ctx.fillStyle = "blue";
    ctx.fillRect(10, 10, 100, 100);
  }
});

方法二：基于第三方库的交互

目前有很多第三方库可以帮助我们实现canvas图形交互，比如fabric.js、Konva.js等。这些库提供了丰富的API，可以轻松实现各种各样的交互效果。

比如，我们可以使用fabric.js来实现图形的拖拽、缩放、旋转等交互。

// 创建一个fabric.Canvas实例
var canvas = new fabric.Canvas("myCanvas");
// 添加一个矩形到canvas上
var rect = new fabric.Rect({
  left: 10,
  top: 10,
  width: 100,
  height: 100,
  fill: "red"
});
canvas.add(rect);
// 使矩形可拖拽
rect.set({
  draggable: true
});

方法三：基于自定义框架的交互

如果我们对canvas图形交互有更复杂的定制需求，可以考虑构建一个自定义框架。

比如，我们可以构建一个框架，来实现canvas图形的拖拽、缩放、旋转、删除等多种交互。

// 创建一个自定义框架
var Framework = {
  // 初始化框架
  init: function() {
    // 获取canvas元素
    this.canvas = document.getElementById("myCanvas");
    // 获取画布上下文
    this.ctx = this.canvas.getContext("2d");
    // 添加事件监听器
    this.canvas.addEventListener("mousedown", this.onMouseDown.bind(this));
    this.canvas.addEventListener("mousemove", this.onMouseMove.bind(this));
    this.canvas.addEventListener("mouseup", this.onMouseUp.bind(this));
  },
  // 鼠标按下事件处理函数
  onMouseDown: function(e) {
    // 获取鼠标按下位置
    this.startX = e.clientX;
    this.startY = e.clientY;
    // 判断鼠标按下位置是否在某个图形上
    for (var i = 0; i < this.shapes.length; i++) {
      if (this.shapes[i].isPointInShape(this.startX, this.startY)) {
        // 如果在某个图形上，则设置该图形为当前选中图形
        this.selectedShape = this.shapes[i];
        break;
      }
    }
  },
  // 鼠标移动事件处理函数
  onMouseMove: function(e) {
    // 如果有当前选中图形，则移动该图形
    if (this.selectedShape) {
      this.selectedShape.moveTo(e.clientX - this.startX, e.clientY - this.startY);
    }
  },
  // 鼠标抬起事件处理函数
  onMouseUp: function(e) {
    // 重置当前选中图形
    this.selectedShape = null;
  },
  // 添加图形到canvas上
  addShape: function(shape) {
    this.shapes.push(shape);
    this.ctx.drawImage(shape.image, shape.x, shape.y);
  },
  // 绘制所有图形
  drawAll: function() {
    for (var i = 0; i < this.shapes.length; i++) {
      this.ctx.drawImage(this.shapes[i].image, this.shapes[i].x, this.shapes[i].y);
    }
  }
};
// 初始化框架
Framework.init();
// 添加一个矩形到canvas上
Framework.addShape({
  image: new Image(),
  x: 10,
  y: 10,
  width: 100,
  height: 100,
  fill: "red"
});