Question

有没有人知道在使用webkit-transform旋转后如何获得旋转框的左上角显示？

所以，例如，我绘制一个框要求左上角，例如将框旋转270度，然后如何查询“新”左上角的位置，这在这种情况下是有效的原来的右下角......

我已经尝试使用jQuery来检查offset（）。top和offset（）。left但似乎jQuery足够聪明，知道容器已旋转，我回到原来的左上角我在这种情况下不要。

我想我可以跟踪旋转，然后总是要求正确的偏移，但我认为如果可能的话，它会更加强大。

感谢您的帮助！

Answer 1

尝试将左上角作为一个点（原始非边界框），然后是transform-origin，width和height以及transform样式属性。

要获取webkit中元素的原始左上角，请使用以下函数：

function getOffset(el){

        if(el.context!==undefined)
            el = el[0]; //remove the jquery wrapper if there is one

        var x = 0, y = 0;

        while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {

            x+=el.offsetLeft;
            y+=el.offsetTop;
            el = el.offsetParent;
    }

    return {left:x,top:y};

}

如果变换原点是特定的数量，例如50px 30px，则可以将其用作旋转左上角的点。但是，如果它是百分比，则使用宽度和高度来计算旋转点。 e.g. 20% 60px would be (width/5,60)

要从角色中取出角度（如果您还不知道），可以运行此功能

function getRotation(el,returnType,recurse) {

        el = el.context!==undefined?el[0]:el;

        var styl = el.style,
            tran = styl.transform || styl.webkitTransform || styl.mozTransform || 'rotate(0deg)',
            rgx = tran.match(/\(([\d\.]+)\w/i),
            ang = parseFloat(rgx[1])||0,
            type = rgx[2]||"deg";

        recurse = (recurse===undefined?false:recurse);
        returnType = returnType || "deg";

        if(recurse && el.className.indexOf("limb-piece")!==-1)
            ang += getRotation(el.parentNode,returnType,recurse);

        if(returnType===type)
            return ang;
        else {

            if(type==="deg")
                return ang*(180/Math.PI);
            else
                return ang*(Math.PI/180);
        }

    }

取transform-origin并使用此函数（p1是原点，使用[0,0]，p2是变换原点，然后angle是以弧度表示的旋转

rotatePointAroundPoint : function(p1,p2,ang){

        var s = Math.sin(ang), c = Math.cos(ang),
            x = p1[0] - p2[0], y = p1[1] - p2[1],

            rx = x * c - y * s,
            ry = x * s + y * c,

            ret = [rx+p2[0],ry+p2[1]];

        return ret;

    }

然后将结果添加到从原件计算的左上角，你应该在任何角度都有左上角的位置。

webkit转换后的框位置

1 个答案: