我试图通过用户单击、鼠标移动和单击来绘制一个矩形。我的代码有两个问题。
首先，在绘制了一个矩形后，会自动假设将绘制另一个矩形。其次，第二个矩形的起点是创建第一个矩形的最后一次单击。
user2539506
问问题
81255 次
5 回答
45
你很亲密。所以，问题不在于 HTML5 中的“画布”元素，而在于真正是 div 的画布。
http://jsfiddle.net/d9BPz/546/
为了让我看到你的代码试图完成什么，我不得不整理它。需要发生的是跟踪方形元素。
每次单击画布时，我们都在做两件事之一。我们要么创建一个矩形元素，要么完成一个矩形元素。因此，当我们完成后，将“element”（以前称为“d”）设置为 null 是有意义的。创建元素时，我们必须将新的 DOM 元素分配给“元素”。
每次鼠标移动时，我们都想获取鼠标位置。如果元素正在创建过程中（或“非空”），那么我们需要调整元素的大小。
然后我们将它全部包装在一个函数中，这就是它的全部内容：
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>
于 2013-07-01T16:37:55.710 回答
13
这是单击移动单击创建矩形的方法
创建这些变量：
var isDrawing=false;
var startX;
var startY;
在您的 mousedown 事件处理程序中：
- 如果这是开始点击，设置 isDrawing 标志并设置 startX/Y。
- 如果这是结束单击，请清除 isDrawing 标志并绘制矩形。
您可能还想更改鼠标光标，以便用户知道他们正在绘制。
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 标志并绘制矩形
如果您更改了光标，请将其更改回来。
mouseIsDown=false;
ctx.beginPath();
ctx.rect(startX,startY,mouseX-startX,mouseY-startY);
ctx.fill();
canvas.style.cursor="default";
于 2013-07-01T15:42:43.340 回答
3
对于那些遇到滚动问题的人，我找到了解决方法。
您需要获取偏移量（使用 window.pageYOffset）并在任何推荐的片段中从鼠标位置减少它。你也应该把它从高处取下来。
于 2017-10-12T15:11:52.460 回答
2
我也在做一个项目，所以这是我的代码享受。
<!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>
于 2020-11-12T07:40:15.603 回答
0
下面是我在 React 中创建的解决方案。可能有一些极端情况，但据我所知它正在工作。
解决方法。
- 您必须有开始（x，y 位置）和结束（x，y）位置
- 一旦用户单击单元格捕获单元格编号和列编号开始 (x,y)，这将在 mouseDown 事件上发生
- 然后用户开始移动鼠标，在这种情况下分别捕获单元格号和行号 end (x,y)。
- 现在 div 绘制逻辑出现在条件将突出显示单元格的地方，如果以下条件为真。
- i = 细胞编号
- i >= Math.min(start,end) && i <= Math.max(start,end) && i%4 <= Math.max(startY, endY)
https://codesandbox.io/s/still-field-0q760y?file=/src/App.js
于 2022-02-20T10:18:21.177 回答