Image X & Y axe

Image X & Y axe

本文关键字：axe amp Image      更新时间：2023-09-26

我有一个图片(1536x1536)，它是一个地图。

我想在图像上有X和Y轴max X: 3000.0, max Y: 3000.0, min X: -3000.0, min Y: -3000.0.

我想转换坐标(X,Y)在地图上的位置(上/下和左/右)

从评论中我假设你不通过CSS调整图像大小，但保持它的自然状态。因此，您可以使用具有比率差异的翻译对象。如果非常依赖资源，我建议使用数组而不是对象(如下所示的代码)。

它给你点像素转换

var translate = {
    x: 1536 / 6000,
    y: 1536 / 6000
};
function pt_translate(pt) {
    return {
        x: Math.round((pt.x + 3000) * translate.x),
        y: Math.round((pt.y + 3000) * translate.y)
    };
}
// Sample coordinate input:
pt = {
    x: -1029.3652,
    y:  369.122
};
var ptt = pt_translate(pt);
结果:

{x: 504, y: 862}

更多的样本:

各种控制台日志样本

console.log(pt_translate({x:0,y:0}), 'vs', 1536 / 2, 1536 / 2);
console.log(pt_translate({x:3000,y:3000}), 'vs', 1536, 1536);
console.log(pt_translate({x:-3000,y:-3000}), 'vs', 0,0);
console.log(pt_translate({x:910,y:-1045}), 'vs', 1000,500);
console.log(ptt);

收益率:

{x: 768, y: 768} "vs" 768 768
{x: 1536, y: 1536} "vs" 1536 1536
{x: 0, y: 0} "vs" 0 0
{x: 1000, y: 500} "vs" 1000 500
{x: 504, y: 862}

相关文章：