【问题标题】:How to convert image coordinates to cartesian coordinates using javaScript如何使用 javaScript 将图像坐标转换为笛卡尔坐标
【发布时间】:2023-01-10 17:53:17
【问题描述】:

需要通过点击下图来确定你点击的地方的坐标。坐标必须与图片上绘制的坐标平面进行比较。我怎样才能用 JavaScript 做到这一点?

我试过 this 回答。公式:mx = C + px * A,其中 mx - 图像坐标,px - 像素坐标,A - X 方向的像素大小。目前尚不清楚像素坐标在这种情况下的含义,以及如何使用 JavaScript 找到它。我也有this的回答,但是我不知道如何翻译图片的坐标,从左上角开始倒计时到我需要的坐标。

【问题讨论】:

  • 你能详细说明你声称到目前为止已经尝试过的那些公式吗?
  • @bitifet 更新

标签: javascript math coordinates


【解决方案1】:

JavaScript 提供用户与屏幕交互时的事件信息。你可以做的是在 <img> 标签上添加一个事件监听器来保存图片,如下所示:

document.getElementById("myImg").addEventListener("event type", (event) => {/* consume data */});

根据您要使用的设备,您必须相应地设置事件。

如果你想用移动设备工作,他们使用Touch events,但如果你想用笔记本电脑工作,你应该使用Pointer events

设置事件处理程序后,您可以访问以像素为单位的事件信息,其中 X 和 Y = 0px 从左上角开始,Y 在向下时增长,X 在向右时增长。您应该注意您的设备Pixel Ratio,因为设备可以以不同的像素比例呈现。

一旦你处理了这个,你必须将你拥有的像素转换成坐标,这应该不是问题。一个简单的解决方案是在检测到您的事件是否位于以下位置后使用不同的公式:

  • 左上部分
  • 右上部分
  • 左下部分
  • 右下部分

【讨论】:

    猜你喜欢
    • 2017-10-10
    • 1970-01-01
    • 2020-07-05
    • 2016-04-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多