javascript - 如何在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);

}

正如您在这里所看到的，我试图使我的大部分绘图取决于此处的窗口宽度。因为我希望绘图的大小根据窗口宽度而增加和减少。

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

Answer 1

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

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

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

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