Wie kann ich meine Mausposition relativ zu einem HTML-Element in React genau bestimmen? ⇐ JavaScript

[Anonymous]

Ich habe eine App, die eine Leinwand enthält, auf der ich zeichne, und ich möchte die Mausposition genau verfolgen können. Das Problem, mit dem ich konfrontiert bin, ist, dass die verfolgte Position umso ungenauer wird, je weiter man nach unten rechts geht. Hier ist eine Demokomponente, die das Problem reproduziert:

Code: Select all

import {type MouseEvent, useEffect, useRef, useState} from "react";
import {Col, Container, Row} from "react-bootstrap";

export interface Coordinate {
x: number, y: number
}

export default function Dev() {
const MouseTracker = () => {
const canvas= useRef(null);
const screenBuffer = useRef(null);
const [mp, setMp] = useState({x: 0, y: 0});
const resizeCanvas = () => {
screenBuffer.current!!.width = window.innerWidth;
screenBuffer.current!!.height = window.innerHeight;
canvas.current!!.width = window.innerWidth;
canvas.current!!.height = window.innerHeight;
}
const render = () => {
const ctx: CanvasRenderingContext2D = screenBuffer.current!!.getContext("2d")!!;
resizeCanvas()
ctx.reset();
ctx.fillStyle = "#000000";
ctx.strokeStyle = "#000000"
markMouse(ctx, mp.x, mp.y)
const visibleContext = canvas.current!!.getContext("2d")!!;
visibleContext.clearRect(0, 0, canvas.current!!.width, canvas.current!!.height);
visibleContext.drawImage(screenBuffer.current!!, 0, 0);
}
useEffect(() => { screenBuffer.current = document.createElement("canvas"); }, []);
useEffect(() => { requestAnimationFrame(render) }, [mp]);
return  setMp(positionInComponent(e))}>;
}
return 

Some header bar





}

function markMouse(ctx: CanvasRenderingContext2D, x: number, y: number) {
ctx.beginPath()
ctx.arc(x, y, 3, 0, 2*Math.PI);
ctx.strokeText(`(${x.toFixed(2)},${y.toFixed(2)})`, x + 10, y - 10)
ctx.fill()
ctx.stroke()
ctx.closePath()
}

function positionInComponent(e: MouseEvent): Coordinate {
const bounds = e.currentTarget.getBoundingClientRect();
return {
x: e.clientX - bounds.left,
y: e.clientY - bounds.top
}
}

Ich habe versucht, die Berechnungen in positionInComponent durch die hier und hier gefundenen Antworten zu ersetzen, aber sie haben das gleiche Problem. Ich habe auch versucht, die X- und Y-Position anhand der Größe, Breite/Höhe des Elements zu skalieren, und das hat ebenfalls zum gleichen Problem geführt. Gibt es eine Möglichkeit, eine genaue Mausverfolgung sicherzustellen?