画布对象定位问题 - JS答案

【问题标题】：Canvas object positioning issue - JS画布对象定位问题 - JS
【发布时间】：2021-08-05 16:25:09
【问题描述】：

我相信有一些错误。

从视觉上看，按钮离开了屏幕，而不是原地不动。问题是画布对象的 X 定位，即 '<button>'，当您从 LEFT 调整浏览器窗口的大小时它会移出屏幕，但按钮也会 NOT MOVE从 RIGHT 调整浏览器窗口大小时，strong> 和 保持原位。

本质上，画布对象“按钮”应该固定在一个位置，这样无论我的浏览器窗口有多大或多小，它都会保持在同一个位置。

还有一个可重现的演示。

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 = 1100;
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;
}

<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>

【问题讨论】：

标签： javascript canvas resize

【解决方案1】：

据我所知，您将锚点设置在底部和左侧，您放置按钮的代码是正确的，它“移出屏幕”的唯一原因是因为窗口的大小小于左侧值，我对您的代码做了一些更改。

如果您正在绘制图像，您应该使用onload，否则您可能会在图像尚未真正加载时执行drawImage，这可能会使它看起来像是不在屏幕上

window.addEventListener('resize', resizeCanvas, false);
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

var btn = {left: 10, bottom: 60, width: 85, height: 50};
var btnImg = document.getElementById("the_button");
btnImg.onload = drawButton;
resizeCanvas()

function drawButton() {
  btn.x = btn.left;
  btn.y = canvas.height - btn.bottom;
  ctx.drawImage(btnImg, btn.x, btn.y, btn.width, btn.height);
}

function redraw() {
  ctx.clearRect(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 >= btn.x && x < (btn.x + btn.width)) &&
    (y >= btn.y && y < (btn.y + btn.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" />

</html>

您的代码仅适用于左侧和底部 ...
如果您想改为锚定到右侧和顶部，则需要更改逻辑：

  btn.x = btn.left;
  btn.y = canvas.height - btn.bottom;

但它在左下角效果很好，我认为这没有问题。

【讨论】：

好的，感谢您提供的解决方案。我看到你已经使用了一个记录数组，你已经添加了 .onload 以首先在 btnimg 中加载目标，并添加了新的逻辑来检查 btn 的 x 和 y 在画布上的位置。 - 别管我问的问题（它是关于右下逻辑的）。
我怎么可能锚定在右边和底部，似乎画布内的原生绘图是从左边开始的。
没关系，我明白了。添加了canvas.width - btn.left 并将记录left 留在var btn 内作为正整数。您也可以使用canvas.width + btn.left，但将记录left 设为负整数。
@Bonked 完美地将左边设为负整数是一个不错的方法......但为什么不直接使用 left 属性而不是使用 right 这将减少其他人阅读您的代码时的困惑稍后