IF 语句附加到 canvas 对象的问题 - JS

Question

我相信有一个关于 if 语句的问题，该语句允许检测 canvas 对象（即显示的图像）应该位于 canvas 中的位置。提供了可重现的演示。

注意：我确实想 KEEP css 对齐，canvasauto , 如果可能的话不要删除它。

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

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

var the_button = document.getElementById("the_button");
var the_background = document.getElementById("the_background");

var imageXpos = 500;
var imageYpos = 300;
var imageWidth = 110;
var imageHeight = 80;

var imagecheck_Xpos = canvas.width - imageXpos;
var imagecheck_Ypos = canvas.height - imageYpos;

window.onload = function() {
  ctx.drawImage(the_background, 0, 0, canvas.width, canvas.height);
  ctx.drawImage(the_button, imagecheck_Xpos, imagecheck_Ypos, imageWidth, imageHeight);
}

the_button_function = (event) => {
  const {
    x,
    y
  } = event;
  /* l believe the issue is here */
  if ((x >= imagecheck_Xpos && x < (imagecheck_Xpos + imageWidth)) &&
    (y >= imagecheck_Ypos && y < (imagecheck_Ypos + imageHeight))) {
    alert("<Button>")

  }
}

canvas.addEventListener('click', (e) => the_button_function(e));

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 0;
  overflow: hidden;
  display: block;
}

.canvasauto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<html>
<canvas id="c" width="970" height="550" class="canvasauto"></canvas>

<img style="display: none;" id="the_button" src="https://i.imgur.com/wO7Wc2w.png" />

<img style="display: none;" id="the_background" src="https://img.freepik.com/free-photo/hand-painted-watercolor-background-with-sky-clouds-shape_24972-1095.jpg?size=626&ext=jpg" />

</html>

Answer 1

您正在使用 MouseEvent 中的 x。这是 an alias of clientX.

的实验性功能

clientX属性给出了相对于应用程序视口.

的坐标
您可能需要 offsetX，它 相对于目标节点的（填充边缘）。

var canvas = document.getElementById("c"); var ctx = canvas.getContext("2d"); var the_button = document.getElementById("the_button"); var the_background = document.getElementById("the_background"); var imageXpos = 500; var imageYpos = 300; var imageWidth = 110; var imageHeight = 80; var imagecheck_Xpos = canvas.width - imageXpos; var imagecheck_Ypos = canvas.height - imageYpos; window.onload = function() { ctx.drawImage(the_background, 0, 0, canvas.width, canvas.height); ctx.drawImage(the_button, imagecheck_Xpos, imagecheck_Ypos, imageWidth, imageHeight); } the_button_function = (event) => { const { offsetX: x, offsetY: y } = event; /* l believe the issue is here */ if ((x >= imagecheck_Xpos && x < (imagecheck_Xpos + imageWidth)) && (y >= imagecheck_Ypos && y < (imagecheck_Ypos + imageHeight))) { alert("<Button>") } } canvas.addEventListener('click', (e) => the_button_function(e));

html, body { width: 100%; height: 100%; margin: 0px; border: 0; overflow: hidden; display: block; } .canvasauto { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

<html> <canvas id="c" width="970" height="550" class="canvasauto"></canvas> <img style="display: none;" id="the_button" src="https://i.imgur.com/wO7Wc2w.png" /> <img style="display: none;" id="the_background" src="https://img.freepik.com/free-photo/hand-painted-watercolor-background-with-sky-clouds-shape_24972-1095.jpg?size=626&ext=jpg" /> </html>

IF 语句附加到 canvas 对象的问题 - JS

Issue with IF statement attaching to canvas object - JS

javascript

canvas