0

我有一个 2 页图像，我想在一个空间中显示，该空间旨在一次显示一页。我还想允许平移和缩放。因此，用户可以通过拖动来查看整个 2 页图像。

我已经使用 panzoom 来做到这一点https://timmywil.github.io/jquery.panzoom/ 但是如果没有缩放，我无法拖动以查看整个图像，而只能看到大约 75% 的图像。我放大图像越多，我能看到的就越多。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/3.2.2/jquery.panzoom.js"></script>

<div class="buttons" id="myButtons" >
        <button class="zoom-in btn btn-primary btn-sm" type="button">Zoom In</button> 
        <button class="zoom-out btn btn-primary btn-sm" type="button">Zoom Out</button> 
        <button class="reset btn btn-primary btn-sm" type="button">Reset Size</button> 
</div>

<div style="max-height:none;padding:0px;height:300px;width:520px;">
   <img id="theCanvas" class="img-fluid"  draggable="false" width="516" height="730" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAA0NDQ0ODQ4QEA4UFhMWFB4bGRkbHi0gIiAiIC1EKjIqKjIqRDxJOzc7ST">
<div>

var $pz2 = $("#theCanvas");
var $buttons = $('#myButtons');
$pz2.panzoom({
        $zoomIn: $buttons.find(".zoom-in"),
        $zoomOut: $buttons.find(".zoom-out"),
        $reset: $buttons.find(".reset"),
        contain: 'invert',
        minScale: 1
    });
    $pz2.parent().on('mousewheel.focal', function(e) {
        e.preventDefault();
        var delta = e.delta || e.originalEvent.wheelDelta;
        var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
        $pz2.panzoom('zoom', zoomOut, {
            increment: 0.1,
            focal: e
        });
    });

这是一个小提琴

https://jsfiddle.net/LzwLmc94/

图像在第一页上有文字“Page 1A, Page 1B, ... Page 1F”，在第二页上有类似的文字。如果不进行缩放，您最多只能看到第 2B 页以及更多内容。

4

1 回答 1

0

这似乎是containjquery.panzoom 库的一个特性。

删除线

 contain: 'invert',

成功了

但是，显然，可以将图像拖出框架......

于 2018-05-13T11:44:13.413 回答