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

这是导入问题的导入方式。您应该输入：

来导入它

import 'p5';

然后声明一个变量：

private p5;

您现在应该能够做到这样的事情：

ngOnInit() {
  this.createCanvas();
}

private createCanvas() {
  this.p5 = new p5(this.sketch);
}

private sketch(p: any) {
  p.setup = () => {
    p.createCanvas(700, 600);
  };

  p.draw = () => {
    p.background(255);
    p.fill(0);
    p.rect(p.width / 2, p.height / 2, 50, 50);
  };
}

这是我的版本：

Angular CLI: 1.7.4
Node: 9.11.1
OS: win32 x64
Angular: 5.2.11
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

和package.json中的最后一个版本的p5：

 "p5": "^0.6.1"

一切都对我很好。

希望它会有所帮助。

Answer 2

更新：也适用于Angular CLI 7.1.0

Angular CLI：6.2.3

节点：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);
  }

Answer 3

通过示例展示了如何导入和实现的GitHub存储库。它有助于填补我所缺少的内容，以及如何实际显示画布。

<https://github.com/avsmips/angular4-p5js-app>

在模板HTML中添加具有ID的div。

<div id="analog-clock-canvas"></div>

然后在创建画布时在组件中将其附加到该div。

private drawing = function (p: any) {
p.setup = () => {
  p.createCanvas(p.windowWidth, p.windowHeight).parent('analog-clock-canvas');
  p.angleMode(p.DEGREES);
  p.rectMode(p.CENTER);
  p.background(0);
};
p.center = { x: 0, y: 0 };
p.draw = () => {

在Angular 7中为我工作

Answer 4

我创建了一个抽象类，以便能够对其进行扩展并以更简单的方式工作，使用示例：

import { P5JSInvoker } from 'src/p5-jsinvoker';

export class RandomWalkerComponent extends P5JSInvoker implements OnInit{

  constructor() {
    super()
    this.startP5JS(document.body);
  }

  setup(p:p5) {
    p.createCanvas(400, 400);
  }

  draw(p:p5) {
    p.stroke(0);
    p.circle(200, 200, 2);
  }
}

我将存储库传递给您 https://github.com/soler1212/P5JSInvoker

如何在角度5应用程序中使用p5.js

4 个答案: