Question

我正在寻找一个好的插件来轻松缩放和平移现有的SVG图像。我已经在使用一个名为Jquery.panzoom的插件，它运行良好，但在缩放SVG时会失去清晰度并变得模糊。不确定是否有人能引导我朝着正确的方向前进？

这是我的jQuery -

(function ($) {

    var $parent = $('#floor_plan');

    if($parent.length) {

        // set-up panzoom
        var $panzoom = $parent.find('.panzoom').panzoom({
            increment       : 0.5,
            minScale        : 1,
            maxScale        : 8,
            startTransform  : 'scale(4.0)',
            $zoomIn         : $parent.find('A[href=#zoom_in]'),
            $zoomOut        : $parent.find('A[href=#zoom_out]'),
            contain         : 'invert'
        }).panzoom('zoom', true);

        // handle scrolling in and out
        $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, {
                increment   : 0.1,
                animate     : false,
                focal       : e
            });
        });
    }
})(jQuery);

和HTML -

<div id="floor_plan" class="hidden-xs hidden-sm">

    <div class="zoom-control">
        <a href="#zoom_in"><i class="fa fa-fw fa-plus-square-o"></i></a>
        <a href="#zoom_out"><i class="fa fa-fw fa-minus-square-o"></i></a>
    </div>
    <div class="close">
        <a href="#close_floor_plan"><i class="fa fa-fw fa-times"></i></a>
    </div>

    <div class="panzoom">
        <img src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" alt="Floor Plan" style="width: 100%; height: auto; display: block" />
    </div>
</div>

JSFiddle示例 - http://jsfiddle.net/576a4qeh/1/

此处的原始演示（位于页面底部） - http://timmywil.github.io/jquery.panzoom/demo/

尝试并放大（使用图像上的鼠标滚轮），您会发现它很模糊。调整窗口大小，它会跳回到高质量。

期待您的想法和帮助。

谢谢！

Answer 1

问题是浏览器处理css“转换”的方式。在Firefox中它没有问题。在谷歌浏览器中，内容实际上已拉伸（缩放时模糊）。

您必须找到另一种缩放方式，例如更改图像的高度和宽度。

Answer 2

这是一个简单的方法：

HTML：

<div class="panzoom">
    <div class="img"></div>
</div>

<input id="zoom" type="range" class="zoom-range" step="1" min="200" max="1500">

CSS：

.panzoom {
    overflow: scroll;
    width: 250px;
    height: 200px;
}
.panzoom .img {
    background: url('http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg') no-repeat 0 0 fixed;
    min-height: 768px;
    min-width: 500px;
}

JS：

$("#zoom").change(function(){
    $(".panzoom .img").css("background-size", this.value + "px")
});

$('.panzoom .img').mousemove(function(e){
    var mousePosX = (e.pageX/$(window).width())*100;
    $(e.target).css('background-position-x', mousePosX +'%');
    var mousePosY = (e.pageY/$(window).height())*100;
    $(e.target).css('background-position-y', mousePosY +'%');
});

JSFiddle Demo

Answer 3

这是一些技巧。 https://github.com/timmywil/jquery.panzoom/issues/84

.panzoom {
 -webkit-backface-visibility: initial !important;
 -webkit-transform-origin: 50% 50%;}

插件缩放和平移SVG

3 个答案: