Изображение X & Y топор

Question

У меня есть изображение (1536x1536), это карта.

И я хочу иметь топор X и Y на изображении max x: 3000.0, max y: 3000.0, min x: -3000.0, min y: -3000.0.

Я хочу преобразовать мои координаты (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}

Больше образцов:

Различные примеры журналов консоли

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}