Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Desarrollo Web / Detectar un punto dentro de un polígono HTML5

Detectar un punto dentro de un polígono HTML5

Autor 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

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Conexión MySQL y C#

Conexión MySQL y C#

En este post vamos a crear una aplicación sencilla para conectar C# con MySQL. Manos a la obra 🙂 Necesitamos – Con...

Abrir enlace web desde JLabel con Java

Abrir enlace web desde JLabel con Java

El siguiente código te permite abrir enlaces web desde un JLabel, ademas aprovechando el soporte a etiquetas HTML del co...

Botones circulares de Google Plus en java

Botones circulares de Google Plus en java

Continuación del tutorial “Google Circles en java” o.O 🙂 La Interfaz El proyecto consta de una sola interfaz...

Ejemplo Cliente-Servidor en Android

Ejemplo Cliente-Servidor en Android

Continuando con estos post de Cliente/Servidor, en esta oportunidad realizaremos un ejemplo usando un dispositivo móvil...

Ejecutar función de postgreSQL desde Java

Ejecutar función de postgreSQL desde Java

Este es una continuación de un tutorial pasado [Funciones en PostgreSQL y pgAdmin], así que si quieres entenderlo mucho...

Leer archivos de texto

Leer archivos de texto

En este tutorial de android, vemos como leer un archivo de texto y mostrarlo en pantalla del celular, el texto elegido e...

Comparte lo que sabes

Categorias

Últimas entradas

En este y un segundo post desarrollaremos un microservicio java utilizando el framework Spark que implementara las funci...

Oi galera, en esta oportunidad les traigo una curiosidad que encontré por casualidad perdiendo el tiempo en Internet, se...

Kotlin es un lenguaje de programación relativamente nuevo que ha ido ganando terreno en el desarrollo de aplicaciones pa...

Kotlin es un lenguaje de programación de tipado estático que corre sobre la máquina virtual de Java y que también puede...

Android Bolivia

MAUS