reactjs 如何将React prop 传递到p5.js草图中

rjee0c15 于 2023-01-02 发布在 React

关注(0)|答案(2)|浏览(175)

我一直在做一个将React与p5.js集成在一起的项目。我在将我的props传递到sketch时遇到了问题。当我在sketch中引用我的props时，我得到一个props变量未定义的错误。有人知道如何在p5.js sketch中访问props吗？

import React from "react";
import p5 from 'p5';

class Sketch extends React.Component {
    
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }

    Sketch = (p) => {

        p.setup = () => {
            p.createCanvas(400, 400);
            // Want to reference my props here

        }

        p.draw = () => {
            p.background(0);
            // Or reference props here
           // I get an error if I try something like: p.print(props.name);
        }
    }

    componentDidMount() {
        this.myP5 = new p5(this.Sketch, this.myRef.current);
    }

    render() {
        return (
            <div ref={this.myRef}></div>
        )
    }
}

export default Sketch;

reactjs

来源：https://stackoverflow.com/questions/69488296/how-to-pass-react-props-into-a-p5-js-sketch

2条答案

按热度按时间

z9ju0rcb1#

您应该考虑使用react-p5，下面是一个简单的示例：

// // In a project consisting of multiple modules compiled with webpack
// // or browserify would use import statements:
// import React from 'react';
// import Sketch from 'react-p5';
// // But because we're including dependencies with script tags we just do this
const Sketch = reactP5; 

function Example(props) {
  let x = 50;
  let y = 50;
  
  const setup = (p, canvasParentRef) => {
    // use parent to render the canvas in this ref
    // (without that p5 will render the canvas outside of your component)
    p.createCanvas(p.windowWidth, p.windowHeight).parent(canvasParentRef);
  };

  const draw = (p) => {
    p.background(0);
    p.fill(props.color || 'blue');
    p.ellipse(x % p.width, y, 70, 70);
    // NOTE: Do not use setState in the draw function or in functions that are executed
    // in the draw function...
    // please use normal variables or class properties for these purposes
    x++;
  };

  return <Sketch setup={setup} draw={draw} />;
};

ReactDOM.render(
  <React.StrictMode>
    <Example color="green" />
  </React.StrictMode>,
  document.getElementById('root')
);

html, body { margin: 0; padding: 0; }

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.min.js"></script>
  <!-- react-p5 bundles p5.js v1.1.9 and sets window.p5 -->
  <script src="https://cdn.jsdelivr.net/npm/react-p5@1.3.19/build/index.min.js"></script>
</head>

<body>
  <div id="root"></div>
</body>

</html>

赞(0）回复(0）举报 2023-01-02

0qx6xfy62#

我也遇到过类似的问题，我发现在componentDidMount函数中将 prop 分配给myp5可以解决这个问题，如下所示：

import React from 'react';
import p5 from 'p5';

class Sketch extends React.Component {

  Sketch(p) {
    p.setup = function() {
      p.createCanvas(400, 400);
      p.print(this.name);
    }

    p.draw = function() {
      p.background(0);
      p.print(this.name);
    }
  }

  componentDidMount() {
    this.myP5 = new p5(this.Sketch, this.myRef.current);
    myp5.name = this.props.name;
  }

  render() {
    return (
      <div ref={this.myRef}></div>
    );
  }
}

export default Sketch;

赞(0）回复(0）举报 2023-01-02

我来回答

reactjs 如何将React prop 传递到p5.js草图中

2条答案

相关问题

热门标签

最新问答