angular - 将 p5 Canvas 添加到 Angular 组件

Question

我正在使用 p5js 构建一个 Angular 组件 clock.component。

她的完整来源: https://github.com/avsmips/angular4-p5js-app/blob/master/src/app/analog-clock/analog-clock.component.ts

HTML:

<div id="analog-clock-canvas"></div>

T:

createCanvas() {
   console.log("creating canvas");
   this.p5 = new p5(p => this.drawing(p));
}

drawing(p) {
   p.setup = () => {
   p.createCanvas(400, 400).parent("analog-clock-canvas");      
   ...
}

p5 创建一个 Canvas 并添加到具有 1 个声明的父 div analog-clock-canvas 中。但是，如果使用多个组件，它还会将 Canvas 添加到第一个组件中。

<div class="flow">
  <app-clock></app-clock>
  <app-clock></app-clock>
</div>

Answer 1

问题是parent('analog-clock-canvas')按 id 选择，并且所有组件都具有相同的，因为您已经对其进行了硬编码(我说的是 <div id="analog-clock-canvas"></div> )。通过 id 选择，将带来第一个匹配的结果，无论 DOM 中存在多少个。

我建议在您的组件的ngOnInit中生成一个唯一的ID并将其分配给div 。我喜欢使用 GUID。例如，使用 this实现:

<强> analog-clock.component.ts

...

private containerId: string;

...

ngOnInit() {
    this.containerId = this.uuidv4();
}

...

// Taken from:
// https://stackoverflow.com/a/2117523/12398336
private uuidv4() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  );
}

...

private drawing = function(p: any) {
    p.setup = () => {
      p.createCanvas(400, 400).parent(this.containerId);      
      ...

<强> analog-clock.component.html

<div [id]=[containerId]></div>