Positions absolues de la souris sur le traitement

Question

C’est un copier-coller d’un message que j’ai écrit sur le forum de traitement (où je n’ai pas eu de réponse à ce jour). Je pensais que je pourrais aussi bien essayer ici.

Le traitement est un moyen très cool de dessiner, spécialement pour les pages Web. À titre de référence, http://processing.org

Hé, je suis un débutant dans le traitement des données, je l'utilise pour créer un site Web sans flash, alors je dessine à peu près sur une toile.

J'ai un problème avec la position de la souris, bien que les coordonnées, lors du dessin, considèrent le coin supérieur gauche comme étant la position 0,0; les coordonnées réelles de la souris considèrent que 0,0 est le coin en haut à gauche de la fenêtre du navigateur.

Le problème est donc que le canevas fonctionne sur une page Web centrée. Chaque fois que le navigateur change de taille, les coordonnées de la souris dans le canevas le font également.

Existe-t-il un moyen de définir les coordonnées de la souris par rapport au canevas? Pour que je puisse modifier la taille de la fenêtre de mon navigateur et que le coin supérieur gauche sera toujours 0,0 pour les coordonnées de la souris?

C’est donc le problème, je ne sais pas combien de personnes ici en stackoverflow sont expérimentées avec cela, mais j’espère que quelqu'un pourra m'aider:)

grâce à la communauté de débordement de pile à l'avance.

Answer 1

Je ne suis pas familiarisé avec le traitement, mais ne pouvez-vous pas simplement calculer la différence entre le coin supérieur gauche de la fenêtre du navigateur et le coin supérieur gauche du canevas?
c'est-à-dire (en utilisant jquery)

$(window).onresize = function() {
 //offset return position realive to the document.
 var offset = $('#canvas').offset();
 window.canvasLeft = offset.left;
 window.canvasTop = offset.top;
}

Ensuite, vous pouvez faire quelque chose comme:

 relativeMouseLeftPosition = mouseLeftPosition() - window.canvasLeft;

Vous devez remplacer #canvas par un sélecteur css pour votre zone de dessin.

Notez également que la fenêtre est l'objet global, je l'utilise ici pour traiter d'éventuels problèmes de portée.

Answer 2

Le traitement n'est pas vraiment destiné à la création de pages Web. Il est pire que Flash pour les sites (les esquisses de traitement étant des applets Java - Java étant moins répandu, nécessitant beaucoup plus de ressources et de lenteur à se charger .. )

Cela dit, il existe processing.js , un port Javascript de traitement.

L'exemple snake permet d'accéder à la souris. Puisqu'il s'agit de Javascript, et que la toile est un div , les coordonnées devraient être un peu plus saines que Java (qui vit dans son propre monde de VM), mais je peux me tromper.

Answer 3

Vous pouvez demander à l'utilisateur de calibrer le système avant utilisation. Ce n’est pas vraiment une réponse à la question, mais une solution au problème.

Il vous suffit de dessiner un point rouge au centre de l'écran, en haut à gauche et en bas à droite. Demandez à l'utilisateur de cliquer dessus et de récupérer les coordonnées. Ensuite, vous savez où sont les coins de l'écran.