Collision between div and area tag

Question

I'm looking for a possibility to detect a collision between a div and an area tag. Is there any way to fix this problem?

Thanks

Answer 1

you're right, this function need a rectangle area, but if you want a function for the polygon, you this could be a solution :

function Collision(){
    if(
          (  (area.posX1 > div.posX) and (area.posX1 < div.posX+div.Width) and (area.posY1 > div.posY) and (area.posY1 < div.posY+div.Height)    )
       || (  (area.posX2 > div.posX) and (area.posX2 < div.posX2+div.Width) and (area.posY2 > div.posY) and (area.posY2 < div.posY+div.Height)    )
       || ....
    )
}

with (posX1,posY1) first coordinates of the polygon, and(posX2,posY2) sencond coordinates of the polygon, ... ...

If you want a global function, you can give your polygon a parameter for the function and use a foreach loop to test if the current apex of the polygon is NOT into the div and return to break the end of the loop (in javascript, foreach is for (var element in List){ ... } //

    for (var CurrentApex in myPolygon)
    {
        if(   (currentApex.posX < div.posX)
           || (currentApex.posX > div.posX.div.Width)
           || (currentApex.posY < div.posY)
           || (currentApex.posY > div.posY.div.Height
        )
            return false;
    }

Answer 2

i don't know if there is an official function to do it but you can write this function yourself by using their position and their Width&Height ...

for example :

function collision(){
   ret=false;
   if(area.posX > div.posX) and (area.posX < div.posX+div.Width))
      if((area.posY > div.posY) and (area.posY < div.posY+div.Height))
         //left top corner is into the div --> COLLISON
         ret=true;

   if((area.posX+area.Width > div.posX) and (area.posX+area.Width < div.posX+div.Width))
       if((area.posY > div.posY) and (area.posY < div.posY+div.Height))
            //Right top corner is into the div --> COLLISON
            ret=true;

   if(area.posX > div.posX) and (area.posX < div.posX+div.Width))
      if((area.posY+area.Height > div.posY) and (area.posY+area.Height < div.posY+div.Height))
            //left bottom corner is into the div --> COLLISON
            ret=true;

   if((area.posX+area.Width > div.posX) and (area.posX+area.Width < div.posX+div.Width))
       if((area.posY+area.Height > div.posY) and (area.posY <+area.Height div.posY+div.Height))
            //Right bottom corner is into the div --> COLLISON
            ret=true;
return ret;

}

or

function collision(){
    if(    (area.posX+area.Width < div.posX)
        || (area.posX > div.posX+div.Width)
        || (area.posY+area.Height< div.posY)
        || (area.posY > div.posY+Height)
    )
        return false;
    else
        return true;
}