Question

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

中找不到一些问题

另外，我需要了解如何在框中选择SVG元素。

任何帮助都将不胜感激。

Answer 1

至于创建一个Clink'N Drag矩形，我重写了代码成为this。看起来它的工作正常。

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

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

在鼠标释放时存储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;
}

Answer 2

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

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

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

Answer 3

我在基于Web的应用程序中完成了类似的工作，用户可以创建多个Svg Elements，然后使用Selection Box选择它们。现在关于在选择框中选择svg元素，我使用'Webworkers'进行复杂的数学计算。下面是检查svg元素是否在Selection rect内部的基本算法： -

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

这会对你有所帮助。您需要在选择矩形的mousemove事件上调用此函数。

如果您的应用程序很小，处理1到30个元素，则不需要Webworkers

用鼠标点击并拖动绘制一个矩形 - javascript

3 个答案: