Question

我正在尝试在Javascript中创建一个拖动矩形，允许用户通过拖动绘制一个矩形，以便在画布上选择一个区域。

我正在尝试使用“xor”操作在鼠标移动处理程序上重复绘图。但我无法做到这一点。

我的代码是一个单独的html文件，如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        /*body, html {
            width: 100%
        }*/
        #canvas {
            background-color: #EFEFEF;
            width: 100%;
        }
    </style>
</head>
<body>
    <canvas id="canvas">
        canvas
    </canvas>
    <script src="jquery-1.11.1.js"></script>
    <script>
        var ctx = document.getElementById("canvas").getContext('2d');
        ctx.lineWidth = 1;

        var canvasOffset, offsetX, offsetY;
        var isDrawing = false;
        var prevX, prevY;
        canvasOffset = $("#canvas").offset();
        offsetX = canvasOffset.left;
        offsetY = canvasOffset.top;

        $("#canvas").on('mousedown', function(e) {
            handleMouseDown(e);
        }).on('mouseup', function(e) {
            handleMouseUp();
        }).on('mousemove', function(e) {
            handleMouseMove(e);
        });

        function handleMouseUp() {
            isDrawing = false;
            canvas.style.cursor = "default";
        }

        function handleMouseMove(e) {
            if (isDrawing) {
                var mouseX = e.clientX - offsetX;
                var mouseY = e.clientY - offsetY;
                ctx.globalCompositeOperation = "xor";
                ctx.strokeStyle = "red";
                ctx.beginPath();
                console.log("Erasing rect @ ", start_X, start_Y, prevX - start_X, prevY - start_Y);
                ctx.rect(start_X, start_Y, prevX - start_X, prevY - start_Y);

                console.log("Drawing rect @ ", start_X, start_Y, mouseX - start_X, mouseY - start_Y);
                ctx.rect(start_X, start_Y, mouseX - start_X, mouseY - start_Y);
                prevX = mouseX, prevY = mouseY;
                ctx.stroke();
            }
        }

        function handleMouseDown(e) {
            canvas.style.cursor = "crosshair";
            isDrawing = true;
            start_X = e.clientX - offsetX;
            start_Y = e.clientY - offsetY;
            prevX = start_X, prevY = start_Y;
        }
    </script>
    </body>
</html>

这是我的代码的jsfiddle链接。 http://jsfiddle.net/bjc7bp0q/1/

问题是： i）它没有从点击鼠标的点开始画画。 ii）它不会删除先前的矩形笔划。

非常感谢任何帮助。

更新正如Derek所建议的那样，更新了jsfiddle，由于宽度：100％，画布拉伸的修正，以及模糊补偿的像素偏移0.5。

更新的jsfiddle在这里（http://jsfiddle.net/bjc7bp0q/8/）。这几乎有效。但拖动时我仍然可以看到一些杂散的残留线碎片。

感谢您提供任何其他帮助。

第二次更新： 这似乎在Google Chrome中运行良好，但不适用于IE或Firefox。可能是这些浏览器的实现问题。

Javascript绘制弹性矩形带

0 个答案: