javascript - 如何使用canvas js使图像上的多边形可点击？

Question

var b = {
  "vertices": [
  [{ "x": 15, "y": 5 }, { "x": 28, "y": 2 }, { "x": 37, "y": 49 }, { "x": 24, "y": 51 }],
  [{ "x": 106, "y": 5 }, { "x": 252, "y": 3 }, { "x": 252, "y": 36 }, { "x": 106, "y": 38 }],
  [{ "x": 16, "y": 40 }, { "x": 296, "y": 41 }, { "x": 296, "y": 100 }, { "x": 16, "y": 99 }],
  [{ "x": 26, "y": 123 }, { "x": 255, "y": 124 }, { "x": 255, "y": 239 }, { "x": 26, "y": 238 }],
  [{ "x": 106, "y": 376 }, { "x": 255, "y": 375 }, { "x": 255, "y": 393 }, { "x": 106, "y": 394 }]]
};

在canvas js中绘制上述坐标的多边形绘制函数:

function drawpolygon() {
  for (i = 0; i < ar.vertices.length; i++) {
    for (j = 0; j <= 3; j++) {
      cx.beginPath();
      cx.lineTo(ar.vertices[i][0].x, ar.vertices[i][0].y);
      cx.lineTo(ar.vertices[i][1].x, ar.vertices[i][1].y);
      cx.lineTo(ar.vertices[i][2].x, ar.vertices[i][2].y);
      cx.lineTo(ar.vertices[i][3].x, ar.vertices[i][3].y);

      if (j == 3) {
        cx.lineTo(ar.vertices[i][0].x, ar.vertices[i][0].y);
      }

      cx.strokeStyle = "red";
      cx.lineWidth = "1.5";
      cx.stroke();
      cx.closePath();
    }
  }
}

我已经使用canvas js绘制了多边形。如何使这些可点击？ Hitregion 已过时..

Answer 1

您可以利用Canvas​Rendering​Context2D.isPoint​InPath() 。它将允许您确定给定点是否位于“当前”状态路径内，或者某个点是否位于 Path2D 对象中(如果您使用它们)。

尝试在下面渲染的多边形内单击。

const canvas = document.getElementById("canvas");
const cx = canvas.getContext("2d");

var ar = {
  "vertices": [
  [{ "x": 15, "y": 5 }, { "x": 28, "y": 2 }, { "x": 37, "y": 49 }, { "x": 24, "y": 51 }],
  [{ "x": 106, "y": 5 }, { "x": 252, "y": 3 }, { "x": 252, "y": 36 }, { "x": 106, "y": 38 }],
  [{ "x": 16, "y": 40 }, { "x": 296, "y": 41 }, { "x": 296, "y": 100 }, { "x": 16, "y": 99 }],
  [{ "x": 26, "y": 123 }, { "x": 255, "y": 124 }, { "x": 255, "y": 239 }, { "x": 26, "y": 238 }],
  [{ "x": 106, "y": 376 }, { "x": 255, "y": 375 }, { "x": 255, "y": 393 }, { "x": 106, "y": 394 }]]
};

function drawpolygon(e) {
  let x, y;

  // Only try to hit detect if there was a click
  if (e) {
    // Localize the click to within the canvas
    const {clientX, clientY, currentTarget} = e;
    const {left, top} = currentTarget.getBoundingClientRect();
    x = clientX - left;
    y = clientY - top;
  }

  // Clear the canvas
  cx.clearRect(0, 0, canvas.width, canvas.height);

  // Iterate all the polygons
  for (i = 0; i < ar.vertices.length; i++) {
    for (j = 0; j <= 3; j++) {

      cx.beginPath();
      cx.lineTo(ar.vertices[i][0].x, ar.vertices[i][0].y);
      cx.lineTo(ar.vertices[i][1].x, ar.vertices[i][1].y);
      cx.lineTo(ar.vertices[i][2].x, ar.vertices[i][2].y);
      cx.lineTo(ar.vertices[i][3].x, ar.vertices[i][3].y);

      if (j == 3) {
        cx.lineTo(ar.vertices[i][0].x, ar.vertices[i][0].y);
      }

      cx.closePath();

      // Paint green if the click was in the path, red otherwise
      cx.strokeStyle = cx.isPointInPath(x, y) ? "green" : "red";
      cx.lineWidth = "1.5";
      cx.stroke();
    }
  }
}

// Draw immediately for reference
drawpolygon();
// Draw again whenever we click
canvas.addEventListener("click", drawpolygon);

<canvas id="canvas" width="512" height="512"></canvas>