将 canvas 对象保留在一个位置以防止更改整个 canvas 的大小

Question

我想知道为了定位一个 canvas 对象所需的逻辑，在这个例子中它是一个图像，一直在 canvas 的右下角。由于可调整大小 canvas.

，我基本上需要帮助 canvas 对象停留在一个地方而不会向上、向下、向左、向右移动

我也测试过使用事件侦听器根据 canvas 的 window 大小不断更新 canvas 对象的位置，但我相信它最终会成为一个低效的解决方案。

要查看它的运行情况，请填写 screen/expand 代码段并通过双击浏览器的选项卡或简单地调整大小来更改 window 大小，然后您应该能够看到它的运行情况。

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 = 115;
var button_imageY = 85;

window.onload = function() {
  ctx.drawImage(the_background, 0, 0, canvas.width, canvas.height);
  ctx.drawImage(the_button, button_imageX, button_imageY, 130, 75);
}

initialize();

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

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(the_background, 0, 0, canvas.width, canvas.height);
  ctx.drawImage(the_button, button_imageX, button_imageY, 130, 75);
}

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

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

这都是关于矩形几何的。

基本上罪魁祸首是这条线出现在两个不同的地方。

ctx.drawImage(the_button, button_imageX, button_imageY, 130, 75);

当您希望按钮在调整大小时处于某个固定位置时，您应该为drawImage函数提供固定值作为第2和第3个参数。

改成这样，

ctx.drawImage(the_button, button_imageX, canvas.height - button_imageY, 130, 75);

第二个参数 button_imageX 已经固定。

但是第 3 个参数是 top of the canvas 按钮所在位置的 y 值。不是从底部。你肯定和笛卡尔坐标系搞混了。

因此，如果您希望您的按钮始终位于从底部开始的固定位置。你应该 canvas.height.

所以 canvas.height - button_imageY 意味着您的按钮的左上角始终比 canvas 底部高 button_imageY 像素。

您可能还想考虑按钮的高度，因此新的第 3 个参数将变为 canvas.height - button_imageY - button_height

查看代码片段以获取完整代码。

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 = 25;
var button_imageY = 25;

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() {
  ctx.drawImage(the_button, button_imageX, canvas.height - button_imageY - 75, 130, 75);
}

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();
}

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>

将 canvas 对象保留在一个位置以防止更改整个 canvas 的大小

Keep canvas object in one place against changing size of the entire canvas

html

javascript

canvas