p5.j​​s与angularjs-帮助为我想绘制的对象创建模型

Question

我想为正在绘制的对象创建模型，但是我在Angular中如何做到这一点感到很挣扎。我知道在特定功能之外无法识别p5方法，但这似乎是我在这里需要做的事情？

我正在尝试跟The Coding Train here一起跟随他做类似的事情。

我尝试将代码放入盒模型内部的另一个draw（）方法中，但我不认为这是正确的做法。

import * as Matter from 'matter-js';
import * as p5 from 'p5';

export class Box {

 ...

  show() {

       let pos = this.body.position;
       let angle = this.body.angle;

       p5.push();
       p5.translate(pos.x, pos.y);
       p5.rect(0,0, this.w, this.h);
       p5.pop();

 ...

我希望能够将其导出到组件中，实例化一个新框，然后在我的实例化draw（）方法中对其调用.show（）。

Answer 1

似乎可以将p5的实例传递到show方法中，而不是将p5导入到Box模型中。

从我的组件中...

const sketch = (s) => {

...

s.draw = () => {
   s.background(51);
   // s.rect(box1.position.x, box1.position.y, 80, 80);
   box1.show(s)
 };

...

并更新了Box模型的show（）方法

...

show(p5) {
   let pos = this.body.position;
   let angle = this.body.angle;

   p5.push();
   p5.translate(pos.x, pos.y);
   p5.rect(0,0, this.w, this.h);
   p5.pop();

...