Angular Canvas 仅绘制最后一次迭代

Posted 2023-03-25

【中文标题】Angular Canvas 仅绘制最后一次迭代

【英文标题】：Angular Canvas only drawing last iteration

【发布时间】：2021-12-21 23:55:22

【问题描述】：

我想用有角度的画布制作一个棋盘。但它只是绘制最后一次迭代。

我已经尝试过 onload 功能。

这是我的代码：

 createBoard(): void 

 let row = 8;
 let col = 8;
 let x = 1;
 let y = 'a';
 let posx = 0;
 let posy = 0;
 let ctx = this.canvas.nativeElement.getContext('2d');

   for(let i = 0; i < row; i++)
     posx = 0;
     for(let j = 0; j < col; j++) 
       let img = new Image();

       img.onload = function() 
         ctx.drawImage(img, posx, posy, 75, 75);
       

       if ((i + j) % 2 == 0)
       
         img.src = "assets/img/Boardsquare_light_normal.png";
       
       else
       
         img.src = "assets/img/Boardsquare_dark_normal.png";
       
       y = this.nextChar(y);
       posx += 75;
     
     x += 1;
     y = 'a';
     posy += 75;
   

【问题讨论】：

尝试使用ngOnInit和ViewChild('canvas',static:true) canvas:ElementRef

我已经在用了

【参考方案1】：

您需要两个图像 img1 和 img2。由于您需要在绘制之前加载两个图像，您可以使用 rxj zip 运算符和 rxjs fromEvent 运算符

fromEvent，就像

formEvent(img1,'load').subscribe(_=>
     ...
)

//its equal than
img1.onLoad=function()
 ...

Observables 的好处是你可以组合、合并、改变……（我知道一开始有点难，但是一点知识是必要的，记住在 Angular 中所有的都是 Observables）

zip，在所有 observables 发出后，将值作为数组发出。

所以你可以写一些像

zip([fromEvent(img1,'load'),fromEvent(img2,'load')]).subscribe(_=>
  for(let i = 0; i < row; i++)
    posx = 0;
    for(let j = 0; j < col; j++) 
      if ((i + j) % 2 == 0)
        ctx.drawImage(img1, posx, posy, 75, 75);
      else
        ctx.drawImage(img2, posx, posy, 75, 75);
      posx += 75;
    
    posy += 75;
  
)
img1.src='https://picsum.photos/id/100/75/75';
img2.src='https://picsum.photos/id/235/75/75'

你可以看到fool stackblitz