没有获得准确的鼠标 mouseup 和 mousedown 坐标答案

【问题标题】：Not getting accurate mouse mouseup and mousedown coordinate没有获得准确的鼠标 mouseup 和 mousedown 坐标
【发布时间】：2022-01-27 04:45:47
【问题描述】：

我正在使用对打字稿做出反应。我有一个画布，我试图根据 mouseup 和 mousedown 事件在画布内绘制一个矩形。我不知道我在做什么错在这里我的矩形被绘制但在不同的位置。

这就是我的代码的样子：

const Home = () => {

    const divRef = useRef<HTMLCanvasElement>(null);

    useEffect(() => {
        let paint = false;
        let StartClientXCord: any;
        let StartClientYCord: any;
        let FinishedClientXCord: any;
        let FinishedClientYCord: any;
        function startPosition(e:any){
            paint = true;
            StartClientXCord = e.clientX;
            StartClientYCord = e.clientY;
        }

        function finishPosition(e:any){
            FinishedClientXCord = e.clientX;
            FinishedClientYCord = e.clientY;
            paint = false;
        }

        function draw(e: any){
            if(!paint){
                return
            }
            if(divRef.current){
                const canvas = divRef.current.getContext('2d');
                if(canvas){
                    canvas?.rect(StartClientXCord, StartClientYCord, FinishedClientXCord - StartClientXCord, FinishedClientYCord - StartClientYCord);
                    canvas.fillStyle = 'rgba(100,100,100,0.5)';
                    canvas?.fill();
                    canvas.strokeStyle = "#ddeadd";
                    canvas.lineWidth = 1;
                    canvas?.stroke();
                }
                
            }
        }

        
        if(divRef.current){
            divRef.current.addEventListener("mousedown", startPosition);
            divRef.current.addEventListener("mouseup", finishPosition);
            divRef.current.addEventListener("mousemove", draw);
        }
    })

    return (
         <canvas className='canvas' style={{height: height, width: width}} ref={divRef}>
            </canvas>
    )
}

我在不同的位置上画框正在不同的位置上画。这里我也附上了截图

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

我相信这是因为您使用的是clientX 和clientY，其中MDN defines 为：

MouseEvent 接口的 clientX 只读属性提供事件发生的应用程序视口内的水平坐标（与页面内的坐标相对）。

这是整个页面的绝对位置。你想要的是相对于画布左上角的位置。你想要offsetX 和offsetY 其中MDN defines 为：

MouseEvent 接口的 offsetX 只读属性提供了鼠标指针 X 坐标中该事件与目标节点的填充边缘之间的偏移量。

所以试试这个：

StartClientXCord = e.offsetX;
StartClientYCord = e.offsetY;

【讨论】：