用鼠标点击并拖动绘制一个矩形 - 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的任务,我可以给您以下建议:

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