有没有办法在引导 Div 元素中调整 p5js 画布的大小？

Posted 2023-05-08

【中文标题】有没有办法在引导 Div 元素中调整 p5js 画布的大小？

【英文标题】：Is there a way to resize a p5js canvas in a bootstrap Div element?

【发布时间】：2021-03-16 14:10:42

【问题描述】：

我正在尝试在引导网格中创建一个 p5js 画布。网格的每个 div 元素都应该有自己的 p5js 画布。我还希望这个画布在浏览器缩放时调整大小。

这是我的引导 div 网格，其中包含我希望画布所在的 div 元素

<div class="container">
  <div class="row">
    <div class="col-sm-4" id="col_1">
      <script src="my_script.js"></script>
    </div>
    <div class="col-sm-4" style="background-color: #00FFFF;">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4" style="background-color:  #ffff00;">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

这是我的脚本，我在其中创建以 div 元素为父级的画布

var canvasDiv = document.getElementById('col_1');
var width = canvasDiv.offsetWidth;
var height = canvasDiv.offsetHeight;
function setup() 
let render = createCanvas(width, height);
render.parent('col_1');


function draw() 
background(0, 100, 200);
fill(255, 0, 0);
ellipse(width/2, height/2, 40, 40);


function windowResized() 
resizeCanvas(width, height);

当我在浏览器中运行我的脚本时，您可以在 image 中看到，虽然画布似乎已正确缩放，但它与网格中的第二个和第三个元素的尺寸不同。

此外，当我尝试调整浏览器大小时，画布不会调整大小，而它的位置似乎会根据引导网格发生变化，如您所见 here。

【问题讨论】：

FWIW 你只定义了一次width 和height 的值，所以windowResized() 总是将画布设置为相同的大小，所以可能只是将width = canvasDiv.offsetWidth; 和height = canvasDiv.offsetHeight; 移动到windowResized()能解决问题吗？

【参考方案1】：

感谢@statox 的评论，它帮助我找出了问题所在。我对脚本进行了一些更改，一切似乎都很好。我需要给画布一个固定的高度，并对边距进行小幅调整，以保持所有东西的形状。当然还有改进的余地，但目前我对结果感到满意。 这是代码：

var canvasDiv = document.getElementById('col_1');

function setup() 
var width = canvasDiv.offsetWidth;
var height = canvasDiv.offsetHeight;
let render = createCanvas(width, 200);
render.parent("col_1");
render.style('margin-left', '-15px');


function draw() 
background(0, 100, 200);
fill(255, 0, 0);
ellipse(width/2, height/2, 40, 40);


function windowResized() 
var width = canvasDiv.offsetWidth;
var height = canvasDiv.offsetHeight;
resizeCanvas(width, 200);

这里有几张图片，您可以在normal window 和scaled window 上看到结果。

【讨论】：

恭喜您找到解决方案！不要忘记将您的答案标记为已接受，以便其他用户知道您解决了您的问题。也欢迎来到 SO :)