web-dev-qa-db-fra.com

Déplacez le pointeur de la souris sur une position spécifique?

Je construis un jeu HTML5 et j'essaie de placer le curseur de la souris sur un contrôle donné sur un événement spécifique, de sorte que le déplacement dans une direction spécifique produise toujours le même résultat. Est-ce possible?

javascriptmouse
115
Dennkster

Excellente question. C'est vraiment quelque chose qui manque de l'API du navigateur Javascript. Je travaille également sur un jeu WebGL avec mon équipe et nous avons besoin de cette fonctionnalité. J'ai ouvert un numéro sur le bugzilla de Firefox afin que nous puissions commencer à parler de la possibilité d'avoir une API permettant le verrouillage de la souris. Cela va être utile pour tous les développeurs de jeux HTML5/WebGL.

Si vous le souhaitez, venez et laissez un commentaire avec vos commentaires, et remontez le problème:

https://bugzilla.mozilla.org/show_bug.cgi?id=630979

Merci!

64
dionyziz

Vous ne pouvez pas déplacer le mousepointer avec javascript.

Pensez juste aux implications pour une seconde, si vous le pouvez;)

  1. L'utilisateur pense: "hé, j'aimerais cliquer sur ce lien"
  2. Javascript déplace le curseur de souris sur un autre lien
  3. L'utilisateur clique sur un mauvais lien et télécharge par inadvertance un logiciel malveillant qui formate son lecteur c et mange ses bonbons
169
Martin Jespersen
  1. Exécutez un petit serveur Web sur la machine cliente. Peut être une petite chose de 100kb. A Python/Script Perl, etc.
  2. Incluez un petit C exécutable pouvant compiler la souris.

  3. Exécutez-le en tant que script CGI via un simple appel http, AJAX, peu importe - avec les coordonnées vers lesquelles vous souhaitez déplacer la souris, par exemple:

    http://localhost:9876/cgi/mousemover?x=200&y=450

PS: Pour tout problème, il y a des centaines d'excuses pour expliquer pourquoi, et comment - cela ne peut pas et ne devrait pas - être fait .. Mais dans cet univers infini, c'est vraiment juste une question de détermination - quant à savoir si VOUS y parviendrez.

80
Alex Gray

J'imagine que vous pourriez accomplir de placer le curseur de la souris sur une zone donnée de l'écran si vous n'utilisiez pas le véritable curseur de la souris (système).

Par exemple, vous pouvez créer une image à la place de votre curseur, gérer un événement qui, lors de la détection du mouseenter dans votre scène, définir le style du curseur système sur "none" (sceneElement.style.cursor = 'none'), un élément d'image masqué faisant alors office de curseur sera placé où vous le souhaitez dans la scène en fonction de la traduction prédéfinie de l'axe/du cadre de sélection.

Ainsi, quelle que soit la façon dont vous avez déplacé le curseur réel, votre méthode de traduction gardera le curseur de votre image partout où vous en avez besoin.

edit: n exemple dans jsFiddle utilisant une représentation d'image et un mouvement de souris forcé

69
Xaxis

Vous pouvez détecter la position du pointeur de la souris, puis déplacer la page Web (avec une position relative du corps) de manière à ce qu'ils survolent ce que vous souhaitez voir cliquer.

Pour un exemple, vous pouvez coller ce code sur la page en cours dans la console de votre navigateur (et actualiser par la suite)

var upvote_position = $('#answer-12878316').position();
$('body').mousemove(function (event) {
    $(this).css({
        position: 'relative',
        left: (event.pageX - upvote_position.left - 22) + 'px',
        top: (event.pageY - upvote_position.top - 35) + 'px'
    });        
});
41
Amish G

Vous ne pouvez pas déplacer une souris mais pouvez la verrouiller. Remarque: vous devez appeler requestPointerLock dans l'événement click.

Petit exemple:

var canvas = document.getElementById('mycanvas');
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
canvas.requestPointerLock();

Documentation et exemple de code complet:

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API

11
Dmitry Bosikov

Donc, je sais que c'est un vieux sujet, mais je vais d'abord dire que ce n'est pas possible. La chose la plus proche est actuellement de verrouiller la souris sur une seule position et de suivre les changements dans ses x et y. Ce concept a été adopté par - cela ressemble à - Chrome et Firefox. Il est géré par ce qu'on appelle Verrouillage de la souris, et frapper échapper le casser. De mon bref Je pense que l’idée est de verrouiller la souris à un seul endroit et de rapporter des événements de mouvement similaires aux événements de cliquer-glisser.

Voici la documentation de publication:
FireFox: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Chrome: http://www.chromium.org/developers/design-documents/mouse-lock

Et voici une jolie démonstration: http://media.tojicode.com/q3bsp/

7
Codesmith

Vous ne pouvez pas déplacer le pointeur de la souris en utilisant JavaScript, et donc pour des raisons évidentes de sécurité. Le meilleur moyen d'obtenir cet effet serait de placer le contrôle sous le pointeur de la souris.

4
Sheavi

Cela ne pourrait-il pas être fait simplement en obtenant la position réelle du pointeur de la souris, puis en calculant et en compensant les actions de la souris Sprite/scène en fonction de cette compensation?

Par exemple, vous avez besoin que le pointeur de la souris soit en bas au centre, mais en haut à gauche; masquer le curseur, utilisez une image de curseur décalée. Décalez le mouvement du curseur et l'entrée de la souris sur la carte pour faire correspondre les clics de Sprite (ou de "contrôle") repositionnés du curseur Lorsque/si les limites sont atteintes, recalculez. Si/lorsque le curseur atteint le point souhaité, supprimez la compensation.

Avertissement, pas un développeur de jeux.

0
Eric Shoberg