Question

我有一个使用-webkit-transform旋转的div元素：rotate（45deg）。如果我像这样尝试在旋转之后访问它的当前位置

var x = $('#tap-area').offset().left;
var y = $('#tap-area').offset().top;

它返回的不是原始左上角所在的实际值，而是整个div的边界框的左上角（在DIV之外的物理上最左上角）。

如何在旋转后计算/获取div的原始左上角

例如：如果我将其旋转90度，我现在想要获得的值将是右上角。如果我将它旋转180度，我现在想要获得的值将在右下角。

我需要这个，所以我可以设置另一个DIV元素始终保持附着在元素的原始左上角，这样它就会改变它的位置，具体取决于它的旋转方式。

感谢。

Answer 1

您始终可以使用以下方式获取元素的绝对位置：

<element>.getBoundingClientRect()

这将为您提供AABB（轴对齐边界框或Min-Max-Box），屏幕左上角为原点。（MDN）

如果您需要访问元素左上角的位置，您也可以旋转其原始位置向量，这是一个简单的矩阵乘法。你应该记住，旋转中心默认是元素的中心，但也可以用css将其设置到不同的位置。

祝你好运！

Answer 2

这是我遇到同样问题后遇到的解决方案：

// Initial data with TOP AND LEFT OF THE BOUNDING BOX (not x,y of top left point of     the box but left margin of the bounding box   and top margin of the bounding    box)

var top  = Math.ceil($('#' + id).position().top);
var left = Math.ceil($('#' + id).position().left);
var wi   = $('#' + id).css("width").replace("px","");
var he   = $('#' + id).css("height").replace("px","");
var rot  = $(this).data(id + ".ROTACION"); //There I have the applied rotation stored ...

// CALULATIONS

var swapheightwidth= false;

    //Let's keept it first cuad. 

if (rot > 270)
{
    rot = rot - 270;
    swapheightwidth= = true;
}
else if (rot > 180) 
{
    rot = rot - 180;
}
else if (rot > 90) 
{
    swapheightwidth= = true;
    rot = rot - 90;
}

if (swapheightwidth)
{
    var calculatedX=  left + (wi * sin(rot)); 
    var calculatedY=  top + (wi * cos(rot));
}
else
{
    var calculatedX=  left + (he * sin(rot)); 
    var calculatedY=  top + (he * cos(rot));
}

var xbott = left;
var ybott =  Math.ceil(calculatedY);

var xtop=  Math.ceil(calculatedX);
var ytop= top;

    // FINAL CALCULATED POINTS
// xtop  ytop  -> top left
// xbott  ybott   -> bottomleft 

function sin(x) {
    return Math.sin(x / 180 * Math.PI);
}

function cos(x) {
    return Math.cos(x / 180 * Math.PI);
}

干杯

JavaScript / jQuery：如何在旋转后获得元素（DIV）的实际原始位置

2 个答案: