javascript 使用单击、鼠标移动和单击绘制矩形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17408010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drawing a rectangle using click, mouse move, and click
提问by Spencer Lockhart
I'm trying to draw a rectangle by a user click, mouse move, and click. There are two problems with my code.
我正在尝试通过用户单击、鼠标移动和单击来绘制一个矩形。我的代码有两个问题。
Firstly, after one rectangle is drawn it is automatically assumed that another one will be drawn. Secondly, the starting point on the second rectangle is the last click that created the first rectangle.
首先，在绘制一个矩形后，会自动假定将绘制另一个矩形。其次，第二个矩形的起点是创建第一个矩形的最后一次单击。
回答by Spencer Lockhart
You were close. So, the question isn't really about the "canvas" element in HTML5, but a canvas that is really a div.
你很接近。所以，问题不在于 HTML5 中的“canvas”元素，而是一个真正是 div 的画布。
http://jsfiddle.net/d9BPz/546/
http://jsfiddle.net/d9BPz/546/
In order for me to see what your code was trying to accomplish, I had to tidy it up. What needed to happen was tracking of the square element.
为了让我看到你的代码试图完成什么，我不得不整理它。需要发生的是跟踪方形元素。
We are doing one of two things everytime we click on the canvas. We are either creating a rectangle element, or finishing a rectangle element. So, when we're finished it makes sense to set 'element' (previously named 'd') to null. When creating an element, we have to assign the new DOM element to 'element'.
每次单击画布时，我们都在做两件事之一。我们要么创建一个矩形元素，要么完成一个矩形元素。因此，当我们完成时，将 'element'（以前称为 'd'）设置为 null 是有意义的。创建元素时，我们必须将新的 DOM 元素分配给“元素”。
Everytime the mouse moves, we want to get the mouse position. If the element is in the process of creation (or "not null"), then we need to resize the element.
每次鼠标移动时，我们都想获取鼠标位置。如果元素正在创建过程中（或“非空”），那么我们需要调整元素的大小。
Then we wrap it all up in a function, and that's all there is to it:
然后我们将它全部包装在一个函数中，这就是它的全部内容：
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";
}
}
}
Usage: Pass the block-level element that you would like to make a rectangle canvas. Example:
用法：传递您想要制作矩形画布的块级元素。例子：
<!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>
回答by markE
Here's how to click-move-click to create a rectangle
这是单击-移动-单击以创建矩形的方法
Create these variables:
创建这些变量：
var isDrawing=false;
var startX;
var startY;
In your mousedown event handler:
在您的 mousedown 事件处理程序中：
- If this is the starting click, set the isDrawing flag and set the startX/Y.
- If this is the ending click, clear the isDrawing flage and draw the rectangle.
- 如果这是开始单击，请设置 isDrawing 标志并设置 startX/Y。
- 如果这是结束单击，请清除 isDrawing 标志并绘制矩形。
You might also want to change the mouse cursor so the user knows they are drawing.
您可能还想更改鼠标光标，以便用户知道他们正在绘图。
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";
}
Here is a Fiddle: http://jsfiddle.net/m1erickson/7uNfW/
这是一个小提琴：http: //jsfiddle.net/m1erickson/7uNfW/
Instead of click-move-click, how about using drag to create a rectangle?
不是单击-移动-单击，而是使用拖动来创建矩形如何？
Create these variables:
创建这些变量：
var mouseIsDown=false;
var startX;
var startY;
In your mousedown event handler, set the mouseIsDown flag and set the startX/Y.
在 mousedown 事件处理程序中，设置 mouseIsDown 标志并设置 startX/Y。
Optionally, change the cursor so the user knows their dragging a rectangle.
或者，更改光标，以便用户知道他们正在拖动一个矩形。
mouseIsDown=true;
startX=mouseX;
startY=mouseY;
canvas.style.cursor="crosshair";
In your mouseup event handler, clear the mouseIsDown flag and draw the rect
在您的 mouseup 事件处理程序中，清除 mouseIsDown 标志并绘制矩形
If you changed the cursor, change it back.
如果您更改了光标，请将其更改回来。
mouseIsDown=false;
ctx.beginPath();
ctx.rect(startX,startY,mouseX-startX,mouseY-startY);
ctx.fill();
canvas.style.cursor="default";
回答by Barazu
For those who encountered the scrolling problem, I've found a fix.
You need to get the offset (using window.pageYOffset) and reduce it from the mouse position in any of the recommended snippets given. You should take it off from the height as well.
对于那些遇到滚动问题的人，我找到了解决方法。
您需要获取偏移量（使用 window.pageYOffset）并将其从给定的任何推荐片段中的鼠标位置减少。你也应该从高处取下它。
