Drawing a rectangle on mousemove and selecting all shapes within that rectangle on mouseup using kineticjs?

Question

I have selectionrectangle on mousemove(working fine). Can anybody suggest me, how to select shapes within that rectangles range on mouseup event? My code is like(only main functions):

function onMouseDown() {
             if (!isMouseDown) {
                 return
             }
             isMouseDown = true;
             if (selectionrectangle) {
                 selectionrectangle.remove();
             }
             pointerPosition = stage.getPointerPosition();
             x = Math.floor(pointerPosition.x)
             y = Math.floor(pointerPosition.y )
             originX = [];
             originY = [];
             originX.push(x);
             originY.push(y);
             selectionrectangle = new Kinetic.Rect({
                 x: originX[0],
                 y: originY[0],
                 width: 0,
                 height: 0,
                 stroke: 'pink',
                 strokeWidth: 3,
                 name: 'SelectionRectangle'
             });
             refRect = selectionrectangle;
             refRect1 = selectionrectangle;
             selectionrectangle.setListening(true);
             mainLayer.add(selectionrectangle);
         }
         function onMouseMove() {
             if (!isMouseDown) {
                 return;
             };
             isMouseDown = true;
             pointerPosition = stage.getPointerPosition();
             x = Math.floor(pointerPosition.x )
             y = Math.floor(pointerPosition.y)
             refRect.setWidth(x - refRect.getX());
             refRect.setHeight(y - refRect.getY());
             mainLayer.drawScene();
         }
         function onMouseUp() {
             isMouseDown = false;
             stage.add(mainLayer);
         }

Answer 1

Using bounding-boxes is an excellent way to testing for enclosure.

Demo: http://jsfiddle.net/m1erickson/f9pe4/

A bounding box consists of a selection's leftmost, rightmost, top and bottom coordinates.

The bounding box of your refRect can be put into an object like this:

// calculate a bounding box for the refRect

refRect.BoundingBox=refBoundingBox(refRect);

function refBoundingBox(refRect){
    return({
        left:refRect.getX(),
        top:refRect.getY(),
        right:refRect.getX()+refRect.getWidth(),
        bottom:refRect.getY()+refRect.getHeight()
    });
}

Then you can test all your shapes against that bounding box.

All core Kinetic shapes fall into 4 categories:

• Rectangular: Rect, Image, Text, Sprite,
• Circular: Circle, Wedge,
• Polypoint: Line, Polygon, Blob, Spline
• Undefinable structure: Custom (not examined in this answer)

Testing Rectangular shapes: Rect, Image, Text, Sprite:

// Test enclosure for rectangular shapes:
// Rect,Image,Text,Sprite

function isRectInBB(refBB,shape){
    var x=shape.getX();
    var y=shape.getY();
    return( 
        x>refBB.left &&
        x+shape.getWidth()<refBB.right &&
        y>refBB.top &&
        y+shape.getHeight()<refBB.bottom
    );
}

Testing Circular shapes: Circle, Wedge:

// Test enclusure for circular shapes:
// Circle,Wedge

function isCircleInBB(refBB,shape){
    var thisX=shape.getX();
    var thisY=shape.getY();
    var thisRadius=shape.getRadius();
    return( 
        thisX-thisRadius>refBB.left &&
        thisX+thisRadius<refBB.right &&
        thisY-thisRadius>refBB.top &&
        thisY+thisRadius<refBB.bottom
    );
}

Testing Polypoint shapes: Line, Polygon, Blob, Spline:

// Test enclosure for polypoint shapes:
// Line,Polygon,Blob,Spline

function isPolyInBB(refBB,shape){
    var x=shape.getX();
    var y=shape.getY();
    return(
        x+shape.minX>refBB.left &&
        y+shape.minY>refBB.top &&
        x+shape.maxX<refBB.right &&
        y+shape.maxY<refBB.bottom);
}

Answer 2

Check this old question: KineticJS and shapes inside area

I provide some information and background on how to solve your question, along with the OP has a JSFiddle example that will help get you started.