用鼠标点击并拖动绘制一个矩形 - javascript [英] drawing a rectangle with mouse click and drag - javascript

问题描述

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

I was trying to draw a rectangle (actually a selection box) in Javascript, to select the SVG elements that come in the selection. I tried to fix the code for the click and drag rectangle: http://jsfiddle.net/7uNfW/26/ but there is some problem that I can't figure out in function handleMouseDown(e) and function handleMouseUp(e)

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

Plus I need to get some ideas as to how will I go about selecting the SVG elements in the box.

任何帮助都将不胜感激。

Any help would be appreciated.

推荐答案

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

As for the creating of a Clink 'N Drag rectangle, I rewrote the code to become this. It looks like it's working just fine.

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

Now, for the SVG part, I'm not sure how you'd go about incorporating SVG into canvas. Have a look at this library instead: http://fabricjs.com/

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

For the task of detecting if your selection box is covering a SVG, I can give you the following suggestions:

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

这篇关于用鼠标点击并拖动绘制一个矩形 - javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！