Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
Home / Desarrollo Web / Detectar un punto dentro de un polígono HTML5

Detectar un punto dentro de un polígono HTML5

Por jc mouse jueves, noviembre 15, 2012

En un ejemplo anterior [Seleccionar y mover shapes en html5] se utilizo un método sencillo para detectar si un punto se encuentra dentro un shape de forma rectangular, pero no siempre las figuras que se pinten en un shape tendrían una forma básica, en ocasiones necesitaremos conocer si un punto (X,Y) pertenece a un polígono irregular, buscando una solución por la red, encontré un algoritmo que funciona bastante bien, originalmente estaba escrito para Actionscript, el autor es Miguel Moraleda, pasar a javascript no es nada del otro mundo, aquí les dejo para quien le sirva porque a mi si me sirvió 🙂 :

gui demo

 

/**
* Funcion que determina si un punto(X,Y) se encuentra dentro de un poligono
* @pointList Array de puntos Ej.: Array[ (0,0) , (100,50), (34,67) ]
* @p Punto(X,Y)
*/
function insidePolygon( pointList , p )
{
   var counter = 0;
   var i;
   var xinters;
   var p1  = new punto(0,0);
   var p2 = new punto(0,0);
   var n = pointList.length;

   p1 = pointList[0];
   for (i = 1; i <= n; i++)
   {
      p2 = pointList[i % n];
      if (p.y > Math.min(p1.y, p2.y))
      {
         if (p.y <= Math.max(p1.y, p2.y))
         {
            if (p.x <= Math.max(p1.x, p2.x))
            {
               if (p1.y != p2.y) {
                  xinters = (p.y - p1.y) * (p2.x - p1.x) / (p2.y - p1.y) + p1.x;
                  if (p1.x == p2.x || p.x <= xinters)
                     counter++;
               }
            }
         }
      }
      p1 = p2;
   }
   if (counter % 2 == 0)
   {
      return(false);
   }
   else
   {
      return(true);
   }
}

Descargar ejemplo completo

Tags

Artículos similares

Operador de Complemento bit a bit «~»

Operador de Complemento bit a bit unario Entre los operadores a nivel de bits de uso más común en java tenemos al operad[...]

Google Circles en java

En este tutorial crearemos el botón de Google+ Google Circles para una interfaz de escritorio 🙂 si no sabes lo que son e[...]

Añade un PlaceHolder a un JTextField

PlaceHolder: PlaceHolder es un atributo propio de HTML5 y es el texto que aparece dentro de un campo de texto (un JTextF[...]

Generador de código para Netbeans

El IDE Netbeans al igual que Eclipse :), nos permite personalizar el espacio de trabajo y añadir funcionalidades que nos[...]

Compartir imagen desde android – Share Image

En este post crearemos una aplicación android que nos permitirá compartir una imagen con Facebook, whatsapp, bluetooth,[...]

GraphADT: Clases para trabajar con grafos en java

GraphADT es una proyecto alojado en github escrito en java que te permite trabajar con grafos, a la fecha de escribir es[...]