P5.JS 和 WordPress 的响应式画布大小

Question

我需要使用 p5js 制作自定义数据可视化元素。主题是响应式的，因此视觉效果需要适合一定的宽度。根据视觉效果中的数据以及所应用的选项或过滤器，高度将会改变。

我见过 Responsive P5JS for WP 但我不知道如何在不重新加载页面的情况下修改画布的大小。

Answer 1

这里有两个问题，WP CSS问题和p5.js问题。让我们从 WP CSS 问题开始，我为您提供了两种解决方案。第一个可能实际上可以解决这个问题。

CSS 问题

解决方案1： 尝试在 WordPress 中使用 easy-p5-js-block：https://wordpress.com/plugins/easy-p5-js-block

解决方案 2：：将以下自定义 CSS 类添加到您的 WP 主题：

.responsiveWrapper {
    position: relative;
    padding-bottom: 100%;
    padding-top: 5px;
    height: 0;
}
.responsiveWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

并将响应式包装器类添加到您的 p5.js WP 元素中。

p5.js

现在关于 P5.js 问题。

setup()

函数通常会创建一个具有固定宽度和高度的画布。现在，您需要确保在 WP 调整 p5 元素大小后重新创建画布或调整画布大小。为此，请在代码中添加一些逻辑来处理 windowResized() 并使用 p5.js 文档中的 resizeCanvas() https://p5js.org/reference/#/p5/windowResized:

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(200);

  describe('A gray canvas that takes up the entire browser window. It changes size to match the browser window.');
}

// Resize the canvas when the
// browser's size changes.
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}