Как получить координаты центра изображения с помощью jQuery?

Question

Я разрешаю пользователям поворачивать изображения с помощью jQuery rotate. Однако, когда они это делают, изображение выходит за пределы содержащего элемента div и перекрывает элементы управления.

Я думаю, что если я смогу получить координаты центра изображения, я смогу тогда рассчитать максимальный радиус, вокруг которого оно вращается, и использовать это значение для изменения размера содержащего элемента div с помощью $ .animate.

Как бы я поступил в jQuery?

Answer 1

Вы можете рассчитать центр, используя размеры изображения при загрузке:

var img = $("#image"),
    loaded = false;

img.load(function(){
   if (loaded) return;
   loaded = true;
   var cx = this.width / 2,
       cy = this.height / 2;
   //If you want center coordinates relative to the document
   var pos = $(this).offset();
   cx += pos.left;
   cy += pos.top;
});

//Trigger the event if the image is already loaded
if(img[0].complete) {
    img.trigger("load");
}

Answer 2

Вы можете использовать смещение или положение , чтобы получить там местоположение, затем добавить ширину / 2 и высоту / 2 к таким числам, как это:

var location = $('img.selector').offset();
var center = new Object();
center.x = location.left + ($('img.selector').width() / 2);
center.y = location.top + ($('img.selector').height() / 2);

Выможет потребоваться использовать outHeight () и externalWidth () вместо width () и height (), если изображения имеют отступы или какие-либо границы.

Надеюсь, это поможет!