圖片X和Y軸

Question

我有一個圖像（1536x1536），這是一張地圖。

我想在圖像最大x：3000.0，最大y：3000.0，最小x：-3000.0，最小y：-3000.0有X和Y軸。

我想對我的座標（X，Y）轉換成位置地圖（上/下和左/右）

Answer 1

從意見，我想你在它的自然不通過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} 

更多的樣品：

Various console log samples

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}