Javascript - 如何清除绘制的最后一个矩形，在“拖动”创建矩形时只绘制 1答案

【问题标题】：Javascript - how to clear last rectangle drawn, as to only draw 1 when 'dragging' to create a rectangleJavascript - 如何清除绘制的最后一个矩形，在“拖动”创建矩形时只绘制 1
【发布时间】：2015-04-28 05:26:36
【问题描述】：

对不起，如果标题相当混乱，但我正在 AngularJS 中将一个矩形绘制到画布上，我希望用户能够点击一个点，并且当 mousedown 被触发时，可以拖动矩形到它的最终位置，直到 mouseup 被触发。我的代码大部分都有效，除了无法清除最后一个位置的矩形，因此最终结果是绘制了很多矩形而不是一个最终产品。这是有关该问题的一些代码，但是，我没有包含 mouseup 和 mousedown b/c 的事件侦听器，它们相当不言自明，根据需要工作，并且与问题无关。

    element.bind('mousemove', function(event){

        if(drawing){
            // get current mouse position
            if(event.offsetX!==undefined){
                currentX = event.offsetX;
                currentY = event.offsetY;
            } else { //firefox
                currentX = event.layerX - event.currentTarget.offsetLeft;
                currentY = event.layerY - event.currentTarget.offsetTop;
            }

            rect.style.width = (currentX - startX) + 'px';
            rect.style.height = (currentY - startY) + 'px';

            //draw the rectangle using context
            draw(startX, startY, currentX - startX, currentY - startY);

        }
    });

    function draw(aX, aY, bX, bY){
        //this is where I'm drawing too many rectangles!!
        ctx.beginPath();
        ctx.lineWidth="2";
        ctx.strokeStyle="red";
        ctx.strokeRect(aX,aY,bX,bY);
    }

注意：This post gives a good overview of the problem, except that it is not javascript

【问题讨论】：

标签： javascript html angularjs canvas angularjs-directive

【解决方案1】：

流程如下：

鼠标按下时，将背景存储到临时画布，将矩形绘制到主画布
鼠标移动时，从 temp 重绘背景，在 main 重绘矩形
鼠标向上时，从 temp 重绘背景，松开 temp

在编译语言中，您可以通过优化仅存储矩形的线条而受益，但在 JavaScript 中，额外代码的开销会消耗掉这种优势，因此我们不妨在一次操作中绘制背景，让浏览器承担主要工作。

您可以通过仅从存储的背景中绘制一个代表绘制矩形的区域来进行优化。

如果您不想存储画布的副本，您可以选择从头开始渲染背景。如果内存成为问题，这是一个可行的选择，但会以性能为代价。

【讨论】：