IONIC 3rd 方库

Question

我是 ionic 的新手，需要一些帮助：

我已经用这里的教程实现了诸如 chart.js 之类的东西，我真的很喜欢这个结果。

但是我试图从处理过程中对p5.j​​s做同样的事情，但无法让它工作。

我必须显示数据可视化类的数据，并希望将 Ionic 与mo.js 、 p5.j​​s或phaser.js 一起使用来显示数据。

Answer 1

首先，您需要某个地方的 p5 库。 这里最简单的方法是 npm。 所以使用 npm 安装 p5：

npm install p5

然后你需要从node_modules导入库，这样 webpack 知道它应该把它放在你的vendor.js包中：

import * as p5 from 'p5/lib/p5.min';

然后你可以这样使用它：

let sketch = p => {
  let x = 100;
  let y = 100;

  p.setup = () => {
    p.createCanvas(700, 410);
  };

  p.draw = () => {
    p.background(0);
    p.fill(255);
    p.rect(x, y, 50, 50);
  };
};

let myp5 = new p5(sketch);

我不得不承认我对 p5 本身一无所知，所以我不能告诉你在 ionic 项目中使用它是否是一个好主意，或者关于如何使用它的示例代码产生了一些可用的东西，它只是一个我在github上找到的例子。 我通过检查它是否创建了一个画布元素来验证它是否正常工作，并且它确实创建了一个具有示例中定义的尺寸的元素（它被创建为 ion-app 元素的同级元素）：

<canvas id="defaultCanvas0" style="width: 700px; height: 410px;" width="2100" height="1230"></canvas>

Answer 2

您仍然需要将模板渲染到 DOM 中，但您可以使用Renderer2将元素ElementRef （ private el: ElementRef ）渲染到 DOM，然后将 p5 实例附加到el元素（ this.el.nativeElement ）。

这对我有用：

import { Component, OnInit, ElementRef, Renderer2 } from '@angular/core';

import * as p5 from 'p5';

@Component({
  selector: 'app-p5',
  templateUrl: './p5.page.html',
  styleUrls: ['./p5.page.scss'],
})
export class P5Page implements OnInit {

  constructor(
    private el: ElementRef,
    private renderer: Renderer2
  ) {}

  ngOnInit() {

    new p5(p => {
      let x = 100;
      let y = 100;

      p.setup = () => {
        p.createCanvas(700, 410);
      };

      p.draw = () => {
        p.background(0);
        p.fill(255);
        p.rect(x, y, 50, 50);
      };
    }, this.el.nativeElement);

  }
}

当然，您需要先运行npm install p5 ，也许还需npm install @types/p5 。