1

更新：得到了一个 jsfiddle @ http://jsfiddle.net/gacDy/7/，但是，我什至无法让它正常工作。我会继续努力，但希望它会有所帮助。

我正在使用我正在Hammer.js开发的应用程序。现在，我在网上某个地方有一个演示，我用它来弄清楚如何使它工作。对于演示，我有两张图片（我将在下面发布屏幕截图），我正在尝试使用hammer.js.

就像现在的情况一样，两张图片都放大了，但第二张放大了第一张图片所在的区域。（见下面的截图）

预缩放图像：

缩放后的图像：

图像代码：

<div id="zoom2">
<img src="Chrysanthemum.jpg" alt="" width="600" height="377" />
</div>
<div id="zoom">
<img src="waldo.jpg" alt="" width="600" height="377" />
</div>

功能等：

<div id="debug"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="hammer.js"></script>
<script src="jquery.hammer.js"></script>
<script src="jquery.specialevent.hammer.js"></script>
<script>

var debug_el = $("#debug");

// disable the dragging of images on desktop browsers
$("img").bind("dragstart", function() {
    return false;
});


$(function(){
    var zoom = new ZoomView('#zoom','#zoom :first');
});


function ZoomView(container, element) {

    container = $(container).hammer({
        prevent_default: true,
        scale_treshold: 0,
        drag_min_distance: 0
    });

    element = $(element);


    // prefixes
    var vendorPrefixes = ["", "-webkit-", "-moz-", "-o-", "-ms-", "-khtml-"];

    var displayWidth = container.width();
    var displayHeight = container.height();

    //These two constants specify the minimum and maximum zoom
    var MIN_ZOOM = 1;
    var MAX_ZOOM = 5;

    var scaleFactor = 1;
    var previousScaleFactor = 1;

    //These two variables keep track of the X and Y coordinate of the finger when it first
    //touches the screen
    var startX = 0;
    var startY = 0;

    //These two variables keep track of the amount we need to translate the canvas along the X
    //and the Y coordinate
    var translateX = 0;
    var translateY = 0;

    //These two variables keep track of the amount we translated the X and Y coordinates, the last time we
    //panned.
    var previousTranslateX = 0;
    var previousTranslateY = 0;

    //Translate Origin variables

    var tch1 = 0, 
        tch2 = 0, 
        tcX = 0, 
        tcY = 0,
        toX = 0,
        toY = 0,
        cssOrigin;

    var last_drag_event;

    container.bind("transformstart", function(event){
        //We save the initial midpoint of the first two touches to say where our transform origin is.
        tch1 = [event.touches[0].x, event.touches[0].y];
        tch2 = [event.touches[1].x, event.touches[1].y];

        tcX = (tch1[0]+tch2[0])/2;
        tcY = (tch1[1]+tch2[1])/2;

        toX = tcX;
        toY = tcY;

        cssOrigin = toX +"px "+ toY +"px";
    });

    container.bind("transform", function(event) {
        scaleFactor = previousScaleFactor * event.scale;
        scaleFactor = Math.max(MIN_ZOOM, Math.min(scaleFactor, MAX_ZOOM));

        transform(event);
    });

    container.bind("transformend", function(event) {
        previousScaleFactor = scaleFactor;
    });

    container.bind("drag", function(event) {
        cssOrigin = (toX + (toX-event.position.x) / scaleFactor) +"px " +
                    (toY + (toY-event.position.y) / scaleFactor) +"px";

        transform(event);
        last_drag_event = event;
    });

    container.bind("dragend", function(event) {
        toX += ((toX - last_drag_event.position.x) / scaleFactor);
        toY += ((toY - last_drag_event.position.y) / scaleFactor);


        cssOrigin = toX +"px "+ toY +"px";
        transform(event);

        debug_el.text('TX: '+toX+' TY: '+toY);
    });


    function transform(event) {
        //We're going to scale the X and Y coordinates by the same amount
        var cssScale = "scale("+ scaleFactor +")";

        var props = {};
        $(vendorPrefixes).each(function(i, vendor) {
            props[vendor +"transform"] = cssScale;
            props[vendor +"transform-origin"] = cssOrigin;
        });
        element.css(props);


        debug_el.text('TX: '+translateX+' TY: '+translateY+' '+element.css('-webkit-transform-origin'))
    }

}
</script>

-- 我复制了上面的代码，并将对第一个图像的任何引用更改为引用第二个图像，以使第二个图像可缩放。但就像我提到的那样，它无法正常工作。我尝试更改所有变量名称，以防我错过了对可能导致这种重叠的第一张图像的引用，但没有任何帮助。

编辑：这也可能是相关的：

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
    #zoom {
        height: 377px;
        width: 600px;
        overflow: hidden;
        position:relative;
        background: #eee;
        border: solid 1px #ccc;
    }
</style>
<meta name="viewport2" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<style>
    #zoom2 {
        height: 377px;
        width: 600px;
        overflow: hidden;
        position:static;
        background: #eee;
        border: solid 1px #ccc;
    }
</style>

我只需要帮助弄清楚如何在缩放时防止第二张图像消失在第一张图像中。我会很感激我能得到的任何帮助。谢谢大家。

4

0 回答 0