Question

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

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

但是我尝试使用processing中的 p5.js 做同样的事情而无法让它发挥作用。

我必须在数据可视化上显示类的数据，并希望将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本身一无所知所以我不能告诉你在离子项目中使用它是否是一个好主意，或者如果使用它的示例代码产生可用的东西，它这只是我在github上找到的一个例子。我通过检查它是否创建了一个canvas元素并确实创建了一个具有示例中定义的维度（它是作为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。

IONIC第三方库

2 个答案: