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

Question

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

Answer 1

问题在于旋转与transform-origin相反，默认情况下为50% 50%。当尺寸改变时，旋转点也会改变，从而引起运动。您可以通过设置 transform-origin 字段(以像素为单位)来固定旋转点。当您打字时它不会移动，但如果您尝试更改旋转，它不会围绕元素中心(假设元素中心自您设置以来已更改)。

所以在改变旋转 Angular 之前，你需要将 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
      });
   }