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 。