Question

我找到了一个在旧的SO问题中旋转HTML元素的示例：

一旦我将任何缩放（style =“ zoom：0.5”）应用于父元素，旋转就会变得异常。

http://jsfiddle.net/superasn/mv2oqL36/2/（父元素的缩放比例为0.5，偏移量为500px）

旋转代码如下

$(document).ready(function() {
  // the same as yours.
  function rotateOnMouse(e, pw) {
      var offset = pw.offset();
      var center_x = (offset.left) + ($(pw).width() / 2);
      var center_y = (offset.top) + ($(pw).height() / 2);
      var mouse_x = e.pageX;
      var mouse_y = e.pageY;
      var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
      var degree = (radians * (180 / Math.PI) * -1) + 100;
      //            window.console.log("de="+degree+","+radians);
      $(pw).css('-moz-transform', 'rotate(' + degree + 'deg)');
      $(pw).css('-webkit-transform', 'rotate(' + degree + 'deg)');
      $(pw).css('-o-transform', 'rotate(' + degree + 'deg)');
      $(pw).css('-ms-transform', 'rotate(' + degree + 'deg)');
  }

  $('.drop div img').mousedown(function(e) {
    e.preventDefault(); // prevents the dragging of the image.
    $(document).bind('mousemove.rotateImg', function(e2) {
      rotateOnMouse(e2, $('.drop div img'));
    });
  });

  $(document).mouseup(function(e) {
    $(document).unbind('mousemove.rotateImg');
  });
});

我认为rotateOnMouse函数需要以某种方式考虑父元素的CSS缩放，但我无法弄清楚。

我的问题是我需要在rotateOnMouse函数中进行哪些更改才能在缩放后计算degree变量？

应用CSS缩放功能，使用鼠标（或mouseevent）旋转HTML元素

0 个答案: