1

私は一種のエディターを作成しており、それを使用してズームインおよびズームアウトすることができます。これが行うことは、メイン コンテンツ領域の 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}
4

2 に答える 2

0

私は同様の問題に直面しましたが、マウスの位置と現在のズームを組み合わせてこの解決策を考え出しました。この例current_zoomでは、現在のズームを float として与える という変数と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
于 2014-12-09T15:45:17.617 に答える