我想在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; 




}