angular - 如何在 Angular 5 应用程序中使用 p5.js

Question

我已经做了

npm install p5 --save

我编辑了 .angular.cli.json

"scripts": [
    "../node_modules/p5/lib/p5.min.js",   
    "../node_modules/p5/lib/addons/p5.sound.js",   
    "../node_modules/p5/lib/addons/p5.dom.js" 
  ]

并导入为

import * as p5 from 'p5';

在 app.component.ts 文件中

但现在在哪里添加函数 setup() 和函数 draw() 。我试过直接添加它，但它不起作用

Answer 1

更新:也适用于 Angular CLI 7.1.0

Angular CLI: 6.2.3

Node: 10.9.0

package.json:

"p5": "^0.7.2"

导入库

import * as p5 from 'p5';
import "p5/lib/addons/p5.sound";
import "p5/lib/addons/p5.dom";

p5 设置

ngOnInit() {
    const sketch = (s) => {

      s.preload = () => {
        // preload code
      }

      s.setup = () => {
        s.createCanvas(400, 400);
      };

      s.draw = () => {
        s.background(255);
        s.rect(100, 100, 100, 100);
      };
    }

    let canvas = new p5(sketch);
  }