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

Bloquear pantalla cliente

Bloquear pantalla cliente

En este tutorial crearemos una aplicación que bloqueara toda la pantalla de la PC y no nos dejara realizar ninguna tarea...

JLabel circular

JLabel circular

En este post crearemos un swing Label personalizado que tendrá la forma circular en su borde, con esto obtendremos un bo...

Crea formulario de login estilo Agents of Shield Marvel

Crea formulario de login estilo Agents of Shield Marvel

En esta oportunidad aprovechando el interés que tienen ahora los superheroes de Marvel, crearemos un formulario de logue...

Conversor decimal a binario

Conversor decimal a binario

Desde que Google anuncio de que dejara de dar soporte al plugin de Eclipse y se concentrara en Android Studio, quienes t...

WhatsApp: Aprende a usar la nueva función ‘Estado’

WhatsApp: Aprende a usar la nueva función ‘Estado’

A continuación te mostramos una guía sobre la nueva nueva función ‘estado‘ de WhatsApp.  Primero que nada, a...

iReport: Reportes con imágenes de la base de datos

iReport: Reportes con imágenes de la base de datos

Este post esta dedicado a la creación de reportes con imágenes usando el programa iReport Designer. Cuando se desarrolla...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

En este post construiremos paso a paso un SharedPreferences más conocido en español como “Preferencias de Usuario...

La Inteligencia Artificial (AI – Artificial Intelligence) estará presente en casi cada aspecto de nuestra vida en...

Una Interface Funcional es una interface que contiene uno y solo un método abstracto aunque puede contener métodos por d...

Un JSpinner es un componente swing de java con una caja de texto y un par de botones que nos permiten incrementar  y dec...

Android Bolivia

Bandera en Alto