drawing a rectangle with mouse click and drag - javascript

Question

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)

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.

Answer 1

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.

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/

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

• Store the startX, startY, stopX, stopY as the mouse releases.
• Loop through all SVG files
• Check if there's a overlap, perhaps like so:

.

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