与 canvas 中 canvas 对象的事件侦听器相关的问题及其他问题

Question

主要问题：

我基本上想解决我的事件侦听器的问题，因为它与 canvas 对象对齐，这是图像 ''，在 canvas 的中间但是，Y它下面的区域仍然可以点击，它右边的 X 区域仍然可以点击。

我想消除这个问题，我认为这是由我的 IF 语句和 DRAWIMAGE 条件引起的，与我的 canvas 有关。有一个可重现的demo，fullscreen/expand可以看看

另一个问题：

另一件需要注意的事情是，当您调整浏览器 window 大小时，canvas 对象并没有真正停留在 canvas 上的一个位置。它只是向不同的方向移动，即使它应该卡在 canvas 的一个区域中，无论我的浏览器的 window 是什么大小 - 这意味着 canvas 对象需要动态地调整大小以及我的浏览器如何调整大小+事件侦听器需要看到它。 再次感谢，因为我真的很想理解我的逻辑错误，因为我可能使用了错误的坐标系，我真的不知道:/

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 button_imageX = 600;
var button_imageY = 390;

window.onload = function() {
  ctx.drawImage(the_background, 0, 0, canvas.width, canvas.height);
  drawButton();
}

initialize();


function initialize() {
  window.addEventListener('resize', resizeCanvas, false);
  resizeCanvas();
}

function drawButton() {
  /* l belive this is partly responsible aswell for the issue */
  ctx.drawImage(the_button, button_imageX, canvas.height - button_imageY, 170, 100);

}

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(the_background, 0, 0, canvas.width, canvas.height);
  drawButton();
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  redraw();
}

the_button_function = (paramater1) => {
  /* Problem lies here in the IF statement aswell, that's my guess */
  if ((paramater1.x > (canvas.width - button_imageX)) && (paramater1.x < canvas.width) && (paramater1.y > (canvas.height - button_imageY)) && (paramater1.y < canvas.height)) {
    alert("<Button>")
  }
}

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

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

<html>
<canvas id="c"></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

要停止响应按钮右侧和下方的点击，请考虑按钮的宽度和高度！

解决这个问题，并知道之前在 canvas 上绘制图像的位置应该可以解决第二个问题。要调试问题，下面的代码片段会替换

button_imageX 和 button_imageLeft - 从 canvas 剩余多少像素来绘制图像。
button_imageY 和 button_imageBottom - 从 canvas 底部到绘制图像顶部的像素数。（这似乎是发布的代码如何将按钮定位在 y 方向。）

[image_bottonLeft 和 image_buttonBottom 值已修改，以便在 Stack Overflow 上查看结果。]

并介绍

button_offsetX - 最后绘制按钮左侧的 x 位置
button_offsetY - 最后绘制按钮顶部的 y 位置
button_imageWidth 和 button_imageHeight 值，替换硬编码值函数 drawButton.

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 button_imageLeft = 100;
var button_imageBottom = 150;
var button_imageWidth = 170;
var button_imageHeight = 100;
var button_offsetX, button_offsetY;

window.onload = function() {
  ctx.drawImage(the_background, 0, 0, canvas.width, canvas.height);
  drawButton();
}

initialize();


function initialize() {
  window.addEventListener('resize', resizeCanvas, false);
  resizeCanvas();
}

function drawButton() {
  button_offsetX = button_imageLeft;
  button_offsetY = canvas.height - button_imageBottom;
  ctx.drawImage(the_button, button_offsetX, button_offsetY, button_imageWidth, button_imageHeight);
}

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(the_background, 0, 0, canvas.width, canvas.height);
  drawButton();
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  redraw();
}

the_button_function = (event) => {
  const {x,y} = event;
  if( (x >= button_offsetX && x < (button_offsetX+button_imageWidth))
   && (y >= button_offsetY && y < (button_offsetY+button_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;
}

<canvas id="c"></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" />

与 canvas 中 canvas 对象的事件侦听器相关的问题及其他问题

Issue related to event listener on canvas object within a canvas & additional issue

javascript

canvas