jQuery UI：通过 CSS 缩放内容时调整对象大小

Question

我正在创建一种编辑器，并具有放大和缩小的功能。这样做的目的是将主要内容区域 css 缩放设置为用户指定的缩放。

当我集成时，我注意到 jQUery UI .resizable 不再根据鼠标位置调整大小，而是在内容缩放 100% 时鼠标所在的位置。这是因为我假设没有考虑缩放百分比。

JSFiddle：http://jsfiddle.net/qwMkt/

有什么办法可以解决这个问题吗？提前致谢

JS代码：

$(document).ready(function(){
    $('.box').resizable({
        containment: '#container',
        handles: "se",
        scroll: true
    });
});

CSS 代码：

#container{
    zoom: 50%;
    background: #ccc;
    width: 500px;
    height: 500px;
}

#container .box {width: 100px; height: 100px; border: 1px solid #333}

Answer 1

我遇到了类似的问题，但我想出了这个解决方案，它使用了鼠标的位置以及当前的缩放。在此示例中，我假设您有一个名为 current_zoom 的变量，它将当前缩放作为浮点数，还有一个名为 maintainAspectRatio 的变量，表示元素是否保持其纵横比。

此代码仅支持使用南和东手柄调整大小。如果要使用任何其他代码，则需要扩展代码。例如，我还实现了东南手柄的代码。但是，为了展示最低限度，我将其省略了：

$('.box').resizable({
   ...

   resize: function(event, ui) {
      var $element = ui.element;
      // Gets the axis that the user is dragging.
      var axis = $element.data('ui-resizable').axis;

      // Get the dimensions of the element's bounding box. We can't use 
      // leftOffset + $element.width() because it doesn't factor in the 
      // current zoom. Morever, we can't just multiply $element.width() 
      // by the current zoom to get the zoomed width because it still 
      // gives the wrong value. So we have to be sneaky and use resizable's 
      // resizer overlays to get the right and bottom values.
      var leftOffset = $element.offset().left;
      var topOffset = $element.offset().top;
      var rightOffset = $element.children('.ui-resizable-e').offset().left;
      var bottomOffset = $element.children('.ui-resizable-s').offset().top;

      // We are using the mouse location to calculate the width (during 
      // a horizontal resize) and the height (during a vertical resize) 
      // of the element. This is because we need the resize box to keep
      // up with the mouse when the user is not at 100% zoom.
      var mouseX = event.pageX;
      var mouseY = event.pageY;

      // Must remove the zoom factor before setting width and height.
      var mouseCalculatedWidth = (mouseX - leftOffset) / current_zoom;
      var mouseCalculatedHeight = (mouseY - topOffset) / current_zoom;
      var offsetWidth = (rightOffset - leftOffset) / current_zoom;
      var offsetHeight = (bottomOffset - topOffset) / current_zoom;

      // In order to maintain aspect ratio, we manually calculate it.
      var aspectRatio = offsetHeight / offsetWidth;

      // Resizing using the east handler, set the width of the element.
      // If this element maintains its aspect ratio, also set the height.
      if (axis == "e") {
         $element.width(mouseCalculatedWidth);

         if (maintainAspectRatio) {
            $element.height(mouseCalculatedWidth * aspectRatio);
         }
      }

      // Resizing using the south handler, set the height of the element.
      // If this element maintains its aspect ratio, also set the width.
      if (axis == "s") {
         $element.height(mouseCalculatedHeight);

         if (maintainAspectRatio) {
            $element.width(mouseCalculatedHeight / aspectRatio);
         }
      }
   }

   ...
});// Resizable

Answer 2

如果我正确理解您的问题，您应该添加 alsoResize: "#container" 到resizable(..) 函数的参数。

查看文档：http://api.jqueryui.com/resizable/#option-alsoResize