如何根据屏幕大小正确调整画布大小？ Javascript (p5.js)

Posted 2023-02-27

【中文标题】如何根据屏幕大小正确调整画布大小？ Javascript (p5.js)

【英文标题】：How to properly resize canvas according to screen size? Javascript (p5.js)

【发布时间】：2020-09-30 01:23:57

【问题描述】：

所以，正如问题所说，我需要根据屏幕大小调整画布大小。然而，事实并非如此。我还需要按比例更新鼠标坐标。似乎我犯了一个致命的错误，即从一开始就没有考虑屏幕尺寸，因为这是我的第一个合适的游戏。我是根据我的 1080p 屏幕制作的游戏。诸如定位东西和检查鼠标坐标之类的东西都是基于 1920x1080 的画布。请帮忙！

Github 链接：

主游戏，可以运行，但大小取决于您的屏幕：https://proqbr.github.io/powerdown/ 所有文件（只有15MB，以防您想通过下载查看）：https://github.com/proqbr/powerdown sketch.js（关于这个的几乎主要文件）：https://github.com/proqbr/powerdown/blob/master/sketch.js

主要是在sketch.js 中，在第260-263 行 上是function setup() 中的一些createCanvas 行​​，未注释的是createCanvas(1920,1080);，因为这是我正在使用的。 第 302-314 行 是一堆 camera.zoom 行，未注释的一个是 camera.zoom = 1;，因为在我的屏幕上，主菜单不需要缩放。

第 352 行以后是一些关于知道玩家点击位置的代码，问题是这样的。我确实知道如何使用windowWidth 和windowHeight 使画布的内容在所有屏幕上看起来都正确调整大小，但是导致问题的是不正确的鼠标坐标。如果有人可以提供帮助，那就太好了。

如果你的游戏有问题，这里有一个快速的第二个视频游戏菜单是如何工作的，尽管它很简单：https://youtu.be/eZZw5CmOXEE

【问题讨论】：

恐怕没有简单的解决方法......您必须重构代码以在调整大小时按比例更新

@HelderSepulveda 好吧，看起来就是这样......但我很确定，如果我喜欢将鼠标坐标乘以某个值，它会工作得很好，但我想不出类似的东西。如果你能说出那样的话，那将是很大的帮助。就像乘以 windowWidth/1920 或类似的东西，但我就是想不通

鼠标坐标只是冰山一角，硬编码的值到处都是：github.com/proqbr/powerdown/blob/master/sketch.js#L268-L275

@HelderSepulveda 实际上许多值会保持原样，所以如果我能处理鼠标坐标就足够了。我也测试了主游戏，除了一些文本对齐之外它工作得很好，这可能会以类似于鼠标坐标的方式得到修复。

发布您的答案，以便其他人可以找到它

【参考方案1】：

我自己想通了。对于某些值，例如在测试 mouseX >= 720 时，我必须将其编辑为 mouseX >= 785*windowWidth/1920。

对于我使用过的一个翻译，translate(95,525)，我不得不对其进行更多修改，而这是正确工作的那个translate(displayWidth/2-865*(windowWidth)/1920,displayHeight/2-15*(windowHeight)/1080);

至于屏幕大小调整这工作正常：

function windowResized() 
  resizeCanvas(windowWidth, windowHeight);
  if(windowHeight > windowWidth)
    factor = windowHeight;
    factdiv = 1080;
  else
    factor = windowWidth;
    factdiv = 1920;
  

我不得不弄乱这些来找出一个体面的解决方案

画布尺寸，即1920, 1080 windowWidth, windowHeight 还有displayWidth, displayHeight

我还在存储库中更新了相同的内容，因此您可以从此处查看最终结果：https://proqbr.github.io/powerdown/