在html画布上制作矩形点击

Posted 2023-03-05

【中文标题】在html画布上制作矩形点击

【英文标题】：Making rectangle on html canvas click

【发布时间】：2022-01-05 22:17:34

【问题描述】：

我想在事件“点击”时在画布上制作矩形。我已经制作了事件侦听器，但是当我单击矩形时似乎是我单击的区域。基本上我希望矩形出现在点击区域周围。这是我的代码：

 const cursor_pdf = document.getElementsByClassName('react-pdf__Page__canvas')[0];
 cursor_pdf?.addEventListener('click', (e) => 

    const rect = cursor_pdf.getBoundingClientRect();

    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    const marker = cursor_pdf.getContext("2d");
    marker.beginPath();
    marker.lineWidth = "3";
    marker.strokeStyle = "red";
    marker.rect(x, y, 50, 50);
    marker.stroke();
);

之后，当我用光标点击这个蓝点时（不是真的在屏幕上只是为了点鼠标点击）矩形出现在点击之外。

但我希望它是这样的：

【问题讨论】：

这里似乎工作正常：jsfiddle.net/teddyrised/z0rvLw24。当然，唯一的问题是矩形的左上角是鼠标点击的地方，但是通过在 x 和 y 坐标上减去一半的正方形宽度（即- 25）很容易解决这个问题。

【参考方案1】：

const cursor_pdf = document.getElementsByClassName('react-pdf__Page__canvas')[0];
 cursor_pdf?.addEventListener('click', (e) => 

    const rect = cursor_pdf.getBoundingClientRect();

    //subtract half of the rectangle width/height so it's centered
    const x = e.clientX - rect.left - 25;
    const y = e.clientY - rect.top - 25;

    const marker = cursor_pdf.getContext("2d");
    marker.beginPath();
    marker.lineWidth = "3";
    marker.strokeStyle = "red";
    marker.rect(x, y, 50, 50);
    marker.stroke();
);

canvas 
  border: 3px solid #000;

<canvas class="react-pdf__Page__canvas"></canvas>