p5.js 和 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();

...

p5.js 和 angularjs - 帮助为我想绘制的对象创建模型

p5.js with angularjs - help creating a model for an object I'd like to draw

angularjs

p5.js

matter.js