Question

我正在尝试将多个草图放置在以 fr 为单位的CSS网格中。我正在使用windowResized()通过调用resizeCanvas()来触发草图的重绘，而最终发生的结果是，草图的尺寸在垂直方向上无限增大，而与调整大小的类型无关（水平，垂直，缩小，任意组合进行扩充），草图就不会水平缩小。

以全尺寸模式查看，因此可以调整代码段的大小：

let sketch = (p) =>{
	let container;
	p.setup = () => {
		container = p._userNode;
		p.createCanvas(container.offsetWidth, container.offsetHeight);
		p.noLoop();
	}

	p.draw = () => {
		p.background(125, 125, 125);
		p.circle(p.width/2,p.height/2, p.width<p.height?p.width/4:p.height/4);
	}

	p.windowResized = () => {
		p.resizeCanvas(container.offsetWidth, container.offsetHeight);
	}
}

let addSketches = () => {
	new p5(sketch, 'sk1');
	new p5(sketch, 'sk2');
	new p5(sketch, 'sk3');
	new p5(sketch, 'sk4');
}

html,body{
	margin: 0;
	padding: 0;
}

#grid{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 6%;
	overflow: hidden;
}

.sketch{
	display: block;
	background-image: linear-gradient(to bottom right, red, yellow);
	width : 100%;
	height: 100%
}

button{
	position: absolute;
	top: 20px;
	left: 20px;
}

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	
	<link rel="stylesheet" href="style.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
</head>
<body>
	<button onclick="addSketches()">Add sketches</button>
	<div id="grid">
		<div class="sketch" id="sk1"></div>
		<div class="sketch" id="sk2"></div>
		<div class="sketch" id="sk3"></div>
		<div class="sketch" id="sk4"></div>
	</div>
</body>
</html>

在添加草图之前，网格的行为和调整大小可以正常进行，但之后甚至连初始尺寸似乎都不准确。值得一提的是，使用 % 或 vh/vw 之类的任何其他类型的度量都可以。

当在用fr测量的CSS网格内时，为什么p5.js草图会错误地调整大小？

0 个答案: