drawing a rectangle with mouse click and drag - ja

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

In your fiddle you're referring to mouseUp. The jQuery method is referred to as mouseup. That's showing an error in the console.

Also, you're trying to update the html of an element that isn't in the DOM, #downlog.

Here's a fiddle showing something happening now: http://jsfiddle.net/7uNfW/33/

Answer 2

I have done similar work in my Web based application, where user can create multiple Svg Elements and then select them using Selection Box. Now About Selecting the svg element in selection box, i have used 'Webworkers' for complex mathematical calculations. Below would be the basic Algorithm to check whether an svg element is inside Selection rect or not:-

1) First Create a Webwroker and pass list of whole elements that are created on your canvas to it.

2) This list include bbox of each element

3) now compare each element bbox with your Rect . check the below function:-

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

This will help you. You need to call this function on mousemove event of selection rectangle.

• If your Application is small, dealing with 1 to 30 elements, than your do no need Webworkers

Answer 3

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