title: HTML5 / kineticJS getIntersection function implementation
body: <p>I am learning <code>kineticjs</code> through tutorials provided at <a href="http://www.html5canvastutorials.com" rel="nofollow">http://www.html5canvastutorials.com</a>, things are good and easy to understand but, I am having issue in understanding the <code>getIntersection</code> function that i want to use among different objects while <code>dragging</code> to detect <code>collision / overlapping</code> objects.</p>
  
  <p>As far as I have understood the example the <code>getIntersection</code> function expects a position and checks if its intersecting with any other object or not.. </p>
  
  <p>Though I got them but with some issues.</p>
  
  <p>I am unable to accomplish this..</p>
  
  <p>Below is the code that I have tried up to now..</p>
  
  <pre><code>&lt;script&gt;
  
  var stage = new Kinetic.Stage({
      container: 'container',
      width: 1000,
      height: 500,
      opacity: 0.5
  });
  
  var layer = new Kinetic.Layer();
  var previous_position;
  var new_position;
  var collision = false;
  var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
  var yellowBox = null;
  for(var n = 0; n &lt; 6; n++) {
      // anonymous function to induce scope
      (function() {
          var i = n;
          if(n &lt; 3){
              y = 50;
              x = i * 100 + i * 10;
          }else{
              y = 150;
              x = (i - 3) * 100 + (i - 3) * 10 ;
              if(n == 3){
                  x = 0;
              }
  
          }
          var box = new Kinetic.Rect({
              x: x,
              y: y,
              width: 100,
              height: 50,
              fill: colors[i],
              stroke: 'black',
              strokeWidth: 4,
              draggable: true,
              name: colors[i]
          });
  
          box.on('dragstart', function() {
              previous_position =     {
                                          x: this.attrs.x,
                                          y: this.attrs.y 
                                      }; 
          });
  
          box.on('dragend', function() {
              if(collision){
                  //this.setPosition(previous_position);
                  layer.draw();
                  collision = false;
              }else{
                  //this.setPosition(new_position);
                  layer.draw();
              }
          });
  
          box.on("dragmove", function(evt) {
              console.log(layer.children.length);
              if(layer.children.length &gt; 1){
                  console.log('dragging');
                  new_position = {x: this.attrs.x,
                              y: this.attrs.y};
          //              var posBL = {x: this.attrs.x,
          //                          y: this.attrs.height + this.attrs.y};
          //              var posTR = {x: this.attrs.x    + this.attrs.width,
          //                          y: this.attrs.y};
                  var posBR = {x: this.attrs.x    + this.attrs.width,
                              y: this.attrs.y + this.attrs.height };
                  var collisionTL = this.getStage().getIntersections(new_position);
          //              var collisionBL = this.getStage().getIntersections(posBL);
          //              var collisionTR = this.getStage().getIntersections(posTR);
          //              var collisionBR = this.getStage().getIntersections(posBR);
  
                  console.log(collisionTL);
                  console.log(collisionTL.shapes);
  
          //              if(collisionTL.length &gt; 1 || collisionBL.length &gt; 0 || collisionTR.length &gt; 0 || collisionBR.length &gt; 0){
                  if(collisionTL.length &gt; 1){
                      console.log(collisionTL.shapes);
                      collision = true;
                  }else{ //if(collisionBR.length &gt; 0){
                      collision = true;
                  }
          //              for(i=0; i &lt; collision.length; i++){
          //              //  console.log(collision[i]._id);
          //              }
              }
          });
  
  
          if(colors[i] === 'yellow') {
              yellowBox = box;
          }
  
          layer.add(box);
      })();
  }
  
  stage.add(layer);
  
  &lt;/script&gt;
  </code></pre>
  
  <p>in the <code>dragmove</code> event you guyz can see I get the four corner positions of the dragging box {commented right now} and with this I was able to detect the overlap / collision but it has 2 issues:</p>
  
  <p><strong>1.</strong> very slow with only 3 objects in my test</p>
  
  <p><strong>2.</strong> if non of the corner points intersect it didn't fire the collision stuff {for this one box can be bigger so it can cover the other entirely}</p>
  
  <p>I would highly apreciate if anyone can please help me accomplish this stuff..</p>
  
  <p><strong>[A]</strong> Any object dragging if by any mean overlaps any other object I want it to show collision.</p>
  
  <p><strong>[B]</strong> If possible make <code>getIntersection</code> to work on a particular layer group whichever is possible
  [C] any other workaround beside <code>kineticJS</code> to accomplish the above task</p>
  
  <p>Regards</p>