добавить холст p5 к angular компоненту - PullRequest
Новая
       6

добавить холст p5 к angular компоненту

2 голосов
/ 20 марта 2020

Я создаю angular компонент clock.component с p5js.

Полный источник от нее: https://github.com/avsmips/angular4-p5js-app/blob/master/src/app/analog-clock/analog-clock.component.ts

Html: 

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

Ц: 

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 создает холст и добавляет в родительский div analog-clock-canvas с 1 декларацией. Тем не менее, он также добавляет холст в первый компост, если используется несколько компоновок. 

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

enter image description here

1 Ответ

2 голосов
/ 20 марта 2020

Проблема в том, что parent('analog-clock-canvas') выбирает по идентификатору, и все компоненты имеют одно и то же, поскольку вы жестко закодировали его (я говорю о <div id="analog-clock-canvas"></div>). Выбор по идентификатору принесет первый соответствующий результат, независимо от того, сколько существует в DOM.

Я рекомендую создать уникальный идентификатор в ngOnInit вашего компонента и присвоить его div. Мне нравится использовать GUID. Например, используя эту реализацию:

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