HTML Canvas Tracing

Question

Estoy intentando crear algo en HTML5/Canvas para permitir el seguimiento sobre una imagen y una alerta si se desvía de una ruta predefinida.

He descubierto cómo cargar una imagen externa en el lienzo y permitir que los eventos mouse/mousemovement sobre ella dibujen sobre la imagen, pero lo que me cuesta trabajo es compararlos.

Las imágenes son todas negras simples en los contornos blancos, por lo que puedo decir que un evento getPixel style puede decir si hay negro debajo de donde se ha dibujado sobre o debajo de donde está el mouse.

que podría hacerlo con sólo la posición del ratón, pero que requeriría la definición de los caminos de cada contorno de la imagen (y hay un buen número, por lo tanto, lo ideal querer hacerlo mediante el análisis de la imagen subyacente) ..

Me han dicho que es posible con Flash, pero me gustaría evitar eso si es posible para mantener la compatibilidad con las plataformas que no son Flash (es decir, el ipad) ya que son el objetivo principal para que se ejecute la página.

¡Cualquier apreciación o asistencia sería apreciada!

Answer 1

Creo que ya habéis abordado el enfoque más directo para resolver esto.

Dada una imagen en blanco y negro en un lienzo, puede conectar un controlador de eventos mousemove al elemento para rastrear dónde se encuentra el cursor. Si el usuario está presionando left-mouse hacia abajo, desea determinar si actualmente están rastreando la ruta predefinida. Para hacer las cosas menos molestas para el usuario, abordaría esta parte del problema muestreando una pequeña ventana de píxeles. Algo alrededor de 9x9 pixels probablemente sería de un buen tamaño. Tenga en cuenta que desea que el tamaño de su ventana sea odd en ambas dimensiones para que tenga un muestreo simétrico en ambas direcciones.

Usando la ubicación del cursor, llame al getImageData() en el lienzo. Su llamada a la función se vería así: getImageData(center_x - Math.floor(window_size/2), center_y - Math.floor(window_size/2), window_size, window_size) para que obtenga una ventana de muestra de píxeles con el centro a la derecha sobre el cursor. Desde allí, puede hacer una simple comprobación para ver si hay píxeles no blancos dentro de la ventana, o podría ser más estricto y requerir una cierta cantidad de píxeles no blancos para declarar al usuario en la ruta.

La clave para hacer que esto funcione bien, creo, es asegurarme de que el usuario no reciba comentarios negativos cuando se desvíe del bit más pequeño de la ruta (a menos que eso sea lo que quiere). En ese punto, corre el riesgo de hacer que el usuario se sienta molesto y frustrado.

En última instancia, se trata de uno de dos enfoques. O bien, carga la ruta vectorial real de la aplicación para comparar el cursor del usuario (es decir, realiza las comprobaciones point-in-path) o muestra datos de píxeles de la imagen. Si no necesita la precisión perfecta de la comprobación point-in-path, creo que el muestreo de píxeles debería funcionar bien.

---

Editar: acabo de releer su pregunta y se dio cuenta de que, basado en su referencia a getPixel(), puede que esté utilizando WebGL para esto. El enfoque para WebGL sería el mismo, excepto que por supuesto estarías usando diferentes funciones. No obstante, no creo que necesite requerir WebGL, ya que un contexto 2D debería darle suficiente flexibilidad (a menos que la aplicación esté más involucrada de lo que parece).