1
我想用鼠标在画布上绘制矩形。这是我第一次尝试:角2:用鼠标在画布上绘制矩形。
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();
}
);
}
这工作,但它表明矩形mouseUp事件后,我想看到绘制矩形移动鼠标时。
所以是在控制台中记录的“鼠标向下”字符串,但直到记录“鼠标向上”时才会绘制矩形。 –
是的,它是以这种方式实现的。我想在拖动鼠标时看到绘图的“进度”。但我不知道如何实现这一点。 –
您是否尝试过使用onmousemove事件? –