Помните о якорной точке трансформации и трансформации на повернутом контейнере

Question

Я пытаюсь повернуть контейнер с преобразованием свойства javascript и css и преобразовать начало координат, идея состоит в том, чтобы повернуть его вокруг определенных координат (например, жест щепотки центр между двумя пальцами), я использую этот простой код (фрагмент кода прилагается) прямо сейчас, чтобы повернуть контейнер и используя событие OnClick, чтобы захватить точку привязки. Он работает правильно, пока вы продолжаете нажимать, не перемещая курсор в другое положение на контейнере. Проблема в том, что когда вы изменяете позицию клика после поворота контейнера, ожидаемое поведение заключается в том, чтобы отслеживать преобразование и начинать вращаться для этой новой точки, однако сейчас контейнер выполняет нечетный скачок. Я думаю, что некоторые х, у перевод нужно добавить в контейнер, но я могу выяснить, что является правильным фактором для добавления в контейнер.

Я не уверен, правильно ли я проиллюстрировал ожидаемое поведение, чтобы убедиться в этом и примере: представьте, что вы наводите заметку на поверхность в определенном положении, тогда вы начинаете вращать заметку, опорная точка. Теперь, после того, как вращающаяся ноту немного, вы положили штифт (Keeping записку на том же месте), то вы поместите палец на другую позицию на ноте и снова вращаются с этой новой точки привязки. Это ожидаемое поведение, надеюсь, что я хорошо себя объяснил.

Вот фрагмент, чтобы показать его лучше, также доступный на кодепене, приветствия.

http://codepen.io/vasilycrespo/pen/GZeYpB

var angle = 15, 
 
    scale = 1, 
 
    origin = { x: 0, y: 0}; 
 
    
 
var transform = function (e) { 
 
    var map = document.getElementById("map"); 
 
    angle += 15; 
 
    map.style.transformOrigin = e.pageX + "px " + e.pageY + "px"; 
 
    map.style.transform = "rotate("+angle+"deg) scale("+ scale +")"; 
 
};

.content{ 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    margin-top:0; 
 
    margin-left:0; 
 
    background-color: #ccc; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.square{ 
 
    position: absolute; 
 
    width: 400px; 
 
    height: 400px; 
 
    background-image: url(http://www.pnas.org/site/misc/images/15-02545.500.jpg); 
 
    background-size: cover; 
 
}

<div class="content" onclick="transform(event)"> 
 
    <div class="square" id="map"></div> 
 
</div>

Answer 1

Проблема заключается в том, что каждый раз, когда вы нажимаете, то ДИВ меняет положение в зависимости от места нажатия кнопки. После первого нажатия вы должны сохранить e.pageX и e.pageY, а в следующие клики вы должны использовать сохраненные значения. Вы можете изменить свою transform функцию следующим образом:

var transform = (function() { 
    var pageX, pageY; 
    return function(e) { 
    if (typeof pageX === "undefined") { 
     pageX = e.pageX 
     pageY = e.pageY 
    } 
    var map = document.getElementById("map"), xr; 
    angle += 15; 
    map.style.transformOrigin = pageX + "px " + pageY + "px"; 
    map.style.transform = "rotate("+angle+"deg) scale("+ scale +")"; 
    } 
}()) 

updated Code Pen См.