单击获取图像坐标

Question

我有一组 div 是动态的，我希望它们以不同的顺序排列。所以我使用 flex order 来控制 div 的顺序。 div 之一包含图像。通过单击该图像，它应该控制与图像相关的单击的 x 和 y 坐标。我已经做了我想要的一切。但问题是我得到的 y 坐标是负数，我相信这是因为我使用 flex 更改了顺序。

Here's what I tried

预期结果：当我点击边框图像左上角位置时，它应该控制与图像相关的点击的确切位置。

Answer 1

这是你自己计算造成的。您可以使用此函数简化计算

GetMousePositionRelativeToTarget(e) {
    // Get the target
    const target = e.target;

    // Get the bounding rectangle of target
    const rect = target.getBoundingClientRect();

    // Mouse position
   const x = e.clientX - rect.left;
   const y = e.clientY - rect.top;

   console.log(x + ':' + y);
   return [x, y];
}

单击获取图像坐标

Get Coordinates of image on click

javascript

typescript

angular