javascript - 了解旋转容器上的变换和变换原点 anchor

Question

我正在尝试使用 javascript 和 css 属性 transform 和 transform-origin 旋转一个容器，我的想法是围绕特定坐标旋转它(例如两根手指之间的捏合手势中心)，我使用这个简单代码(附加片段)现在旋转容器并使用 onclick 事件捕获 anchor 。只要您一直单击而不将光标移动到容器上的不同位置，它就可以正常工作。当容器旋转后更改点击位置时会出现问题，预期的行为是跟踪变换并开始为该新点旋转，但是现在容器正在进行奇怪的跳跃。我认为需要将一些 x,y 转换添加到容器中，但我可以弄清楚添加到容器中的正确因素是什么。

我不确定我是否已经很好地说明了预期的行为，以确保这里的和示例:假设您将一个音符固定到某个表面的某个位置，然后，您开始旋转音符，将图钉作为 anchor 观点。现在，稍微旋转一下音符后，你放出图钉(将音符保持在同一个位置)，然后将图钉放在音符上的不同位置，并使用新的 anchor 再次旋转。这是预期的行为，希望我已经很好地解释了自己。

这里有一个片段可以更好地展示它，也可以在 codepen 上找到，干杯。

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

问题是每次单击时，div 都会根据您单击的位置更改位置。第一次点击后，您应该保存 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 .