使用Jquery旋转图片时出现的边界问题

Question

使用Jquery旋转图片时出现的边界问题

3

大家好。我正在使用以下代码旋转拖放的图像。旋转工作正常，但是当我开始旋转时，图像会移动到“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;">

Thanks,

- Vani

1

旋转和DIV的范围在不同的浏览器中表现得非常奇怪，我发现它们之间存在差异。 - Orbling

@Vani：你只是在使用IE吗？通常情况下，网络应用程序是为所有浏览器开发的，除非它仅供内部使用。 - Orbling

@Orbling 这是内部使用的。 - Vani

@Vani：没错，这是我长期以来一直遇到的问题 - 我想我应该适当地演示一下这个问题，以便其他人也能找到它。 - Orbling

@Orbling 你对此有什么看法？这是我们能够修复的问题吗？因为这个问题导致我的项目延迟了。 - Vani

@Vani：你看了我的回答吗？那解释了问题，并有效地提供了解决方案的基础。 - Orbling

2个回答

0

作为@Orblings答案的替代方案，它不需要任何额外的Javascript、数学或计算。

相反，您可以将对象分成一个可拖动的容器和一个可旋转的子元素，而不是使对象既可拖动又可旋转。

<div class="container">
    <span class="draggable-element">
        <span class="rotatable-element"></span>
    </span>
</div>

通过这样做，您的可拖动元素始终与固定边界框保持水平，而仅子元素的边界框发生变化。由于这个边界框不受容器的限制，因此它仍然可以在外部。

- Marcus Lind

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Orbling · Accepted Answer

CSS3旋转中的尺寸问题

当使用CSS3变换属性（或等效的特定于浏览器的例程）旋转DOM元素时，对象会旋转到给定角度，但计算出的宽度和高度保持不变。这很可能是因为在所有其他重新绘制事件之后进行转换，原始大小变量保持不变。

旋转不会改变对象的实际大小，然而在HTML DOM中，所有对象必须位于矩形边界框内；该边界框的大小将更改以适应旋转后图像的新范围。

计算DOM元素位置的例程往往仅依赖于元素的位置（左/上）和大小（宽度/高度），因为所有元素都是矩形，所以这是可以的，矩形边界框与对象本身相同。当项被旋转时，这个假设不再成立，所以例程不能正确地工作，因为边界框的宽度和高度可能与对象本身不同。

带边界框的旋转

带边界框的旋转

边界框的宽度和高度足够简单，可以通过数学计算来得出，此前该主题有一个问题，由casablanca提供了计算新宽度和高度的数学公式。（他还说明了如何计算新的位置，但使用CSS旋转时，除非改变旋转的原点，否则左/上保持不变。）

矩形旋转-新尺寸

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

矩形的对角线

基于上面OP提供的代码，我制作了一个小演示 - 注意边框框大小在旋转时的变化以及.draggable()容器无法限制物品超出其原始尺寸的范围。

正方形演示：http://jsfiddle.net/pkHFZ/
矩形演示：http://jsfiddle.net/pkHFZ/2/