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

Configurar Chrome para usar Tor

Configurar Chrome para usar Tor

Tor es la forma más fácil de navegar por internet de una manera segura y anónima,  Tor cuenta con su propio navegador...

Biblioteca Matemática avanzada para java

Biblioteca Matemática avanzada para java

Java cuenta con la clase java.lang.Math  la cual contiene métodos para realizar operaciones numéricas básicas como las f...

Introduccion a la programacion shell

Introduccion a la programacion shell

En este post veremos una muy pequeña introducción de lo que es el mundo de la programación en shell de Linux. Necesitamo...

Personaliza JTable “MetroUI”

Personaliza JTable “MetroUI”

Un JTable es un componente swing de java que nos permite presentar datos en forma tabular, si bien haciendo uso de IDe...

Mapas en HTML5 – Uniendo todo – Parte 6

Mapas en HTML5 – Uniendo todo – Parte 6

Última parte del tutorial “Mapas interactivos HTML5”, vamos uniendo todo todo el código. En la parte 5 de es...

JavaFX y ApiRest – GET

JavaFX y ApiRest – GET

En este tutorial construiremos una aplicación en JavaFX para leer datos de un servicio web Herramientas IDE Netbeans 8.x...

Comparte lo que sabes

Categorias

Últimas entradas

En la convención de Chain React  en Portland (Oregon), Marc Horowitz ingeniero de software en Facebook presentó el motor...

En un post anterior [Introducción a VueJS framework para el desarrollo FrontEnd] realizamos una breve introducción a Vue...

La programación y la electrónica están a la orden del día. Cada vez son más importantes y prácticamente forman parte de...

Vue.js es un framework progresivo para la creación de interfaces de usuario de una sola página creado por Evan You. Pero...

Android Bolivia

MAUS