我想在angular2上的图像上绘制一个矩形

Question

我有一个图像，我从一个url获得。我想在这个图像上画一个矩形。我目前正在试图使用画布来实现这一点，但我不完全理解如何实现它。当我使用这段代码时，画布中没有任何变化，它仍然是空白的。

我有这个在我的HTML

<canvas #layout></canvas> 

然后这在我的组件打字稿文件

@ViewChild('layout') canvasRef; 

//other code here 

drawRectangle(file: any): void 
{ 
    let canvas = this.canvasRef.nativeElement; 
    let context = canvas.getContext('2d'); 

    let source = new Image(); 
    source.src = this.imgUrl; 

    source.onload =() => 
    { 
     context.drawImage(source.src,0,0); 
     context.beginPath(); 
     context.rect(file.left, file.top, file.width, file.height); 
     context.stroke(); 
    }; 


} 

Answer 1

尝试添加onload()回调后更新source.src。还需要将图像（source）传递给drawImage不source.src所以这里是更新后的代码：

所以

@ViewChild('layout') canvasRef; 

//other code here 

drawRectangle(file: any): void 
{ 
    let canvas = this.canvasRef.nativeElement; 
    let context = canvas.getContext('2d'); 

    let source = new Image(); 

    source.onload =() => 
    { 
     context.drawImage(source, 0, 0); 
     context.beginPath(); 
     context.rect(file.left, file.top, file.width, file.height); 
     context.stroke(); 
    }; 

    source.src = this.imgUrl; 




}