在css调整大小后单击画布中的实际单击位置

Get click the actual click location in canvas after a css resizing

本文关键字：单击 布中 位置 调整 css      更新时间：2023-09-26

首先，让我们假设我有以下画布:<canvas id="can" width="400" height="200" />。然后，我需要用width: 100%; height: auto;调整它的大小，以适合我的响应容器。现在，假设我的画布宽度是800。问题是，每次当我尝试获取点击事件的位置(x, y)时，我得到的是相对于实际鼠标位置的坐标。

明确一点，如果我点击画布的底部边缘，得到的位置不是(400,200)而是(800,400)

已经在网上搜索解决方案，但我找不到我的具体问题，无论是jQuery或香草javascript似乎有一个简单的方法来解决这个问题。我想到的唯一解决方案是在DOM中设置的实际画布尺寸与缩放后的宽度和高度之间使用一种数学关系，但我真的不知道如何。

一种方法是在画布元素上使用offsetLeft和offsetTop属性来将鼠标坐标转换为画布。它的工作方式是这样的:

function(clickEvent) {
   var canvas = document.getElementById("can")
   var transformedClickX = clickEvent.pageX - canvas.offsetLeft;
   var transformedClickY = clickEvent.pageY - canvas.offsetTop;
   ...
}
相关文章：