图像旋转的jQuery遏制问题 [英] Jquery containment problem with Image rotation

问题描述

大家好. 我正在使用下面的代码旋转拖放的图像.旋转工作正常，但是当我开始旋转时，图像移动到了"div"容器之外.我什么都没有.

HI All. I am using the below code to rotate the drag/dropped image.The rotation is working fine,but when i start rotating ,the image moves outside the "div" container .Anything i am missing.

    //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;">

谢谢

推荐答案

CSS3旋转的尺寸问题

---

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

The Dimension Problem with CSS3 Rotation

---

When a DOM element is rotated using the CSS3 transform properties (or the equivalent browser specific routines), the object is rotated to a given angle, but the computed width and height are left untouched. Presumably because the transformations happen after all other redraw events and the original size variables are left as they were.

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

Rotation does not alter the actual size of an object, however, in the HTML DOM, all objects must be within a rectangular bounding box; the size of this bounding box will alter to accommodate the new extent of the rotated image.

计算元素在DOM中的位置的常规程序往往仅依赖于元素的位置(左和上)以及元素的大小(宽度和高度)，因为所有元素都是矩形，因此很好，矩形边界框与对象本身相同.旋转该项目后，它就不再成立，因此例程不再正确工作，因为边界框的宽度和高度可能与对象本身不同.

Routines that calculate the position of elements in the DOM tend to rely solely on the position of the element (left & top), and the size of the element (width & height), as all elements are rectangles, this is fine, the rectangular bounding box is identical to the object itself. When the item is rotated this ceases to be true, so routines no longer work correctly, as the width and height of the bounding box are potentially different to the object itself.

带边界框旋转

边界框的宽度和高度足够简单，可以进行数学计算，其中有一个不久前对此主题的疑问， casablanca 给出了答案，说明了计算新宽度和高度的数学方法. (他还说明了如何计算新位置，但是使用CSS旋转时，除非更改旋转原点，否则左/顶部保持不变.)

The bounding box width and height is simple enough to calculate mathematically, there was a question some time ago on this topic, with an answer given by casablanca stating the mathematics to calculate the new widths and heights. (He also states how to calculate the new positions, but with CSS rotatation, unless you change the origin of rotation, the left/top stay the same.)

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

The maximum extent is given by the diagonal of a rectangle:

基于上面给出的OP的代码，我在操作中进行了一些演示-注意边界框旋转时的大小，以及.draggable()容器如何无法在最大程度上容纳该项目.它超出了原始尺寸.

Based on the code the OP gave above, I have created a little demonstration of this in action - note the size of the bounding box as it rotates, and how the .draggable() container fails to contain the item over the extent to which it is beyond it's original dimensions.

• 正方形演示: http://jsfiddle.net/pkHFZ/

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

这篇关于图像旋转的jQuery遏制问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！