Comment obtenir la vraie position de la souris sur un canevas HTML5 ?

Position réelle de la souris dans le canevas

Pour dessiner dans un canevas HTML5 à l'aide du curseur de la souris, il est souvent impératif que le canevas soit positionné à l'origine (0,0 ) dans le conteneur parent. Cependant, si la position du canevas est ajustée à l'écart de l'origine, des écarts peuvent survenir lors du dessin.

Le scénario simple 1:1

Si les dimensions de l'élément du canevas s'alignent parfaitement avec la taille du bitmap (1 :1), utilisez l'extrait suivant pour capturer les positions de la souris :

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

Intégrez cette méthode dans votre événement, en fournissant l'événement et le canevas comme arguments. Il renvoie un objet détaillant les positions x et y de la souris. Soustrayez la position du canevas pour l'aligner avec l'élément lui-même.

var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");

function draw(evt) {
  var pos = getMousePos(canvas, evt);

  context.fillStyle = "#000000";
  context.fillRect(pos.x, pos.y, 4, 4);
}

Élément et bitmap de tailles différentes

Lorsque le canevas et le bitmap diffèrent en taille, par exemple en raison d'une mise à l'échelle CSS ou d'un aspect de pixel différent ratios, ajustez les calculs comme suit :

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect(), // abs. size of element
    scaleX = canvas.width / rect.width, // relationship bitmap vs. element for x
    scaleY = canvas.height / rect.height; // relationship bitmap vs. element for y

  return {
    x: (evt.clientX - rect.left) * scaleX, // scale mouse coordinates after adjusting for element relativity
    y: (evt.clientY - rect.top) * scaleY // scale mouse coordinates after adjusting for element relativity
  };
}

Transformations de contexte appliquées

Si le contexte du canevas a subi des transformations telles que la rotation ou la mise à l'échelle, calculez l'inverse de la matrice actuelle pour en tenir compte. Les navigateurs les plus récents offrent un accès à la transformation actuelle via la propriété currentTransform, tandis que Firefox propose une matrice inversée via mozCurrentTransformInverted.

Si un calcul matriciel personnalisé est nécessaire, implémentez votre propre solution ou utilisez des bibliothèques existantes comme celle fournie sur : [ Solution matricielle personnalisée](https://github.com/bebraw/calcGeometryFromPointOnTransformedCanvas)

Appliquer la matrice inverse au les coordonnées de la souris après avoir ajusté la relativité des éléments pour les aligner sur la position correcte de la souris.

var pos = getMousePos(canvas, e); // get adjusted coordinates as described above
var imatrix = matrix.inverse(); // obtain the inverse matrix somehow
pos = imatrix.applyToPoint(pos.x, pos.y); // apply inverse matrix to adjusted coordinate

context.fillStyle = "#000000";
context.fillRect(pos.x - 1, pos.y - 1, 2, 2);

Alternativement, si l'utilisation de currentTransform est réalisable :

var pos = getMousePos(canvas, e); // get adjusted coordinates as described above
var matrix = ctx.currentTransform; // W3C (future)
var imatrix = matrix.invertSelf(); // invert

// apply to point:
var x = pos.x * imatrix.a + pos.y * imatrix.c + imatrix.e;
var y = pos.x * imatrix.b + pos.y * imatrix.d + imatrix.f;

Pour des simplifications supplémentaires, envisagez d'utiliser une bibliothèque complète qui gère toutes ces étapes, comme celle gratuite sous licence MIT mentionnée dans le dernier bloc de code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!