Как вычислять координаты не в пикселях?

[makarow.dmitry]

Всем привет!

Подскажите, пожалуйста, как вычислять координаты не в пикселях, а например в процентах или em или...

Основное - это чтобы положение элементов зависело от масштаба изображения. Т.е. если в верстке меняю ширину - метки должны сохранять свою привязанность.

Вот делаю это - http://teleport.ink/index_a.html
Речь идет о ярких метках.

Сейчас при клике на фото у меня добавляется метка. Записываются ее координаты в пикселях, а нужно в чем-то гибком.

Как это сделать?


Вот код:

$("#image").click(function(e) {        
        var offset = $(this).offset();        
        raw_x_position = (e.pageX - offset.left);
        raw_y_position = (e.pageY - offset.top);
        raw2_y_position = raw_y_position-15;
        raw2_x_position = raw_x_position-15;
        y_position = raw2_y_position + "px";
        x_position = raw2_x_position + "px";

// Здесь прочий код с этими координатами
});

Пробовал и без добавления raw2_y_position + "px". Но не вышло.

Спасибо.

[kostyanet]

В мм например. Или в vw

[рони]

makarow.dmitry,
Интерактивная карта

[kostyanet]

Я же пошутил, после онченча на дивах пронесло. Тут же все самоочевидно: привязку надо делать к пикселам изображения в пикселах, а не к странице в хз.

Чтобы добыть пикселы надо сунуть фотку в new Image() и пересчитать координаты щелчка на масштаб и сохранить. При чтении та же функция с обратными величинами.

[kostyanet]

Кстати, ФШ видели? Когда вы там ставите пятно кистью - вы его не в оригинальное изображение ставите, а в экранный кэш. В оригинальном оно появится, но позже, после того как экранный отрендерится чтобы показать вам пятно. Пересчет на масштаб один из элементарных предметов - арифметика.

ЗЫ Прикол, в рунете оказывается нет списка элементарных предметов. Это правописание, чтение и арифметика. Поэтому говорят "это элементарно", то есть подвластно ученику elementary school, то есть начальной школы по-нашему.