reactjs - 我在使用预加载函数通过 react-p5 库加载图像时遇到问题

Question

我已经使用 react-p5 库将 P5 库与 React 集成，但是当我使用预加载函数加载图像时，出现错误。问题是，如何让预加载 p5 函数在 React 中加载图像？

代码如下:

import React, { Component } from "react";
import Sketch from "react-p5";
import ReactJS from './images/Icons/React.jpg';
let test;
export default class Sket extends Component {
  x = 50
  y = 50

  preload = (p5) =>{
     test = p5.loadImage(ReactJS, ()=>{
        p5.image(test, 0, 0, 50, 50)
     });
  }

  setup = (p5, parent) => { // window width is still not optimized for extra large screen
    var sket = p5.createCanvas(parent.offsetWidth, parent.offsetWidth).parent(parent);
    sket.position(0, 0);
  }
  draw = (p5) => {
    p5.background(0)
    p5.ellipse(this.x, this.y, 70, 70)
    this.x++
    this.y++
  //  p5.image(test, 50, 50)
  }

  render() {
    return <Sketch setup={this.setup} draw={this.draw} />
  }
}

Answer 1

从 URL 加载图像，而不是“从变量”，所以:

export default class Sketch extends Component {
  constructor(props) {
    super(props);
    // just keep these in your constructor:
    this.x = 50;
    this.y = 50;
  } 

  setup(p5, parent) {
    this.p5 = p5;
    p5.loadImage("./images/blah.jpg", img => {
      this.img = img;
      p5.redraw(); // <- only if you're running with noLoop()
    });
  }

  ...

然后更新 draw 以仅在图像存在时绘制图像:

draw() {
  const { p5, img, x, y } = this;

  if (img) {
    p5.image(img, x, y);
  }

  ...
}

当然:你不能只说 <Sketch setup={this.setup} draw={this.draw}>因为this关键字将在运行时指向全局范围。自从 React 16 以来，你要么需要使用 bind在构造函数中显式隐藏你的函数(这是一个糟糕的主意)，或者使用 arrow functions确保 this指向声明时的内容。

到目前为止，箭头函数是更好的选择:

render() {
  return <Sketch
    setup={(...args) => this.setup(...args)}
    draw={() => this.draw()}
  />;
}