0

有一个固定容器用作我的内容的视口。内容是<div>固定大小的元素。视口大小与窗口绑定，如果用户调整窗口大小，视口大小可能会发生变化。我正在使用 jQuery.panzoom 库来处理平移和缩放，以让用户查看他们想要的部分内容。现在我需要以下功能，但找不到它们：

  • 内容不得小于在视口中完全可见的要求。这似乎是通过minScale选项完成的。我只需要连接调整大小事件来更新minscale值。
  • 如果另一边有空白区域，则不得将内容拖到一边。这意味着，如果内容小到完全可见，则它必须是完全可见的。这必须居中，以便在缩小时内容始终位于同一位置。

它就像一个图片查看器，最初会缩放图像以使其适合并居中。用户可以放大，但不能比初始视图进一步缩小。只是我的内容不是图像，而是更复杂的 HTML 元素。

这是我到目前为止所做的：

<div id="room-wrapper" style="position: fixed; top: 0; left: 150px; right: 0; bottom: 0;">
    <div id="room" style="width: 800px; height: 600px;">
        Content here.
    </div>
</div>

<script>
    var roomWrapper = $("#room-wrapper");
    // Set up options
    var minScaleX = roomWrapper.innerWidth() / 800;
    var minScaleY = roomWrapper.innerHeight() / 600;
    var minScale = Math.min(minScaleX, minScaleY);
    var panzoom = $("#room").panzoom({
        startTransform: "scale(" + minScale + ")",
        minScale: minScale,
        //contain: "invert",
        increment: 0.1
    });
    // Compensate strange offset, doesn't work
    panzoom.panzoom("pan", 150, 0, {
        animate: false,
        silent: true
    });
    // Mouse wheel zooming
    panzoom.parent().on("mousewheel.focal", function (e) {
        e.preventDefault();
        var delta = e.delta || e.originalEvent.wheelDelta;
        var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
        panzoom.panzoom("zoom", zoomOut, {
            animate: true,
            focal: e
        });
    });
</script>

内容最初被正确缩放，但在顶部和左侧的某个位置偏移。我不知道那个偏移量是从哪里来的。此外，还没有平移约束。注释掉的contain可能是相关的，但我不理解它的任何文档。

我需要在我的代码中修复什么以使其满足上述要求？我想这些是非常基本的，很多人会需要它们，但没有例子。

4

0 回答 0