如何使用p5js适当调整画布的大小？
如何使用p5js适当调整画布的大小？
提问于 2022-09-30 08:23:28
我目前正在进行一个项目，其中一部分是在画布调整大小(或调整窗口大小)后调整画布中的模型大小。我检查了resizeCanvas()的文档并应用了它。
我首先通过除以用户设备的currentWidth/defaultWidth (用户设备的currentWidth )和默认/选定宽度(分别由我们来计算)来找到比率。
findRatio(wd, hd, wc, hc) {
const w = wc / wd;
const h = hc / hd;
return w < h ? w : h;
}在我的windowResized()函数中，一旦画布在窗口调整大小后，我将设置宽度/高度。
export const windowResized = (p5) => {
if (p5) {
initVariables.browserWidth = p5.windowWidth;
initVariables.browserHeight = p5.windowHeight;
p5.resizeCanvas(initVariables.browserWidth, initVariables.browserHeight);
for (let m of initVariables.mM) {
m.updateonResize();
}
}
};这里，initVariables只是一个有一些变量的对象。
我的父类中也有updateonResize()函数，一旦窗口大小调整，就会触发它。
updateonResize() {
this.r = this.findRatio(
this.initVariables.width,
this.initVariables.height,
this.initVariables.browserWidth,
this.initVariables.browserHeight
);
this.arr.push(this.r);
if (this.arr[this.arr.length - 2] !== undefined) {
if (this.r < this.arr[this.arr.length - 2]) {
console.log("canvas getting larger, not sure if I need to divide or multiply here");
this.min = this.min * this.r;
this.max = this.max * this.r;
this.measure = this.measure * this.r;
} else {
this.min = this.min * this.r;
this.max = this.max * this.r;
this.measure = this.measure * this.r;
}
}
}在这里，min、max和measure变量是用来检测对象部件大小的变量，对象部件是行的长度。如果画布越来越小，您需要用乘积度量值和ratio (这里的比率通常小于1)。
Problem1:当我在Chrome浏览器中从全屏模式转到窗口模式时遇到了问题。它不触发windowOnResize()函数。一旦进入窗口模式，是否可以自动触发此函数？
Problem2:当您调整浏览器的大小时，每个帧的比率都会发生变化，因此measure*ratio值变得太低(到0)。有什么算法，我可以应用到稍微减少测量值，但不是大幅度？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-11-09 11:55:13
我自己找到了解决办法。我使用JavaScript添加了调整事件侦听器的大小，并使用自己的函数查找比率，并使用它调整画布的大小。我增加了超时，不是同时看到变化，而是经过一些延迟。
let timeOutFunctionId;
window.addEventListener("resize", function () {
if (!initVariables.subSet) {
r = findRatio(
initVariables.width,
initVariables.height,
initVariables.browserWidth,
initVariables.browserHeight
);
clearTimeout(timeOutFunctionId);
timeOutFunctionId = setTimeout(() => {
if (p5) {
if (true) {
initVariables.browserWidth = p5.windowWidth - 310;
initVariables.browserHeight = p5.windowHeight - 200;
} else {
}
p5.resizeCanvas(
initVariables.browserWidth,
initVariables.browserHeight
);
//calling custom class
}
}, 500);
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73905898
复制相关文章
相似问题
腾讯云开发者
