通过鼠标单击并拖动绘制矩形 - javascript

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

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

任何帮助，将不胜感激。

至于创建 Clink 'N Drag 矩形，我将代码重写为this http://jsfiddle.net/qGzkG/2/。看起来运行得很好。

现在，对于 SVG 部分，我不确定如何将 SVG 合并到画布中。看看这个库：http://fabricjs.com/ 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;
}