用鼠标单击并拖动绘制一个矩形 - javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19035506/
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 with mouse click and drag - javascript
提问by user1340852
I was trying to draw a rectangle (actually a selection box) in Javascript, to select the SVG elements that come in the selection.
I tried to fix the code for the click and drag rectangle: http://jsfiddle.net/7uNfW/26/but there is some problem that I can't figure out in function handleMouseDown(e)and function handleMouseUp(e)
我试图在 Javascript 中绘制一个矩形（实际上是一个选择框），以选择选择中的 SVG 元素。我试图修复的点击和拖动矩形代码：http://jsfiddle.net/7uNfW/26/但有一些问题，我无法弄清楚function handleMouseDown(e)和function handleMouseUp(e)
Plus I need to get some ideas as to how will I go about selecting the SVG elements in the box.
另外，我需要了解如何选择框中的 SVG 元素。
Any help would be appreciated.
任何帮助，将不胜感激。
回答by bvx89
As for the creating of a Clink 'N Drag rectangle, I rewrote the code to become this. It looks like it's working just fine.
至于创建一个 Clink 'N Drag 矩形，我重写了代码，变成了这个。看起来它工作得很好。
Now, for the SVG part, I'm not sure how you'd go about incorporating SVG into canvas. Have a look at this library instead: http://fabricjs.com/
现在，对于 SVG 部分，我不确定您将如何将 SVG 合并到画布中。看看这个库：http: //fabricjs.com/
For the task of detecting if your selection box is covering a SVG, I can give you the following suggestions:
对于检测您的选择框是否覆盖 SVG 的任务，我可以给您以下建议：
- Store the startX, startY, stopX, stopY as the mouse releases.
- Loop through all SVG files
- Check if there's a overlap, perhaps like so:
- 在鼠标释放时存储 startX、startY、stopX、stopY。
- 循环遍历所有 SVG 文件
- 检查是否有重叠，可能像这样：
.
.
if ((svg.startY+svg.height) < startY) {
return false; // svg too high
} else if (svg.y > stopY) {
return false; // svg too low
} else if ((svg.x + svg.width) < startX) {
return false; // svg too far left
} else if (svg.x > stopX) {
return false; // svg too far right
} else {
// Overlap
return true;
}
回答by Marty Cortez
In your fiddle you're referring to mouseUp. The jQuery methodis referred to as mouseup. That's showing an error in the console.
在您的小提琴中，您指的是mouseUp. jQuery方法称为 mouseup. 那是在控制台中显示错误。
Also, you're trying to update the html of an element that isn't in the DOM, #downlog.
此外，您正在尝试更新不在 DOM 中的元素的 html，#downlog.
Here's a fiddle showing something happening now: http://jsfiddle.net/7uNfW/33/
这是一个显示现在正在发生的事情的小提琴：http: //jsfiddle.net/7uNfW/33/
回答by RashFlash
I have done similar work in my Web based application, where user can create multiple Svg Elements and then select them using Selection Box. Now About Selecting the svg element in selection box, i have used 'Webworkers' for complex mathematical calculations. Below would be the basic Algorithm to check whether an svg element is inside Selection rect or not:-
我在基于 Web 的应用程序中做了类似的工作，用户可以在其中创建多个 Svg 元素，然后使用选择框选择它们。现在关于在选择框中选择 svg 元素，我已使用“Webworkers”进行复杂的数学计算。以下是检查 svg 元素是否在 Selection rect 内的基本算法：-
1) First Create a Webwroker and pass list of whole elements that are created on your canvas to it.
1) 首先创建一个 Webwroker 并将在画布上创建的整个元素列表传递给它。
2) This list include bbox of each element
2）这个列表包括每个元素的bbox
3) now compare each element bbox with your Rect . check the below function:-
3）现在将每个元素 bbox 与您的 Rect 进行比较。检查以下功能：-
isInsideSelectionBox = function(selectionBox){
var inside = false;
if(element.bbox.p1.x >= selectionBox.p1.x && element.bbox.p1.x <= selectionBox.p3.x && element.bbox.p1.y >= selectionBox.p1.y && element.bbox.p1.y <= selectionBox.p3.y){
inside = true;
}else if(element.bbox.p2.x >= selectionBox.p1.x && element.bbox.p2.x <= selectionBox.p3.x && element.bbox.p2.y >= selectionBox.p1.y && element.bbox.p2.y <= selectionBox.p3.y){
inside = true;
}else if(element.bbox.p3.x >= selectionBox.p1.x && element.bbox.p3.x <= selectionBox.p3.x && element.bbox.p3.y >= selectionBox.p1.y && element.bbox.p3.y <= selectionBox.p3.y){
inside = true;
}else if(element.bbox.p4.x >= selectionBox.p1.x && element.bbox.p4.x <= selectionBox.p3.x && element.bbox.p4.y >= selectionBox.p1.y && element.bbox.p4.y <= selectionBox.p3.y){
inside = true;
}
return inside;
};
This will help you. You need to call this function on mousemove event of selection rectangle.
这会帮助你。您需要在选择矩形的 mousemove 事件上调用此函数。
- If your Application is small, dealing with 1 to 30 elements, than your do no need Webworkers
- 如果您的应用程序很小，处理 1 到 30 个元素，则不需要 Webworkers
