IONIC 3rd 方库答案

【问题标题】：IONIC 3rd party libsIONIC 3rd 方库
【发布时间】：2017-10-01 11:53:55
【问题描述】：

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

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

但我尝试使用来自 processing 的 p5.js 做同样的事情，但无法让它工作。

我必须在数据可视化上显示一个类的数据，并且想将 Ionic 与 mo.js、p5.js 或 phaser.js 显示数据。

【问题讨论】：

标签： javascript ionic-framework ionic2 phaser-framework p5.js

【解决方案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>

【讨论】：

这非常接近，不幸的是我无法在离子页面的画布元素内显示任何内容。
好吧，您可能需要在库中玩一玩才能弄清楚如何实际渲染某些东西，但我无法帮助您。

【解决方案2】：

您仍然需要将模板渲染到 DOM 中，但您可以使用 Renderer2 将元素 ElementRef (private el: ElementRef) 渲染到 DOM，然后将 p5 实例附加到 el 元素 (@ 987654325@)。

这对我有用：

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。

【讨论】：