用鼠标在画布上绘制Angular2绘制矩形

Question

我是angular2和画布的新手，我正在尝试创建一个首先将图像绘制到画布上的组件，然后用户可以使用鼠标在该图像上绘制矩形（以点击和拖动方式）。这是我到目前为止几乎按预期工作的。

@Component({
    selector:'app-annotation',
    template:`                    
        <canvas #myCanvas width="400" height="400" style="background:lightgray;" (mousedown)="mdEvent($event)" (mouseup)="muEvent($event)" (mousemove)="mmEvent($event)"></canvas>
    `
})
export class ObjectDetectionComponent implements OnInit{

    startX:number=null;
    startY:number=null;
    drag=false;

    @ViewChild("myCanvas") myCanvas:ElementRef;

    mdEvent(e){
        //persist starting position
        this.startX=e.clientX;
        this.startY=e.clientY;
        this.drag=true;
    }

    mmEvent(e){

        if(this.drag){

            //redraw image on canvas
            let base_image = new Image();
            base_image.src = 'https://ak3.picdn.net/shutterstock/videos/10826363/thumb/1.jpg';
            let context: CanvasRenderingContext2D = this.myCanvas.nativeElement.getContext("2d");
            base_image.onload = function(){
                context.canvas.height=base_image.height;
                context.canvas.width=base_image.width;
                context.drawImage(base_image, 0, 0);
            };

            //draw rectangle on canvas
            let x = this.startX - this.myCanvas.nativeElement.getBoundingClientRect().left;
            let y= this.startY- this.myCanvas.nativeElement.getBoundingClientRect().top;
            let w = e.clientX -this.myCanvas.nativeElement.getBoundingClientRect().left - x;
            let h = e.clientY -this.myCanvas.nativeElement.getBoundingClientRect().top - y;
            context.setLineDash([6]);
            context.strokeRect(x, y, w, h);
        }
    }

    muEvent(e){
        //draw final rectangle on canvas
        let x = this.startX - this.myCanvas.nativeElement.getBoundingClientRect().left;
        let y= this.startY- this.myCanvas.nativeElement.getBoundingClientRect().top;
        let w = e.clientX -this.myCanvas.nativeElement.getBoundingClientRect().left - x;
        let h = e.clientY -this.myCanvas.nativeElement.getBoundingClientRect().top - y;
        this.myCanvas.nativeElement.getContext("2d").setLineDash([6]);
        this.myCanvas.nativeElement.getContext("2d").strokeRect(x, y, w, h);

        this.drag=false;
    }

    ngOnInit(){

        //draw image on canvas
        let base_image = new Image();
        base_image.src = 'https://ak3.picdn.net/shutterstock/videos/10826363/thumb/1.jpg';
        let context: CanvasRenderingContext2D = this.myCanvas.nativeElement.getContext("2d");
        base_image.onload = function(){
            context.canvas.height=base_image.height;
            context.canvas.width=base_image.width;
            context.drawImage(base_image, 0, 0);
        }
    }

}

这里的问题是，当单击并按住鼠标时，矩形仅显示是否有鼠标移动 - 但我希望只要仍然单击鼠标仍然显示当前矩形。这有点出乎意料，因为在mmEvent()中重绘图像后绘制矩形所以我希望矩形是在任何鼠标移动事件之后绘制的最后一个东西 - 但是base_image.onload()回调可能是混乱的随着时间的推移。有关解决此问题的任何建议吗？

更新：

在回调中绘制矩形似乎可以解决它

mmEvent(e) {

        if (this.drag) {

            //redraw image on canvas
            let base_image = new Image();
            base_image.src = 'https://ak3.picdn.net/shutterstock/videos/10826363/thumb/1.jpg';
            let context: CanvasRenderingContext2D = this.myCanvas.nativeElement.getContext("2d");
            let sx = this.startX;
            let sy = this.startY;

            let canvasTop = this.myCanvas.nativeElement.getBoundingClientRect().top;
            let canvasLeft = this.myCanvas.nativeElement.getBoundingClientRect().left;

            base_image.onload = function () {
                context.canvas.height = base_image.height;
                context.canvas.width = base_image.width;
                context.drawImage(base_image, 0, 0);

                //draw rectangle on canvas
                let x = sx - canvasLeft;
                let y = sy - canvasTop;
                let w = e.clientX - canvasLeft - x;
                let h = e.clientY - canvasTop - y;
                context.setLineDash([6]);
                context.strokeRect(x, y, w, h);
            };


        }
    }