Положение ящика после вращения webkit-transform - PullRequest
Новая
       5

Положение ящика после вращения webkit-transform

1 голос
/ 07 июля 2010

Кто-нибудь знает, как получить отображаемый верхний левый угол повернутой рамки после использования поворота с помощью webkit-transform?

Так, например, я рисую окно с запросом на верхний левый угол, поворачиваю поле, например, на 270 градусов, а затем запрашиваю положение «нового» верхнего левого угла, что в данном случае эффективно оригинальный нижний правый угол ...

Я пытался использовать jQuery для проверки offset (). Top и offset (). Left, но, похоже, jQuery достаточно умен, чтобы знать, что контейнер повернут, и я возвращаю исходный верхний левый угол, который я не хочу в этом случае.

Полагаю, я мог бы отслеживать повороты, а затем всегда запрашивать правильные смещения, но я думаю, что было бы немного более надежным, если бы это было возможно.

Спасибо за вашу помощь!

1 Ответ

1 голос
/ 13 апреля 2012

Попробуйте захватить верхний левый угол как точку (исходная не ограничивающая рамка), затем 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 - начало преобразования, тогда угол - это поворот в радианах 

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;

    }

Затем добавьте результат в верхний левый угол, рассчитанный по оригиналу, и у вас должна быть позиция верхнего левого угла под любым углом.

...