如何将事件侦听器添加到画布上绘制的矩形？

Question

我有一个画布元素，当页面加载时，图像和一些形状被绘制到画布上。单击图像时，我想触发一个功能。我首先尝试了这个。const btn = ctx.drawImage(btnImg, 0, 0, 150, 100);btn.onmousedown = function () {  // do stuff}这没有用。我也没有在控制台中收到任何错误。然后我尝试使用该addEventListener功能。const btn = ctx.drawImage(btnImg, 0, 0, 150, 100);btn.addEventListener("click", function (event) {  // do stuff}, false);再一次，这没有用。这是否可能无需使用 CSSz-index属性在画布上浮动按钮？

Answer 1

你想做的事是不可能的——至少不是这样。问题是画布实际上并不知道你画的东西的形状。它只知道单个像素颜色。

但是，您可以做的是将按钮的边界框 - 屏幕位置和尺寸 - 保留为 Path2D 矩形，并使用该函数context.isPointInPath(path2d,x,y)检查是否有人在画布上按钮占据的区域内单击。

这是一个示例（只需单击“运行代码片段”）：

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

var image = new Image();

var buttons = [];

function draw(e) {

  let x, y, width, height, path;

  // first button

  x = 20;

  y = 20;

  width = 100;

  height = 20;

  context.drawImage(e.target, x, y, width, height);

  path = new Path2D();

  path.rect(x, y, width, height);

  buttons.push(path);

  // second button

  x = 150;

  y = 20;

  width = 100;

  height = 20;

  context.drawImage(e.target, x, y, width, height);

  path = new Path2D();

  path.rect(x, y, width, height);

  buttons.push(path);

}

function canvasClicked(e) {

  let button;

  for (var a = 0; a < buttons.length; a++) {

    button = buttons[a];

    if (context.isPointInPath(button, e.offsetX, e.offsetY)) {

      console.log("button " + (a + 1) + " clicked");

    }

  }

}

image.onload = draw;

image.src = "https://picsum.photos/id/866/200/300";

canvas.addEventListener("click", canvasClicked);

<canvas id="canvas" style="background-color:grey;"></canvas>