我只能从矩形的某个点而不是整个矩形中获取数据

Question

我正在尝试为 HTML Canvas 实现 eventListener。 我想从 SVG 画布向 rect 添加事件

问题是 我只能从矩形的某个点而不是整个矩形中获取数据。

canvas.addEventListener("click", e => {
          this.mousePos = {
            x: e.clientX - canvas.offsetLeft,
            y: e.clientY - canvas.offsetTop
          };
          console.log(this.mousePos.x, this.mousePos.y);

          const pixel = hitCtx.getImageData(
            this.mousePos.x,
            this.mousePos.y,
            1,
            1
          ).data;
          console.log(pixel);

          var r = pixel[0];
          var g = pixel[1];
          var b = pixel[2];
          const color = "rgb(" + r + "," + g + "," + b + ")";

          console.log(color);
  
          if (color == "rgb(255,59,59)") {
            console.log("click on the pipe");
          }
});

https://codepen.io/chikichaka/pen/yLaMbwe

我阅读了这篇文章并遵循了使用颜色的第二种方法。

https://lavrton.com/hit-region-detection-for-html5-canvas-and-how-to-listen-to-click-events-on-canvas-shapes-815034d7e9f8/

Answer 1

你可以试试这个。

let canvas = document.querySelector("canvas");
let rect = canvas.getBoundingClientRect();
let x = e.clientX - rect.left;
let y = e.clientY - rect.top;
console.log(rect);

Answer 2

最初的目的是检查用户是否点击了画布中的红色矩形。

给出的代码试图通过查看点击位置的像素并确定它是否是颜色（一种红色）来做到这一点。如果没有，则没有点击“管道”。

但是，在给定的代码笔中，这个测试是在正确的位置完成的，而不是在画有红色管道的画布上。它是在 hitCanvas 上完成的。如果我们更改为针对绘制红色管道的画布进行测试，我们会得到正确的点击。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const hitCanvas = document.createElement('canvas');
const hitCtx = hitCanvas.getContext('2d');

canvas.width = 300;
canvas.height = 200;


hitCanvas.width = 300;
hitCanvas.height = 200;

var width = 300;
var height = 10;
var startX = 0;
var startY = 100;
ctx.beginPath();
ctx.translate(200, 30);
ctx.rotate((31.5 * Math.PI) / -180);
ctx.translate(-225, -65);
ctx.rect(this.startX, this.startY, this.width, this.height);
ctx.fillStyle = "#ff3b3b";
ctx.fill();

hitCtx.beginPath();
hitCtx.translate(200, 30);
hitCtx.rotate((-1 * Math.PI) / -180);
hitCtx.translate(-225, -40);
hitCtx.rect(this.startX, this.startY, this.width, this.height);
hitCtx.fillStyle = "#ff3b3b";
hitCtx.fill();

canvas.addEventListener("click", e => {
          this.mousePos = {
            x: e.clientX - canvas.offsetLeft,
            y: e.clientY - canvas.offsetTop
          };
          console.log(this.mousePos.x, this.mousePos.y);

          const pixel = ctx.getImageData(//CHANGED TO ctx TO ENSURE WE TEST ARE ON THE RED RECTANGLE */
            this.mousePos.x,
            this.mousePos.y,
            1,
            1
          ).data;
          console.log(pixel);

          var r = pixel[0];
          var g = pixel[1];
          var b = pixel[2];
          const color = "rgb(" + r + "," + g + "," + b + ")";

          console.log(color);
  
          if (color == "rgb(255,59,59)") {
            console.log("click on the pipe");
          }
});

body {
  margin: 0;
  padding: 0;
}

<canvas id="canvas" />

这解决了问题中提出的问题。然而，还有更多的问题——实际上是一个“正确”的东西，应该是在用户看到的 hitCanvas 中，另一个画布被放在上面，这样一个“真实的”管道显示为打？如果现在还不清楚发生了什么，这可能需要成为另一个问题的主题。