用鼠标单击并拖动绘制一个矩形 - JavaScript

Question

我试图在Javascript中绘制一个矩形（实际上是一个选择框），以选择选择中的SVG元素。我试图修复单击和拖动矩形的代码：http://jsfiddle.net/7uNfW/26/但是有一些问题我在function handleMouseDown(e)和function handleMouseUp(e)

中无法弄清楚

另外，我需要获得一些关于如何在框中选择SVG元素的想法。

任何帮助将不胜感激。

Answer 1

至于创建一个 Clink 'N Drag 矩形，我重写了代码，变成了这个。看起来它工作得很好。

现在，对于 SVG 部分，我不确定您将如何将 SVG 合并到画布中。请看一下这个库：http://fabricjs.com/

对于检测您的选择框是否覆盖 SVG 的任务，我可以给您以下建议：

存储启动X，启动Y，停止
• X，停止Y，鼠标释放时停止Y。
• 遍历所有 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;
}

Answer 2

在你的小提琴中，你指的是mouseUp.jQuery 方法称为 mouseup 。这在控制台中显示错误。

此外，您正在尝试更新不在 DOM 中的元素的 html，#downlog .

这里有一个小提琴，显示了现在正在发生的事情：http://jsfiddle.net/7uNfW/33/

Answer 3

我在基于 Web 的应用程序中也做了类似的工作，用户可以在其中创建多个 Svg 元素，然后使用选择框选择它们。现在关于在选择框中选择 svg 元素，我使用"Webworkers"进行复杂的数学计算。以下是检查 svg 元素是否在选择矩形内的基本算法：-

1）首先创建一个Webwroker，并将在画布上创建的整个元素的列表传递给它。

2）此列表包括每个元素的bbox

。

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;
};

这将对您有所帮助。您需要在选择矩形的鼠标移动事件上调用此函数。

• 如果您的应用程序很小，处理 1 到 30 个元素，那么您不需要 Web worker