IONIC第三方库 [英] IONIC 3rd party libs

问题描述

我是离子的新手，需要一点帮助：

I'm new to ionic and need a little help:

我已经用这里，我真的很喜欢这个结果。

I have implemented things like chart.js with the tutorial from here, and I really liked the outcome.

但我尝试使用的 p5.js 做同样的事情。处理并且无法使其工作。

But I tried to do the same thing with p5.js from processing and could not get it to work.

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

I have to display data for a class on Data Visualization and want to use Ionic with mo.js, p5.js, or phaser.js to display the data.

推荐答案

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

First of all you need the p5 library from somewhere. The easiest way here is npm. So install p5 using npm:

npm install p5

然后你需要从 node_modules 导入库，所以webpack知道它应该把它放在你的供应商中.js bundle：

Then you need to import the library from node_modules so webpack knows it should put it in your vendor.js bundle:

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

然后你就可以这样使用它：

Then you can use it like that:

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本身一无所知所以我不能告诉你它是不是甚至一个好主意在离子项目中使用它，或者如果使用它的示例代码产生可用的东西，它只是我在github上找到的一个例子。我通过检查它是否创建了一个canvas元素并确实创建了一个具有示例中定义的维度（它是作为ion-app元素的兄弟元素创建的）来验证它正在工作：

I have to admit I do not know anything about p5 itself so I can not tell you if it is even a good idea to use it in an ionic project or if the example code on how to use it produces something useable, it is just an example I found on github. I verified that it is working by checking if it created a canvas element and it did create one with the dimension defined in the example (it was created as a sibling element of the ion-app element):

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

这篇关于IONIC第三方库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！