-webkit-transform scale: как получить координаты видимой области

У меня есть изображение, которое отображается в фиксированном div.

<div>
  <img src="path/to/image" id="map" />
</div>

Я использую свойство -webkit-transform для масштабирования и перехода к масштабированному изображению (другие браузеры не требуются. только webkit). Все делается с помощью javascript/jquery. Навигация работает в любом направлении. Максимальное масштабирование 10.

E.g.:

<button id="up">zoom in and move up</button>

$('#up').on('click',function() {
    $('#map').css({'webkitTransform':'translateX('+SOME_VALUE+'px) translateY('+SOME_VALUE+'px) scale('+ SCALE +')'});
});

Все работает нормально.

Сложность в другом:

На изображении есть точка круга. Я знаю координаты этой точки и ее радиус (например, X-100px,Y-100px,R-10px); Эти координаты связаны с изображением.

Вопрос:

Как я могу определить, видна ли эта точка круга или нет, если изображение масштабируется? Как определить, какая область изображения видна? Как я могу определить его фактические координаты в измененном состоянии. Пожалуйста, не стесняйтесь взглянуть на пример изображения, на котором показано желаемое:

Изображение

ОБНОВИТЬ:

К сожалению, приведенные ниже решения не совсем корректны. Умножая значение jquery высоты () и скорость масштабирования, вы не получите точных результатов. Я сам нашел решение. Существует следующее свойство javascript (не jquery):

элемент. getBoundingClientRect

Это свойство отражает реальные размеры измененного изображения и возвращает реальные координаты фактического положения. Использование с jquery следующее:

$('#some_element')[0].getBoundingClientRect();

Надеюсь, это будет полезно для тех ребят, которые столкнутся с проблемой в будущем :)


javascript scale jquery css webkit-transform
person Ssey    schedule 20.07.2013    source источник
comment
Если он отвечает на ваш вопрос, вы должны опубликовать его как ответ и ссылку на то, где вы нашли решение (блог, документация и т. д.).   -  person alex    schedule 22.07.2013

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете получить размер div с помощью $("#yourDiv").height() или $("#yourDiv").width(), а затем получить размер изображения и определить ее положение в div с помощью $('#yourImage').position().left и $('#yourImage').position().top. С помощью нескольких операторов if вы должны узнать, где находится ваше изображение.

person DejanG    schedule 20.07.2013
comment
Я уже пробовал это. К сожалению, это не работает. .width() && .height() всегда возвращают старые значения, а не измененные. - person Ssey; 20.07.2013
comment
затем масштабируйте эти значения - person DejanG; 20.07.2013