使用Hammer.js进行捏合缩放

16 浏览
0 Comments

使用Hammer.js进行捏合缩放

我正在尝试使用hammer.js实现捏放缩功能。

这是我的HTML代码：

这是我的脚本：

var hammertime = Hammer(document.getElementById('pinchzoom'), {
    transform_always_block: true,
    transform_min_scale: 1,
    drag_block_horizontal: false,
    drag_block_vertical: false,
    drag_min_distance: 0
});
var rect = document.getElementById('rect');
var posX=0, posY=0,
    scale=1, last_scale,
    rotation= 1, last_rotation;
hammertime.on('touch drag transform', function(ev) {
    switch(ev.type) {
        case 'touch':
            last_scale = scale;
            last_rotation = rotation;
            break;
        case 'drag':
            posX = ev.gesture.deltaX;
            posY = ev.gesture.deltaY;
            break;
        case 'transform':
            rotation = last_rotation + ev.gesture.rotation;
            scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10));
            break;
    }
    // transform!
    var transform =
            //"translate3d("+posX+"px,"+posY+"px, 0) " +
            "scale3d("+scale+","+scale+", 0) ";
    rect.style.transform = transform;
    rect.style.oTransform = transform;
    rect.style.msTransform = transform;
    rect.style.mozTransform = transform;
    rect.style.webkitTransform = transform;
});

它工作得很好，但是我无法滚动图像。取消注释transform3d后，它可以工作，但是在拖动时图像会丢失位置。我不能使用jQuery。

0