Поворот элемента вокруг определенной точки (без использования transform-origin) с помощью javascript - PullRequest
0 голосов
/ 07 февраля 2012

Я хочу иметь возможность вернуть координату элемента после его поворота вокруг определенной точки. Это то, что я до сих пор (но это неверно).

function rotateAroundPoint(pointX,pointY,angle) {
    //converting degrees to rads
    angle = angle * Math.PI / 180.0
    newX = Math.cos(angle) * pointX - Math.sin(angle) * pointY;
    newY = Math.sin(angle) * pointX + Math.cos(angle) * pointY;
    return({x:newX,y:newY});
}

var result = rotate(50,50,45);
/* offsetting by the result should make it look rotated around the point 50 50 */        
document.getElementById("div").setAttribute("style","top:"+(result.y)+"px;left:"+(result.x)+"px;");

css:

 #div
{
width:100px;
height:100px;
padding:10px;
position: absolute;
border: 1px solid black;
background-color: red;
-webkit-transform: rotate(45deg);
}

1 Ответ

1 голос
/ 19 марта 2012

CSS-преобразование вращается вокруг центра элемента; Я понимаю, что вы хотите переместить элемент так, чтобы он вращался вокруг другой точки. Естественный способ сделать это - трансформация, но вы говорите, что не хотите этого делать - я полагаю, у вас есть веская причина.

Что вам нужно сделать, так это сместить положение элемента на величину, на которую переместился бы его центр, если повернуть вокруг этой точки . Поэтому:

  1. Пусть точка p = половина ширины и высоты элемента (используя getComputedStyle, если необходимо).
  2. p = p - точка начала вращения.
  3. p = rotate ( p , angle ) (где rotate - это (ошибочно названо, поскольку оно не вращается о точке, но происхождение) функция в вашем коде).
  4. p = p + точка начала вращения
  5. p = p - половинные размеры элемента.

p теперь содержит значения, назначаемые сверху / слева. Обратите внимание, что шаги 2 - 4 являются обычной процедурой вращения вокруг точки, отличной от начала координат; шаги 1 и 5 просто смещаются от исходного значения преобразования по умолчанию и обратно.


Если это , а не , что вы ищете, тогда, пожалуйста, предоставьте диаграмму, показывающую желаемые результаты.

...