1
後、私はangular2コンポーネントがあります。angular2のdrawImageキャンバスに変更detetion
@Component({
selector: 'my-image',
template: `
<img #img src="{{src}}" style='display: none;' />
<canvas #canvas width="{{width}}" height="{{height}}"></canvas>`
})
export class ImageComponent implements AfterViewInit {
@ViewChild('canvas') canvas: ElementRef;
@ViewChild('img') img: ElementRef;
private ctx: CanvasRenderingContext2D;
private element: HTMLImageElement;
src: string;
width: number;
height: number;
constructor(canvas: ElementRef, img: ElementRef) {
this.width = window.innerWidth;
this.height = window.innerHeight;
this.src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
}
ngAfterViewInit() {
this.ctx = this.canvas.nativeElement.getContext('2d');
this.element = this.img.nativeElement;
}
@HostListener('window:resize')
resize() {
this.width = window.innerWidth;
this.height = window.innerHeight;
this.render();
}
clear() {
this.ctx.clearRect(0, 0, this.width, this.height);
}
render() {
this.clear();
this.ctx.drawImage(this.element, 0, 0, 400, 400);
}
}
をだから、すべては私がウィンドウのサイズを変更する場合ただし、サイズ変更コールバックが打撃を受けるとの通話は、レンダリング、素晴らしい作品。次に、キャンバス上のバインディングが発生し、コンテキストがリセットされ、空白のキャンバスが残されます。私の最初の考えは、変更検出が発生した後にレンダリングを再度呼び出すことでした。それは正しいアプローチですか、それとも良い方法ですか? @rinukkusuの答えが正しいか
おかげ
でrenderメソッドを呼び出してみてください。 – rinukkusu