HTML Canvas Tracing

Question

Sto cercando di costruire qualcosa in HTML5/Canvas per consentire l'analisi su un'immagine e di allarme se diverso da un percorso predefinito.

Ho capito come caricare un'immagine esterna nell'area di disegno e consentire che gli eventi di mouse/mouse del mouse su di esso vengano disegnati sull'immagine, ma ciò che ho difficoltà a capire è come confrontare i due.

Le immagini sono tutte semplici contorni neri su bianco, quindi da quello che posso dire a un evento stile getPixel è possibile sapere se sotto il punto in cui è stato disegnato il mouse è presente o meno nero sotto.

avrei potuto farlo con solo la posizione del mouse, ma che richiederebbe la definizione dei percorsi di ogni contorno dell'immagine (e ci sono un discreto numero, quindi idealmente volendo farlo analizzando l'immagine sottostante) ..

Mi è stato detto che è possibile con Flash, ma vorrei evitarlo, se possibile, in modo che la compatibilità con le piattaforme non flash (vale a dire l'ipad) possa essere mantenuta poiché sono l'obiettivo principale per l'esecuzione della pagina.

Qualsiasi intuizione o assistenza sarebbe apprezzata!

Answer 1

Penso che abbiate già affrontato l'approccio più diretto per risolvere questo problema.

Dato un'immagine in bianco e nero su una tela, è possibile allegare un gestore di eventi mousemove all'elemento per tenere traccia di dove si trova il cursore. Se l'utente tiene premuto left-mouse, si desidera determinare se sta attualmente tracciando o meno il percorso predefinito. Per rendere le cose meno fastidiose per l'utente, vorrei affrontare questa parte del problema campionando una piccola finestra di pixel. Qualcosa attorno allo 9x9 pixels probabilmente sarebbe di buone dimensioni. Si noti che si desidera che la dimensione della finestra sia odd in entrambe le dimensioni in modo da avere un campionamento simmetrico in entrambe le direzioni.

Utilizzando la posizione del cursore, chiamare getImageData() sulla tela. La tua chiamata di funzione sarà simile a questa: getImageData(center_x - Math.floor(window_size/2), center_y - Math.floor(window_size/2), window_size, window_size) in modo da ottenere una finestra di esempio di pixel con il centro sopra il cursore. Da lì, puoi fare un semplice controllo per vedere se nella finestra ci sono dei pixel non bianchi, oppure potresti essere più severo e richiedere un certo numero di pixel non bianchi per dichiarare l'utente sul percorso.

La chiave per fare in modo che funzioni bene, penso, è assicurarsi che l'utente non riceva feedback negativi quando deviano il bit più piccolo dal percorso (a meno che sia ciò che si desidera). A quel punto corri il rischio di rendere l'utente infastidito e frustrato.

Alla fine si tratta di uno dei due approcci. O si carica il percorso vettoriale effettivo dell'applicazione per confrontare il cursore dell'utente (ad esempio, fare controlli point-in-path) o si campionano i dati dei pixel dall'immagine. Se non si richiede la perfetta accuratezza del controllo point-in-path, penso che il campionamento dei pixel dovrebbe funzionare correttamente.

---

Edit: Ho appena riletto la tua domanda e si rese conto che, in base al riferimento alla getPixel(), si potrebbero utilizzare WebGL per questo. L'approccio per WebGL sarebbe lo stesso, eccetto che ovviamente usereste funzioni diverse. Non penso che sia necessario richiedere WebGL, tuttavia, poiché un contesto 2D dovrebbe darti una flessibilità sufficiente (a meno che l'app non sia più coinvolta di quanto sembri).