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

Question

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

我正在尝试跟随 The Coding Train在这里他做类似的事情。

我已经尝试将代码放入盒子模型内的另一个 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();

...