用鼠标点击和拖动绘制一个矩形 - javascript答案

【问题标题】：drawing a rectangle with mouse click and drag - javascript用鼠标点击和拖动绘制一个矩形 - javascript
【发布时间】：2013-10-02 20:24:48
【问题描述】：

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

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

任何帮助将不胜感激。

【问题讨论】：

控制台显示如下错误：Uncaught TypeError: Object [object Object] has no method 'mouseUp'
jsfiddle.net/qGzkG - 我稍微重写了你的代码，但至少现在它似乎可以工作了
@bvx89 谢谢，但这就是我最初从某个地方获取代码的方式。我想让它点击n拖动。我从这个链接开始：stackoverflow.com/questions/17408010/…

标签： javascript svg drawrectangle

【解决方案1】：

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

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

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

【讨论】：

即使我写了mouseup，也没有任何反应。
另外，您正在尝试更新不在 DOM 中的元素的 html，#downlog。
我添加了一个 ID 为 downlog 的 <p>，现在我看到发生了一些事情：jsfiddle.net/7uNfW/33
但是为什么不画矩形呢？
我不知道。我看到您正在使用 canvas.style.cursor = "crosshair"; 更改光标，但请注意，当您拖动十字准线时，它会更改为不同的样式。您可能想重新考虑一下或谷歌“使用 javascript 用鼠标绘制矩形”

【解决方案2】：

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

【讨论】：

谢谢，它现在工作得很好 :) 但是当我将它嵌入到我的 js 代码中以绘制一个简单的散点图时，其余的东西都消失了，只有绘图的矩形部分在网页上可见.我想知道我们是否可以对 SVG 矩形做同样的事情？那么，如果我使用相同的代码创建一个 svg 矩形而不是画布，这会是一个很好的解决方案吗？
MouseMoveHandler() 内部的方法ctx.clearRect() 会在每次鼠标移动时清除屏幕。您需要它来清除先前绘制的矩形。更好的解决方案是调用 render() 方法，该方法将绘制矩形和其他对象（仍然在每次鼠标移动时）。

【解决方案3】：

我在基于 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

【讨论】：