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.

the console is showing the following error: Uncaught TypeError: Object [object Object] has no method 'mouseUp' — Marty Cortez, Sep 26 '13 at 18:23
http://jsfiddle.net/qGzkG/ - I rewrote your code a bit, but it seems to work now at least — bvx89, Sep 26 '13 at 18:42
@bvx89 Thanks, but this is how I initially got the code from somewhere. I want to make it click n drag. I started from this link: http://stackoverflow.com/questions/17408010/javascript-drawing-a-rectangle-using-click-mouse-move-and-click — user1340852, Sep 26 '13 at 18:55

score 10 · Accepted Answer · answered Sep 26 '13 at 19:31

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

Thanks, it works pretty well now :) However when I embedded it in my js code for drawing a simple scatterplot, the rest of the stuff disappeared, and only the drawing rects part is visible on the webpage. I was wondering if we could do the same with an SVG Rectangle? So will it be a good solution if i create an svg rect instead of a canvas, using the somewhat the same code? — user1340852, Sep 26 '13 at 19:42
The method `ctx.clearRect()` inside of MouseMoveHandler() clears the screen each time your mouse moves. You need this to clear the previously drawn rectangles. A better solution would be to call a render()-method, which would draw the rectangle AND the other objects (Still on each mouse move). — bvx89, Sep 26 '13 at 20:16

Marty Cortez · Answer 2 · 2013-09-26T18:31:59.137

2

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/

edited Sep 26 '13 at 18:31

answered Sep 26 '13 at 18:25

Marty Cortez

2,325
1
17
22

Even if I write mouseup, nothing happens. – user1340852 Sep 26 '13 at 18:29
Also, you're trying to update the html of an element that isn't in the DOM, #downlog. – Marty Cortez Sep 26 '13 at 18:30
1

I added a `
` with an id of `downlog`, and now I see something happening: http://jsfiddle.net/7uNfW/33/
– Marty Cortez Sep 26 '13 at 18:32
but why isn't it drawing the rectangle? – user1340852 Sep 26 '13 at 18:35
I don't know. I see that you are using `canvas.style.cursor = "crosshair";` to change the cursor, but notice that when you drag the crosshair it changes to a different styling. You might want to rethink that or google "drawing a rectangle with the mouse using javascript" – Marty Cortez Sep 26 '13 at 18:37

RashFlash · Answer 3 · 2013-09-27T05:59:38.867

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

drawing a rectangle with mouse click and drag - javascript

3 Answers3

Linked