5

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

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

任何帮助，将不胜感激。

4

3 回答 3

10

至于 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;
}
于 2013-09-26T19:31:52.160 回答
2

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

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

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

于 2013-09-26T18:25:20.500 回答
1

我在基于 Web 的应用程序中完成了类似的工作，用户可以在其中创建多个 Svg 元素，然后使用选择框选择它们。现在关于在选择框中选择 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
于 2013-09-27T03:27:04.347 回答