javascript - IONIC 第 3 方库

Question

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

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

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

我必须为数据可视化类(class)显示数据，并希望将 Ionic 与 mo.js、p5.js 或 phaser.js< 一起使用/strong> 显示数据。

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上找到的一个例子。我通过检查它是否创建了一个 canvas 元素来验证它是否正常工作，并且它确实创建了一个具有示例中定义的维度的元素(它是作为 ion-app 元素的同级元素创建的):

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