Ich versuche, Rechteck mit der Maus auf der Leinwand zu zeichnen. Hier ist mein erster Versuch:Angular 2: Rechteck auf Leinwand mit Maus zeichnen.
private captureEvents(canvasEl: HTMLCanvasElement) {
Observable
.fromEvent(canvasEl, 'mousedown')
.subscribe((res: MouseEvent) => {
console.log('MOUSE DOWN');
const rect = canvasEl.getBoundingClientRect();
this.originPoint = new Point();
this.originPoint.x = res.clientX;
this.originPoint.y = res.clientY;
this.startPoint = new Point();
this.startPoint.x = res.clientX - rect.left;
this.startPoint.y = res.clientY - rect.top;
});
Observable
.fromEvent(canvasEl, 'mouseup')
.subscribe((res: MouseEvent) => {
console.log('MOUSE UP');
let w: number = res.clientX - this.originPoint.x ;
let h: number = res.clientY - this.originPoint.y;
this.cx.rect(this.startPoint.x, this.startPoint.y, w, h);
this.cx.stroke();
}
);
}
Dies funktioniert, aber es zeigt, Rechteck nach mouseUp Ereignis, und ich möchte die Zeichnung Rechteck sehen, wenn Sie die Maus bewegen.
So wird die 'mouse down' Zeichenfolge in der Konsole protokolliert, aber das Rechteck wird nicht gezeichnet, bis 'mouse up' protokolliert wird. –
Ja, es ist so implementiert. Ich würde gerne den "Fortschritt" des Zeichnens sehen, während ich die Maus ziehe. Aber ich habe keine Ahnung, wie ich das umsetzen soll. –
Haben Sie versucht, das onmousemove-Ereignis zu verwenden? –