将 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>

TS:

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:
// 
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>

将 p5 canvas 添加到 angular 组件

add p5 canvas to angular component

p5.js

angular