如何将英尺坐标（x，y）转换为像素

Posted 2023-02-23

【中文标题】如何将英尺坐标（x，y）转换为像素

【英文标题】：How to convert coordinates (x, y) in feet to pixels

【发布时间】：2019-11-21 15:07:23

【问题描述】：

我在 feet 中有对象（在我的情况下为天线）的实时位置（x，y），我想在 fabricJs 画布上显示它们（宽度：400px 和高度： 400px) 以 像素 为单位，但我不知道 将英尺测量值转换为像素 的公式。

【参考方案1】：

您可能希望将地图缩小到 400 像素 x 400 像素的网格。假设您有一个 l x w 大小的实时地图，您可以执行以下操作：

function positionToPixels(x, y)  
    //You may want to parseInt or something
    let newX = 400 * x / w;
    let newY = 400 * y / l;
    return [newX, newY];

我们所做的只是说原始对象与边缘的距离将与映射对象与其边缘的距离成正比

【参考方案2】：

这取决于 英尺 的面积。 如果以英尺为单位的面积 = 1000x1000，您可以这样做：

const areaF = w: 1000, h: 1000;
const areaP = w: 400, h: 400;
const locationFeetToPixel (x, y) 
    const relativeX = x / areaF.w;
    const relativeY = y / areaF.h;
    const pX = areaP.w * relativeX;
    const pY = areaP.h * relativeY;
    return x: pX, y: pY;

【讨论】：

什么是 relativeX 和 relativeY ？有缩放测量吗？

是的，相对于总大小的比例。例如，如果 x = 0 比 relativeX = 0，如果 x = 1000 比 relativeX = 1。两者之间的所有值都在 0 到 1 的范围内。

好吧，这是有道理的。

【参考方案3】：

只需将您的宽度和高度值与字符串“px”连接并使用 CSS 应用

【讨论】：

您是指以英尺为单位的区域的实际宽度和高度值？

如何在 CSS 中做到这一点，同样 css 属性值必须以像素为单位，而我的值以英尺为单位。感谢您的反馈