如何使用 P5 Vector 方法与打字稿做出反应答案

【问题标题】：How can I use P5 Vector methods in react with typescript如何使用 P5 Vector 方法与打字稿做出反应
【发布时间】：2022-08-21 10:07:50
【问题描述】：

我是 p5.js 的新手，我正在尝试将我在教程中从 Coding Train 学到的内容转换为带有 React 和 Typescript 的 NextJS 应用程序。

我有这个 Vehicle 类，但是当我尝试使用任何 Vector 方法时，我发现找不到 Vector：

import * as p5 from \"p5\";

export default class Vehicle {
  pos: p5.Vector;
  target: p5.Vector;
  vel: p5.Vector;
  acc: p5.Vector;
  r: number;
  maxspeed: number;
  maxforce: number;

  constructor(p5: p5, x: number, y: number) {
    this.pos = p5.createVector(p5.random(p5.width), p5.random(p5.height));
    this.target = p5.Vector.random2D();
    this.vel = p5.createVector(10,20);
    this.acc = p5.createVector();
    this.r = 15; //radius
    this.maxspeed = 5;
    this.maxforce = 0.1;
  }

   behaviors(p5: p5) {
    let arrive = this.arrive(p5, this.target);
    this.applyForce(arrive);
  }
 
   applyForce(force) {
    this.acc.add(force);
  } 

  seek(p5:p5, target) {
    let desired = p5.Vector.sub(target, this.pos);
    desired.setMag(this.maxspeed);
    let steer = p5.Vector.sub(desired, this.vel);
    steer.limit(this.maxforce);
    return steer;
  } 

  arrive(p5: p5, target: p5.Vector) {
    let desired = p5.Vector.sub(target, this.pos);
    let distance = desired.mag();
    let speed = this.maxspeed;
    if (distance < 100) {
      speed = p5.map(distance, 0, 100, 0, this.maxspeed);
    }
    desired.setMag(speed);
    let steer = p5.Vector.sub(desired, this.vel);
    steer.limit(this.maxforce);
    return steer;
  }


  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }

  show(p5: p5) {
    p5.stroke(255);
    p5.strokeWeight(5);
    p5.point(this.pos.x, this.pos.y);
  }
}

根据我的 package.json 我正在使用：\"@types/p5\": \"^1.4.2\"，和 \"react-p5\": \"^1.3.30\"，作为包装。任何想法如何使这项工作？

标签： reactjs typescript p5.js

【解决方案1】：

这令人困惑且难以正确解释，但它与在实例模式下使用 P5 有关。构造函数中的 p5 变量是指作为参数传入的 p5 实例变量，不是到导入的包。 Vector 对象存在于包中，但不存在于实例中。

您的代码需要同时访问包和实例，因此您需要两个单独的变量名。

例如：

import * as p5Package from "p5";

constructor(p5Instance: p5Package.p5InstanceExtensions, x: number, y: number) {
    this.pos = p5Instance.createVector(p5Instance.random(p5Instance.width), p5Instance.random(p5Instance.height));
    this.target = p5Package.Vector.random2D();

或者更简单地说：

import * as p5 from "p5";

constructor(p: p5, x: number, y: number) {
    this.pos = p.createVector(p.random(p.width), p.random(p.height));
    this.target = p5.Vector.random2D();

（p5.p5InstanceExtensions 类型在技术上更正确，但它们都可以工作）。

您还可以通过直接导入 Vector 来避免不明确变量的问题：

import { Vector, p5InstanceExtensions } from "p5";

export default class Vehicle {
  pos: Vector;
  /*...*/

  constructor(p5: p5InstanceExtensions, x: number, y: number) {
    this.pos = p5.createVector(p5.random(p5.width), p5.random(p5.height));
    this.target = Vector.random2D();

【讨论】：