typescript - 通过拖放（画布）绘制一个矩形

Question

所以我想从我的画布 UI 中的按钮中拖出一个矩形，并在画布上放置一个新的矩形，但每次我试图将它拖出来时，它都会在短时间内产生很多矩形，然后完全停止。我的代码中的问题在哪里？

更新

    function update(): void {
    crc2.clearRect(0, 0, width, height);
    crc2.putImageData(img, 0, 0);

    if (rectangleArray) {
        for (let i: number; i < rectangleArray.length; i++) {
            rectangleArray[i].draw();
        }
    }

    if (rectangleDragged == true) {
        currentRectangle.draw();
    }

    

}

手柄Mousedown

  function handleMousedown(_client: MouseEvent): void {

    let isLeftClicked = _client.which === 1;
    if (!isLeftClicked) return;

    if (_client.offsetX > xButton1 &&
        _client.offsetX < xButton1 + wButton1 &&
        _client.offsetY > yButton1 &&
        _client.offsetY < yButton1 + hButton1) {

        let rectangleDraw = new Draw(_client.offsetX, _client.offsetY);
        let rectangle = new Rectangle(0, rectangleDraw);
        currentRectangle = rectangle;            
        rectangleArray.push(rectangle);
        rectanglePresent = true;
        rectangleDragged = true;

        window.addEventListener("onclick", handleMousemoveRectangle);
        window.addEventListener("mouseup", handleMouseup);



        console.log(rectangleClick);

    }

   for (let rectangle of rectangleArray) {

        if (
            rectanglePresent == true &&
            _client.offsetX > rectangle.position.x - rectangle.w / 2 &&
            _client.offsetX < rectangle.position.x + rectangle.w / 2 &&
            _client.offsetY > rectangle.position.y - rectangle.h / 2 &&
            _client.offsetY < rectangle.position.y + rectangle.h / 2) {

            window.addEventListener("mousemove", handleMousemoveRectangle);
            currentRectangle = rectangle;
            rectangleDragged = true;
        }
    }
}

手柄鼠标

    function handleMouseup(_client: MouseEvent): void {

    if (dragged) {
        setTimeout(() => {
            dragged = false;
        },         1000);

    }

    for (let rectangle of rectangleArray) {
        currentRectangle = rectangle;
        if (rectanglePresent == true &&
            currentRectangle.position.y > 600
        ) {
            let index: number = rectangleArray.indexOf(currentRectangle);
            rectangleArray.splice(index, 1);
        }
        
    }

    window.removeEventListener("mousemove", handleMousemoveRectangle);
    window.removeEventListener("mouseup", handleMouseup);

}

手柄鼠标移动矩形

   export function handleMousemoveRectangle(_client: MouseEvent): void {
    currentRectangle.position.x = _client.offsetX;
    currentRectangle.position.y = _client.offsetY;
    currentRectangle.draw();
    rectangleDragged = true;
    dragged = true;
    console.log();      
}

标签： typescriptcanvasdrawdrag