p5.js 如何动态调整图纸的高度和宽度？

Question

我有一个取决于窗口宽度的矩形。我希望矩形及其内部绘图根据 windowWidth 动态调整其大小。

这是我绘制的部分代码。

//Hardcoded date and time
var date = '15/05/17';
var time = '23:05';
var totaltime = '5h 45m';
var completeddate = '18/05/17';
var timeoflast = '4:50';
var canvas;
var canvasheight = 200;
var yellowrectanglewidth = 100;
var yellowrectangleheight = 59;

function setup() {


canvasheight = windowHeight / 3.7;
canvas =  createCanvas(windowWidth,canvasheight);
//canvas.style('display', 'block');
canvas.parent('sketch-holder');

//Image
leftend = loadImage("leftend.png");
rightend = loadImage("rightend.png");

yellowrectanglewidth = windowWidth - 160;

}

function draw() {


//Main Rectangle
fill(67, 67, 73);
rect(0, 0, windowWidth, canvasheight);

//Firstyellowrect
fill(215, 198, 170);
rect(90, canvasheight /9, yellowrectanglewidth, yellowrectangleheight);
//Secondyellowrect
rect(90, canvasheight /2.2, yellowrectanglewidth, yellowrectangleheight);

//Left End
//Text date
textSize(15);
fill(215, 198, 170);
text(date, 10, canvasheight/6);
//Text Time

fill(215, 198, 170);
text(time, 20, canvasheight/3 - 10);

//Image
image(leftend, 20,canvasheight/3 , 70, 40);


//Text Time
textSize(25);
fill(215, 198, 170);
text(totaltime, 5,canvasheight / 3 + 70);

//Right End
textSize(15);
fill(215, 198, 170);
text(completeddate, windowWidth - 60, canvasheight/6);

fill(215, 198, 170);
text(timeoflast, windowWidth - 40, canvasheight/3 - 10);

//Image 2
image(rightend, windowWidth - 70,canvasheight/3, 70, 40);

}

正如您在这里看到的，我试图让我的大部分绘图都依赖于此处的 windowWidth。因为我希望我的绘图大小根据 WindowWidth 增加和减少。

有没有更简单的方法来完成这一切？

Answer 1

我不太确定你在问什么：有没有更简单的方法来做具体的事情？

但你的总体看起来还不错。您通常会使用 width 和 height 变量来绘制随 canvas 大小缩放的场景。这几乎就是您已经在做的事情，所以我认为您的代码很好。

无耻 self-promotion：here 是使用 width 和 height 变量的教程。它用于处理，但所有相同的想法都适用于 P5.js。

如果您有更具体的问题，请在新问题中 post MCVE（只需一个椭圆或矩形即可），我们将从那里开始。祝你好运。

p5.js 如何动态调整图纸的高度和宽度？

How to dynamically adjust the height and width of drawings in p5.js ?

javascript

p5.js