Question

我允许用户使用jQuery旋转来旋转图像。但是，当他们这样做时，图像会在包含div的外部流动，并与控件重叠。

我的想法是，如果我可以得到图像中心的坐标，我就可以计算它旋转的最大半径，并使用此值来使用$ .animate调整包含div的大小。

我如何在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

您可以使用offset或position来获取位置，然后将width / 2和height / 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（）和outerWidth（）而不是width（）和height（）。

我希望这有帮助！

如何使用jQuery获取图像的中心坐标？

2 个答案: