HTML Canvas Tracing

Question

J'essaie de créer quelque chose en HTML5/Canvas pour permettre le traçage d'une image et l'alerter en cas de déviation d'un chemin prédéfini. J'ai trouvé comment charger une image externe dans le canevas, et permettre aux événements mousedown/mousemovement dessus de dessiner sur l'image, mais ce que j'ai de la difficulté à faire la tête, c'est de comparer les 2. Les images sont toutes de simples contours noir sur blanc, donc d'après ce que je peux dire, un événement de style getPixel peut dire s'il y a du noir en dessous où a été dessiné ou dessous où la souris est allumée.

je pouvais le faire avec juste la position de la souris, mais cela nécessiterait de définir les chemins de chaque contour de l'image (et il y a un bon nombre, donc idéalement vouloir le faire en analysant l'image sous-jacente) ..

On m'a dit que c'est possible avec Flash, mais je voudrais éviter cela si possible afin que la compatibilité avec les plates-formes non-flash (à savoir l'ipad) puisse être maintenue car elles sont la cible principale de la page à exécuter.

Toute idée ou assistance serait appréciée!

Answer 1

Je pense que vous avez déjà abordé l'approche la plus directe pour résoudre ce problème. Étant donné une image en noir et blanc sur un canevas, vous pouvez attacher un gestionnaire d'événement mousemove à l'élément pour suivre l'emplacement du curseur. Si l'utilisateur maintient left-mouse vers le bas, vous voulez déterminer s'il trace ou non le chemin prédéfini. Pour rendre les choses moins ennuyeuses pour l'utilisateur, j'aborderais cette partie du problème en échantillonnant une petite fenêtre de pixels. Quelque chose autour de 9x9 pixels serait probablement une bonne taille. Notez que vous voulez que la taille de votre fenêtre soit de odd dans les deux dimensions afin que vous ayez un échantillonnage symétrique dans les deux sens.

En utilisant l'emplacement du curseur, appelez le getImageData() sur le canevas. Votre appel de fonction ressemblerait à ceci: getImageData(center_x - Math.floor(window_size/2), center_y - Math.floor(window_size/2), window_size, window_size) afin que vous obteniez un exemple de fenêtre de pixels avec le centre juste au-dessus du curseur. De là, vous pouvez faire une vérification simple pour voir si des pixels non blancs sont dans la fenêtre, ou vous pourriez être plus strict et exiger un certain nombre de pixels non blancs pour déclarer l'utilisateur sur le chemin. Je pense que la clé pour que cela fonctionne bien est de s'assurer que l'utilisateur ne reçoit pas de rétroaction négative quand il dévie le moindre bit du chemin (sauf si c'est ce que vous voulez). À ce stade, vous courez le risque de rendre l'utilisateur agacé et frustré.

Finalement, il s'agit d'une des deux approches. Soit vous chargez le chemin vectoriel réel pour l'application afin de comparer le curseur de l'utilisateur (c'est-à-dire effectuez les vérifications point-in-path), soit vous échantillonnez les données de pixel de l'image. Si vous n'avez pas besoin de l'exactitude parfaite de la vérification point-in-path, je pense que l'échantillonnage de pixels devrait fonctionner correctement.

---

Edit: Je viens de relire votre question et réalisé que, en fonction de votre référence à getPixel(), vous pourriez utiliser WebGL pour cela. L'approche pour WebGL serait la même, sauf que vous utiliseriez bien sûr des fonctions différentes. Cependant, je ne pense pas que vous ayez besoin de WebGL, car un contexte 2D devrait vous donner suffisamment de flexibilité (à moins que l'application ne soit plus impliquée qu'il n'y paraît).