私はangle2の画像に長方形を描画したい

Question

私は画像を持っています。私はURLから取得しています。この画像に長方形を描きたい。私は現在、これを実現するためにキャンバスを使用しようとしていますが、実装方法を完全に理解していません。このコードを使用するとキャンバスに変更はなく、空白のままです。

私は私のコンポーネントtypescriptファイルに私の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

source.srcを更新後onload()コールバックを追加してみてください。また、あなたがdrawImageに画像（source）を渡す必要はありませ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; 




}