Angular 角度，使用鼠标上的画布绘制多个矩形事件

我正在尝试创建一个有角度的绘图工具。我创建了一个可以在画布元素上绘制矩形的工具，该工具工作正常，但我一次只能绘制一个矩形，我只是不知道如何“不清除”前一个矩形并在画布上保留多个图形。我不能清除很多画布，因为我将有更多的图纸，而不仅仅是矩形

rectangleDrawing() {

    // first coordinates when clicked
    let startX = 0;
    let startY = 0;

    const rect = this.canvasEl.getBoundingClientRect();

    fromEvent(this.canvasEl, "mousedown")
        .pipe(
            switchMap((e:MouseEvent) => {

                startX = e.clientX - rect.left;
                startY = e.clientY - rect.top;

                return fromEvent(this.canvasEl, 'mousemove').pipe(

                    takeUntil(fromEvent(this.canvasEl, 'mouseup')),
                    takeUntil(fromEvent(this.canvasEl, 'mouseleave'))
                )

            })
        ).subscribe((event:MouseEvent) => {

            let x = event.clientX - rect.left;
            let y = event.clientY - rect.top;

            let width = x - startX;
            let height = y - startY;


            this.setCanvasProperties(10, 'square', 'rgba(255,158,43,0.6)');

            this.cx.beginPath();

            // if I comment this line, the rectangles will stay, but they 
            // won't be clear, making multiples rectangles inside the 
            // main rectangle
            this.cx.clearRect(0,0, this.canvasEl.width, this.canvasEl.height);

            this.cx.rect(startX, startY, width, height);

            this.cx.stroke();

        });

}

setCanvasProperties(lineWidth, lineCap, strokeStyle) {
    this.cx = this.canvasEl.getContext('2d');
    this.cx.lineWidth = lineWidth;
    this.cx.lineCap = lineCap;
    this.cx.strokeStyle = strokeStyle;
}

---

这个链接是一个很好的例子：，如果你评论清楚行，你可以看到主要问题。许多示例似乎一次只允许一个矩形。

鼠标向上移动时，可以将绘制的矩形存储在数组中，然后绘制该数组和当前矩形

首先，让我们设置数组并将宽度和高度保持为全局变量：

var width;
var height;
var drawItems = [];

然后，

mouseup

功能如下：

$(canvas).on('mouseup', function(e) {
  mousedown = false;

  drawItems.push({
    x0: last_mousex,
    x1: width,
    y0: last_mousey,
    y1: height
  });
});

这是

mousemove

功能：

$(canvas).on('mousemove', function(e) {
    mousex = parseInt(e.clientX-canvasx);
    mousey = parseInt(e.clientY-canvasy);
    if(mousedown) {
        ctx.clearRect(0,0,canvas.width,canvas.height); //clear canvas

        ctx.strokeStyle = 'black';
        ctx.lineWidth = 10;

        for(var i=0; i<drawItems.length; i++) {
            ctx.beginPath();
            ctx.rect(drawItems[i].x0, drawItems[i].y0, drawItems[i].x1, drawItems[i].y1);
            ctx.stroke();
        }

        width = mousex-last_mousex;
        height = mousey-last_mousey;
        ctx.beginPath();
        ctx.rect(last_mousex,last_mousey,width,height);
        ctx.stroke();
    }
    //Output
    $('#output').html('current: '+mousex+', '+mousey+'<br/>last: '+last_mousex+', '+last_mousey+'<br/>mousedown: '+mousedown);
});

$（canvas）.on（'mousemove'，函数（e）{
mousex=parseInt（e.clientX-canvasx）；
mousey=parseInt（例如clientY-canvasy）；
如果（鼠标向下）{
ctx.clearRect（0,0，canvas.width，canvas.height）；//清除画布
ctx.strokeStyle=‘黑色’；
ctx.线宽=10；
对于（var i=0；我和你一样面临同样的问题！！我看到了你的代码，是的，如果我们评论清楚的线，我们不能画多个矩形。。请告诉我你是否找到了解决方案，因为我被卡住了。（下面由Garcia给出的解决方案不是角度的）但是，当您第一次尝试创建矩形时，它将不起作用，但在第二次尝试后，矩形被绘制。总是在第一次尝试时它不起作用。我也面临着相同的问题，如@heliosk。我的代码是角度的，但我已经应用了您建议的逻辑。感谢您的建议，它解决了我的问题。