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