Javascript 离子第三方libs

我是爱奥尼亚的新手，需要一些帮助：

我在中的教程中实现了类似chart.js的东西，我非常喜欢结果

但是我试着用p5.jsfrom做同样的事情，但没能让它工作

---

我必须在数据可视化上显示一个类的数据，并希望使用Ionic withmo.js、p5.js或phaser.js来显示数据。

首先，您需要从某处获得p5库。这里最简单的方法是npm。因此，使用npm安装p5：

npm install p5

然后您需要从

node\u 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元素以及它是否使用示例中定义的维度创建了一个canvas元素（它是作为ion app元素的同级元素创建的），来验证它是否正常工作：

---

您仍然需要将模板呈现到DOM中，但是可以使用将元素（

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页面上的canvas元素中显示任何内容。您可能需要在库中进行一些操作，以了解如何实际渲染某些内容，但我无法帮助您。

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);

  }
}