Wie erhalte ich die tatsächliche Mausposition auf einer HTML5-Leinwand?

Echte Mausposition im Canvas

Um innerhalb eines HTML5-Canvas mit dem Mauszeiger zu zeichnen, ist es oft zwingend erforderlich, dass der Canvas am Ursprung (0,0) positioniert ist ) innerhalb des übergeordneten Containers. Wenn die Leinwandposition jedoch vom Ursprung weg angepasst wird, kann es beim Zeichnen zu Abweichungen kommen.

Das einfache 1:1-Szenario

Wenn die Abmessungen des Leinwandelements perfekt mit der Bitmap-Größe übereinstimmen (1 :1-Verhältnis), verwenden Sie das folgende Snippet, um Mauspositionen zu erfassen:

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

Integrieren Sie diese Methode in Ihr Event, indem Sie das Event bereitstellen und Leinwand als Argumente. Es gibt ein Objekt zurück, das die x- und y-Mauspositionen detailliert angibt. Subtrahieren Sie die Canvas-Position, um sie am Element selbst auszurichten.

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);
}

Element und Bitmap unterschiedlicher Größe

Wenn sich Canvas und Bitmap in der Größe unterscheiden, z. B. aufgrund der CSS-Skalierung oder eines unterschiedlichen Pixelaspekts Passen Sie die Berechnungen wie folgt an:

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
  };
}

Angewandte Kontexttransformationen

Wenn die Wenn der Canvas-Kontext Transformationen wie Drehung oder Skalierung erfahren hat, berechnen Sie die Umkehrung der aktuellen Matrix, um diese zu berücksichtigen. Neuere Browser bieten Zugriff auf die aktuelle Transformation über die Eigenschaft currentTransform, während Firefox über mozCurrentTransformInverted eine invertierte Matrix bietet.

Wenn eine benutzerdefinierte Matrixberechnung erforderlich ist, implementieren Sie Ihre eigene Lösung oder nutzen Sie vorhandene Bibliotheken wie die unter: [ Benutzerdefinierte Matrixlösung](https://github.com/bebraw/calcGeometryFromPointOnTransformedCanvas)

Wenden Sie die Umkehrung an Matrix zu den Mauskoordinaten, nachdem die Relativität der Elemente angepasst wurde, um sie an der richtigen Mausposition auszurichten.

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);

Alternativ, wenn die Verwendung von currentTransform möglich ist:

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;

Für weitere Vereinfachungen sollten Sie die Verwendung in Betracht ziehen eine umfassende Bibliothek, die alle diese Schritte abwickelt, wie zum Beispiel die kostenlose, vom MIT lizenzierte, die im letzten Codeblock erwähnt wurde.

Das obige ist der detaillierte Inhalt vonWie erhalte ich die tatsächliche Mausposition auf einer HTML5-Leinwand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!