Question

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

我正在使用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>

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

Hammer.js Pinch-to-zoom无法正常工作

0 个答案: