gpt4 book ai didi

reactjs - 如何在 p5.js 中使用 React

转载 作者:行者123 更新时间:2023-12-03 09:52:19 29 4
gpt4 key购买 nike

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

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

最佳答案

需要做的第一件事是安装 create-react-app工具。一旦它启动并运行 p5.js 和 react-p5-wrapper可以包含包;假设有一个像 这样的包管理器npm 正在使用,这可以通过执行 npm install p5 react-p5-wrapper 来完成使用任何被认为必要的标志。

react-p5-wrapper 是一个包装器组件,它接收对草图的引用( instance mode ),并使用一些 react 组件“生命周期方法”来相应地对其进行操作,主要是通过执行一个名为 myCustomRedrawAccordingToNewPropsHandler(props) 的方法来操作它。需要在所述草图中定义。

要试一试并查看它的运行情况,可以像这样修改 App.js 文件的内容:

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 导入,在这种情况下称为草图:
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);
}
}

如果一切正常,屏幕上应该有一个按钮和一个草图,每次按下按钮时,草图中的圆圈都会随机改变颜色。

需要注意的是 myCustomRedrawAccordingToNewPropsHandler函数在 componentDidMount 中被调用和 componentWillReceiveProps包装器的“生命周期方法”,后者目前被归类为 unsafe .

关于reactjs - 如何在 p5.js 中使用 React,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54868777/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com