图像旋转的Jquery包含问题

Question

大家好.我使用下面的代码来旋转拖放图像.旋转工作正常,但是当我开始旋转时,图像移动到"div"容器之外.我想念的东西.

    //Moving outside the container for first time.After dragging inside the div,then rotates inside the div
  var test = 5;
  var mouseDown = false;
  $(function() {
      $('.frame').mousedown(function(e) { mouseDown = true; });
      $('.frame').mouseup(function(e) { mouseDown = false; });
      $('.frame .rotatable').live('mousemove', function(e) {
          if ((mouseDown) && (e.ctrlKey)) {

              test = test + 10;
              var currentId;
              document.getElementById('angle').value = test;
              $(this).rotate({ angle: test });
              var currentId = $(this).attr('id');
              var id = currentId.substring(8);                  
              var deleteimage = 0;
              var angle = test;
              saveCoords(e.clientX, e.clientY, angle, id, document.getElementById("<%=trafficID.ClientID%>").value, deleteimage);
          }
          $('#frame .rotatable').draggable({ containment: 'parent' });

      });
  });

HTML

<div id="frame" class="frame" runat="server"  style="width:550px; height:400px;background-position:bottom; border:1px solid #000;">

谢谢,

Answer 1

CSS3旋转的维度问题

当使用CSS3变换属性(或等效的浏览器特定例程)旋转DOM元素时,对象将旋转到给定角度,但计算出的宽度和高度保持不变.大概是因为转换发生在所有其他重绘事件之后,原始大小变量保持不变.

旋转不会改变对象的实际大小,但是,在HTML DOM中,所有对象必须位于矩形边界框内; 此边界框的大小将改变以适应旋转图像的新范围.

计算DOM中元素位置的例程往往仅依赖于元素的位置(左侧和顶部)以及元素的大小(宽度和高度),因为所有元素都是矩形,这很好,矩形边界框与对象本身相同.当项目旋转时,这将不再成立,因此例程不再正常工作,因为边界框的宽度和高度可能与对象本身不同.

带边界框的旋转

边界框的宽度和高度很简单,可以用数学方法计算,前一段时间有一个关于这个主题的问题,由卡萨布兰卡给出答案,说明数学计算新的宽度和高度.(他还说明了如何计算新的位置,但是使用CSS旋转,除非你改变旋转原点,否则左/上保持不变.)

最大范围由矩形的对角线给出:

根据OP上面给出的代码,我已经创建了一个实际的演示 - 注意边界框旋转时的大小,以及.draggable()容器如何在超出原始范围的范围内包含该项目尺寸.

• Square Demo: http ://jsfiddle.net/pkHFZ/

• 矩形演示: http ://jsfiddle.net/pkHFZ/2/