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

Cambiar plataforma JDK en Netbeans

Cambiar plataforma JDK en Netbeans

Es recomendable tener actualizado la Maquina Virtual Java de nuestro equipo para poder disfrutar de las mejoras que trae...

MariaDB: Tablas Virtuales (Vistas – View)

MariaDB: Tablas Virtuales (Vistas – View)

¿Qué es una vista? Una vista (View) o Tabla Virtual, es una forma lógica de ver los datos ubicados en varias tablas, es...

Gráficos estadísticos con Base de Datos SQLite

Gráficos estadísticos con Base de Datos SQLite

Si necesitamos mostrar gráficos estadísticos en nuestras aplicaciones android, contamos con muchas librerías disponibles...

Crea un Themes WordPress con Netbeans – Configuracion

Crea un Themes WordPress con Netbeans – Configuracion

Este post te enseña una manera que tengo de configurar Netbeans para crear y ejecutar un proyecto php utilizando el CMS...

Vibrate: ¿Cómo hacer vibrar un dispositivo Android?

Vibrate: ¿Cómo hacer vibrar un dispositivo Android?

En este post crearemos una app para utilizar el vibrador de nuestro dispositivo android usando para ello el IDE Android...

Dibujar primitivas 2d en html5

Dibujar primitivas 2d en html5

HTML5 junto a javascript permite dibujar figuras llamadas shapes sobre un lienzo que recibe el nombre de “canvas...

Comparte lo que sabes

Categorias

Últimas entradas

JSON es un formato de texto ligero para el intercambio de datos ampliamente usado en los Servicios Web. En este post uti...

En este post conoceremos algunos de los operadores de comparación que existen en Linux y realizaremos unos ejercicios pa...

En este post conocernos lo que son las Estructuras de Control IF en los script de Bash. Estas estructuras nos ayudan a c...

Todo producto tecnológico tiene un ciclo de vida, algunos bastante corto otros muy largo, podemos mencionar el software...

Android Bolivia

MAUS