Question

很抱歉，如果标题相当令人困惑，但是我在AngularJS的画布上画了一个矩形，我希望用户能够点击一个点，并且当mousedown被触发时，可以拖动矩形到最终位置，直到mouseup被触发。我的代码大部分都有用，除了没有办法在最后一个位置清除矩形，因此最终结果是绘制了很多矩形而不是最终产品。这是关于这个问题的一些代码，但是，我没有包含用于mouseup和mousedown b / c的eventlisteners，这些是相当不言自明的，根据需要工作，与问题无关。

    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

Answer 1

流程如下：

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

在编译语言中，您可以通过优化仅存储矩形的行来获益，但是使用JavaScript可以获得额外代码的开销，因此我们不妨在单个操作中绘制背景并让浏览器主要工作。

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

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

Javascript - 如何清除最后绘制的矩形，以便在“拖动”时仅绘制1。创建一个矩形

1 个答案: