Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Размер шрифта в браузере и координаты Canvas


Автор: kuksha 13.9.2014, 22:49
Есть страничка с картой, сделанной на Canvas:
http://kosmoved.ru/nebo_segodnya_geo.php
При изменении пользователем размера шрифта в настройках обозревателей, канва понятное дело тоже съезжает вверх или вниз, вслед за текстом.
Это плохо тем, что у меня при перемещении курсора мыши внутри канвы, появляются всплывающие подсказки, привязанные к координатам левого верхнего угла окна обозревателя. 
текущие координаты мыши определяются так: 
Код

  var Xi = event.clientX;
  var Yi = event.clientY;

Соответственно, если канва съехала, то и координаты объектов под мышью уже не соответствуют ранее вычисленным.

Догадки решений:
или запретить менять размер шрифта в браузере, что видимо невыполнимо
или определять какой размер шрифта выставлен и как-то вычислить смещение канвы.... 
или жёстко, в пикселях, задать координаты канваса карты, что наверное маловозможно, да и не очень правильно
или (видимо самое правильное?) научиться определять координаты мыши внутри канваса 

Как всё это делать я не знаю...

Помогите пожалуйста.

Автор: AVA12 14.9.2014, 15:50
Цитата
при перемещении курсора мыши внутри канвы, появляются всплывающие подсказки, привязанные к координатам левого верхнего угла окна обозревателя

Это изначально странное решение. У меня лично координаты активных зон изначально неверные.

Правильное (и очевидное) решение - определять координаты курсора внутри канвы и размещать подсказки поверх нее же, а не поверх всей страницы. Для этого:
 - создать позиционированный блок-обертку для канвы с размерами, совпадающими с размерами канвы;
 - внутри этой обертки разместить канву;
 - после канвы внутри обертки разместить абсолютно позиционированный блок с подсказкой;
 - обработчики событий мыши повесить на саму канву (или на обертку), координаты курсора относительно обертки (и канвы) лежат в свойствах offsetX и offsetY объекта события.

Верстка примерно такая:
Код

<div id="canvas-frame" style="position:relative;width:650px;height:650px;overflow:visible">
<canvas width="650" height="650"></canvas>
<div id="obj-info" style="position:absolute;width:160px;height:210px"></div>
</div>

Автор: kuksha 14.9.2014, 20:27
Ну, почти так всё и есть, кроме offsetX и offsetY. В том числе обработчик событий уже на канве (на мой взгляд чайника).
Не понял насчёт обёртки, ну ничего - просто послушаюсь.

Странно, я точно пробовал offsetX и offsetY в самом начале, но где-то не справился - точно был глюк (то ли с прокруткой связано было, то ли ещё с чем-то) и пришлось перейти на event.clientX/Y...

Сейчас буду разбираться. Спасибо!

Автор: kuksha 14.9.2014, 21:32
Отлично! Всё получилось!
Спасибо ещё раз  smile 

Плюсануть хотел, да постов не хватает  smile 

Автор: kuksha 4.10.2014, 14:47
Авария!
FireFox похоже не поддерживает свойства offsetX и offsetY.
В IE тоже что-то поломалось, хотя offsetX и offsetY - это вроде детище IE... 

Надо срочно заплатку поставить - страничка не работает, народ жалуется.
Помогите!

Автор: AVA12 4.10.2014, 23:36
Странно. Какие-то древние версии?

Можно попробовать свойства layerX и layerY, если offset* не определены.

Автор: kuksha 5.10.2014, 21:56
Никаких древностей. 
История этой косности FireFox давно тянется... Я потом вспомнил, что поэтому и не стал с offsetX и offsetY связываться..
В итоге вчера сделал такую заплатку: 
Код

if (typeof event.offsetX != 'undefined' && typeof event.offsetY != 'undefined') {  
    X0= event.offsetX;
    Y0= event.offsetY;
}
else if (event.target) {        
    var elem = event.target;
X0=0;
Y0=0;
    do {                        
        X0 += elem.offsetLeft;
        Y0 += elem.offsetTop;
    } while (elem = elem.offsetParent);
    X0 = (window.pageXOffset + event.clientX) - X0;
    Y0 = (window.pageYOffset + event.clientY) - Y0;
}

Автор: Aliance 23.10.2014, 13:51
kuksha, пожалуйста, используйте правильную кнопку код - там есть выпадающий список, где можно выбрать язык. У вас везде был html (он по умолчанию), тогда как у вас код везде - чистый js. Я отредактировал, просто на будущее. И еще, если вы получили ответ на свой вопрос - вверху темы есть кнопка "Пометить как решённый", не забывайте ее нажимать. Я сейчас это сделал за вас.

PS: плюс участнику AVA12 я за вас поставил.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)