Question

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

当我整合时，我注意到jQUery UI .resizable不再根据鼠标位置调整大小，但如果内容缩放为100％，则鼠标将在何处调整大小。这是因为我假设不考虑缩放％。

任何想法如何解决这个问题？提前致谢

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

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

2 个答案: