javascript - 用户键入时旋转的内容可编辑移动

Question

我有一个可以由用户旋转的可编辑内容。元素的大小auto意味着它会在您输入时改变它的大小。问题是，如果您在旋转时在其中输入内容，它会移动 jsfiddle

Answer 1

问题是旋转是反对 的transform-origin，默认情况下是50% 50%。当尺寸发生变化时，旋转点也会发生变化，这会导致运动。transform-origin您可以通过以像素为单位设置字段来固定旋转点。它不会在您键入时移动，但如果您尝试更改旋转，它不会围绕元素中心（假设元素中心在您设置后已更改）。

所以在改变旋转角度之前，你需要重置transform-origin到元素的中心，但是一旦你这样做了，元素的位置就会改变，所以你也需要纠正位置。获取改变前后边界框位置的差异，transform-origin并将其添加到元素坐标中。这是一些代码（使用 Mootools 框架编写）

 var correctRotatedElementPosition = function (element) {
      var old_position = element.getBoundingClientRect();
      var center = '50% 50%';
      element.setStyles({
         'transform-origin'         : center,
         '-webkit-transform-origin' : center,
         '-ms-transform-origin'     : center
      });

      var new_position = element.getBoundingClientRect();

      var current_coordinates = element.getStyles(['left', 'top']);

      var delta_left = old_position.left.toInt() - new_position.left.toInt();
      var delta_top  = old_position.top.toInt() - new_position.top.toInt();

      this.element.setStyles({
         'left'              : current_coordinates.left.toInt() + delta_left,
         'top'               : current_coordinates.top.toInt() + delta_top
      });
   }