Question

我正在尝试通过用户点击，鼠标移动和点击来绘制矩形。我的代码有两个问题。

首先，在绘制一个矩形后，会自动假设将绘制另一个矩形。其次，第二个矩形的起点是创建第一个矩形的最后一次点击。

http://jsbin.com/uqonuw/3/edit

Answer 1

你很亲密。所以，问题不在于HTML5中的“canvas”元素，而是一个真正是div的画布。

http://jsfiddle.net/d9BPz/546/

为了让我看到你的代码想要完成什么，我不得不整理它。需要做的是跟踪方形元素。

每次点击画布时，我们都会做两件事之一。我们要么创建一个矩形元素，要么完成一个矩形元素。所以，当我们完成时，将'element'（以前称为'd'）设置为null是有意义的。在创建元素时，我们必须将新的DOM元素分配给'element'。

每次鼠标移动时，我们都希望获得鼠标位置。如果元素处于创建过程中（或“非空”），那么我们需要调整元素的大小。

然后我们将它全部包装在一个函数中，这就是它的全部内容：

function initDraw(canvas) {
    var mouse = {
        x: 0,
        y: 0,
        startX: 0,
        startY: 0
    };
    function setMousePosition(e) {
        var ev = e || window.event; //Moz || IE
        if (ev.pageX) { //Moz
            mouse.x = ev.pageX + window.pageXOffset;
            mouse.y = ev.pageY + window.pageYOffset;
        } else if (ev.clientX) { //IE
            mouse.x = ev.clientX + document.body.scrollLeft;
            mouse.y = ev.clientY + document.body.scrollTop;
        }
    };

    var element = null;    
    canvas.onmousemove = function (e) {
        setMousePosition(e);
        if (element !== null) {
            element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
            element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
            element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
            element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
        }
    }

    canvas.onclick = function (e) {
        if (element !== null) {
            element = null;
            canvas.style.cursor = "default";
            console.log("finsihed.");
        } else {
            console.log("begun.");
            mouse.startX = mouse.x;
            mouse.startY = mouse.y;
            element = document.createElement('div');
            element.className = 'rectangle'
            element.style.left = mouse.x + 'px';
            element.style.top = mouse.y + 'px';
            canvas.appendChild(element)
            canvas.style.cursor = "crosshair";
        }
    }
}

用法：传递您想要制作矩形画布的块级元素。例如：

<!doctype html>
<html>
<head>
    <style>
    #canvas {
        width:2000px;
        height:2000px;
        border: 10px solid transparent;
    }
    .rectangle {
        border: 1px solid #FF0000;
        position: absolute;
    }
    </style>
</head>
<body>
    <div id="canvas"></div>
    <script src="js/initDraw.js"></script>
    <script>
        initDraw(document.getElementById('canvas'));
    </script>
</body>
</html>

Answer 2

以下是点击 - 移动 - 点击以创建矩形的方法

创建这些变量：

var isDrawing=false;
var startX;
var startY;

在你的mousedown事件处理程序中：

如果这是开始点击，请设置isDrawing标志并设置startX / Y。
如果这是结束点击，请清除isDrawing flage并绘制矩形。

您可能还想更改鼠标光标，以便用户知道他们正在绘图。

if(isDrawing){
    isDrawing=false;
    ctx.beginPath();
    ctx.rect(startX,startY,mouseX-startX,mouseY-startY);
    ctx.fill();
    canvas.style.cursor="default";
}else{
    isDrawing=true;
    startX=mouseX;
    startY=mouseY;
    canvas.style.cursor="crosshair";
}

这是一个小提琴：http://jsfiddle.net/m1erickson/7uNfW/

如何使用拖动创建矩形而不是点击 - 移动 - 点击？

创建这些变量：

var mouseIsDown=false;
var startX;
var startY;

在mousedown事件处理程序中，设置mouseIsDown标志并设置startX / Y.

（可选）更改光标，以便用户知道拖动矩形。

      mouseIsDown=true;
      startX=mouseX;
      startY=mouseY;
      canvas.style.cursor="crosshair";

在mouseup事件处理程序中，清除mouseIsDown标志并绘制rect

如果您更改了光标，请将其更改回来。

      mouseIsDown=false;
      ctx.beginPath();
      ctx.rect(startX,startY,mouseX-startX,mouseY-startY);
      ctx.fill();
      canvas.style.cursor="default";

Answer 3

对于那些遇到滚动问题的人，我找到了修复方法。
您需要获取偏移量（使用window.pageYOffset）并在给定的任何建议片段中将其从鼠标位置减少。你也应该从高处取下它。

Answer 4

我也在从事一个项目，所以这是我的代码享受。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selection</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <style>
        body {
            margin: 0px;
            background-color: #f1f1f1;
        }
        canvas {
            border: none;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="500"></canvas>
    <div id="output"></div>
    <script>
        //Canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//Variables
var canvasx = $(canvas).offset().left;
var canvasy = $(canvas).offset().top;
var last_mousex = last_mousey = 0;
var mousex = mousey = 0;
var mousedown = false;

//Mousedown
$(canvas).on('mousedown', function(e) {
    last_mousex = parseInt(e.clientX-canvasx);
    last_mousey = parseInt(e.clientY-canvasy);
    mousedown = true;
});

//Mouseup
$(canvas).on('mouseup', function(e) {
    mousedown = false;
    ctx.clearRect(0, 0, canvas.width, canvas.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.beginPath();
        var width = mousex-last_mousex;
        var height = mousey-last_mousey;
        ctx.rect(last_mousex,last_mousey,width,height);
        //ctx.fillStyle = "#8ED6FF";
        ctx.fillStyle = 'rgba(164, 221, 249, 0.3)'
        ctx.fill();
        ctx.strokeStyle = '#1B9AFF';
        ctx.lineWidth = 1;
        ctx.fillRect(last_mousex, last_mousey, width, height)
        ctx.stroke();
    }
    //Output
    $('#output').html('current: '+mousex+', '+mousey+'<br/>last: '+last_mousex+', '+last_mousey+'<br/>mousedown: '+mousedown);
});
    </script>
</body>
</html>

使用单击，鼠标移动和单击绘制矩形

4 个答案: