KineticJS get all intersection

Question

I was working not so long ago with KineticJS and I have a problem.

I can draw circles (white, blue and red), and then I'll draw a polygon along the path of the blue circles.

But how do I find the coordinates, or at least something about the red circles. That is, about those who fall under the following polygons.

I tried using getIntersection but I do not understand what it returns. Sorry for my bad english. Thanks in advance!!

http://imageshack.us/scaled/thumb/42/7gok.jpg

Answer 1

I assume from your picture that all red and blue dots are positioned on a grid.

This means that the x and y of any dot are clamped to that grid (axis aligned)

I further assume that the blue dots define the outside of your polygon.

So you want to see if any particular red dot is inside that polygon?

Given these assumptions, any red dot is inside your polygon if it is surrounded by blue dots on all 4 vertical and horizontal sides

• Blue dot to left of red dot

   blueY==redY && blueX<redX 

• Blue dot to right of red dot

   blueY==redY && blueX>redX 

• Blue dot above red dot

   blueX==redX && blueY<redY 

• Blue dot below red dot

   blueX==redX && blueY>redY 

First, you need to be able to get all blue dots, so when you're creating blue dots be sure to assign them a name property of blue

name:"blue",

Then you can test any red dot using this function that checks if that red dot is surrounded by blue dots:

function isRedInPolygon(red){

    // get XY of the red circle
    var redX=red.getX();
    var redY=red.getY();

    // set up vars for results
    // these vars become true when blue dots are
    // directly up, down, left and right of the red dot
    var up=false;
    var down=false;
    var left=false;
    var right=false;

    // get all the blue dots into an array
    var blues=layer.get('.blue').toArray();

    for(var j=0;j<blues.length;j++){

        // get the XY of this blue
        var blue=blues[j];
        blueX=blues[j].getX();
        blueY=blues[j].getY();

        // test left/right
        if(blueX==redX){
            // left
            if(blueY<redY){ up=true; }
            // right
            if(blueY>redY){ down=true; }
        }

        // test up/down
        if(blue.Y==red.Y){
            if(blueX<redX){ left=true; }
            if(blueX>redX){ right=true; }
        }
    }

    // return true if this red dot is surrounded
    // by blue dots on all 4 sides
    return(up && down && left && right);
}

To get a list of all red objects inside the polygon

First, assign the name="red" to all red dots.

name:"red",

Then use this call to get an array of all red objects in the polygon.

var redsInside = listOfRedsInPolygon();

Using this function:

function listOfRedsInPolygon(){

    var reds=layer.get('.red').toArray();

    var redsInsidePolygon=[];

    for(var i=0;i<reds.length;i++){

        if(isRedInPolygon(reds[i])){
            redsInsidePolygon.push(reds[i]);
        }
    }

    return(redsInsidePolygon);
}

Disclaimer: I have not tested this code...it might need some tweaking.