本文介绍了如何在p5.js中使用React的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我真的很喜欢p5.js和react.js,所以我想知道如何将两者结合在一起,但是我做不到,所以我需要您的帮助.我真的不能为您提供一些代码示例,因为我不知道如何开始.

I really like p5.js and react.js so i wondered how to combine these two together, and i was unable to do it so I need your help.I cant really provide you with some code samples because I have no clue how to start.

所以我想做的是:1.创建反应应用程序2.使用p5.js渲染画布(我不需要p5.dom和p5.sound)

So what I want to do :1. create-react-app2.render a canvas using p5.js (i dont need the p5.dom and p5.sound)

推荐答案

需要做的第一件事是安装创建反应应用工具.一旦启动并运行p5.js和 react-p5-wrapper 程序包可以包括在内;假设正在使用像 npm 这样的软件包管理器,可以通过执行npm install p5 react-p5-wrapper并使用任何必要的标志来实现.

First thing that needs to be done is install the create-react-app tool. Once it's up and running the p5.js and the react-p5-wrapper packages can be included; assuming a package manager like npm is being used, this can be done by executing npm install p5 react-p5-wrapper with whatever flags are considered necessary.

react-p5-wrapper是一个接收引用的包装器组件(实例模式)到草图,并使用一些react组件生命周期方法"对其进行相应的操作,主要是通过执行需要在所述草图中定义的称为myCustomRedrawAccordingToNewPropsHandler(props)的方法.

The react-p5-wrapper is a wrapper component that receives a reference (instance mode) to the sketch and uses some of the react component "lifecycle methods" to manipulate it accordingly, mainly by executing a method called myCustomRedrawAccordingToNewPropsHandler(props) that needs to be defined within said sketch.

要尝试一下并使其运行,可以按如下所示修改 App.js 文件的内容:

To give it a try and see it running, the contents of the App.js file could be modified like this:

import React, { Component } from 'react';
import P5Wrapper from 'react-p5-wrapper';
import sketch from './sketches/sketch';
import './App.css';

class App extends Component {
  constructor(){
    super();
    this.state = {color:[Math.random()*255, Math.random()*255, Math.random()*255]};
    this.randomColor = this.randomColor.bind(this);
  }

  randomColor(){
    this.setState({color:[Math.random()*255, Math.random()*255, Math.random()*255]}
    )
  }

  render() {
    return (
      <div>
        <button onClick={this.randomColor}>Random Color</button>
        <P5Wrapper sketch={sketch} color={this.state.color}></P5Wrapper>
      </div>
    );
  }
}

export default App;

sketch 是从另一个文件夹中的 sketch.js 导入的,在本例中为 sketches :

Where sketch is imported from sketch.js which is located in another folder, in this case called sketches:

export default function sketch(p){
    let canvas;

    p.setup = () => {
      canvas = p.createCanvas(300, 200);
      p.noStroke();
    }

    p.draw = () => {
      p.background('orangered');
      p.ellipse(150, 100, 100, 100);
    }

    p.myCustomRedrawAccordingToNewPropsHandler = (newProps) => {
      if(canvas) //Make sure the canvas has been created
        p.fill(newProps.color);
    }
}

如果一切正常,则应该在屏幕上显示一个按钮和一个草图,每次按下该按钮时,草图中的圆圈会随机更改颜色.

If everything is working, a button and a sketch should be on screen and every time the button is pressed the circle in the sketch changes colors randomly.

应注意,在包装的componentDidMountcomponentWillReceiveProps生命周期方法"中调用了myCustomRedrawAccordingToNewPropsHandler函数,包装当前被分类为不安全.

It should be noted that the myCustomRedrawAccordingToNewPropsHandler function is called in the componentDidMount and the componentWillReceiveProps "lifecycle methods" of the wrapper, the latter being currently classified as unsafe.

这篇关于如何在p5.js中使用React的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-31 16:21