Почему эскизы p5.js изменяют размеры неправильно, когда внутри сетки CSS измеряется с помощью fr? - PullRequest
Новая
       9

Почему эскизы p5.js изменяют размеры неправильно, когда внутри сетки CSS измеряется с помощью fr?

0 голосов
/ 24 февраля 2019

Я пытаюсь разместить несколько эскизов в сетке CSS, измеренной в fr единицах.Я использую 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, работает просто отлично.

...