javascript - Hammer JS 平移不移动图像

标签 javascript jquery hammer.js

我想出了以下脚本(基于此处和网络上的答案)来捏/缩放和移动缩放图像。它会放大/缩小但不会移动调整大小的图像。 document.write 脚本永远不会执行,即使代码看起来非常好。我是否遗漏了一些明显的东西?

$(image).hammer().on('pinch', function(event) {
    var photo = $(this);

    newWidth = photo.width() * event.gesture.scale;
    newHeight = photo.height() * event.gesture.scale;

    // Convert from screen to image coordinates
    var x;
    var y;
    x -= offset.left + newX;
    y -= offset.top + newY;                                     

    newX += -x * (newWidth - width) / newWidth;
    newY += -y * (newHeight - height) / newHeight;

    photo.css('transform', "scale3d("+event.gesture.scale+", "+event.gesture.scale+", 1)");      
    wrap.css('transform', "translate3d("+newX+"px, "+newY+"px, 0)");

    width = newWidth;
    height = newHeight;
// Reset pinch
}).on('pinchout',function(event){
    photo.css('transform', "translate3d(0,0,0)");
// Start of moving zooming
}).on('pan panstart', function(event){
    photo.css('transform', "translate3d("+event.gesture.deltaX+"px, "+event.gesture.deltaY+"px, 0) ");                  
    document.write('ending panning 1');
// End of moving
}).on('pan panend', function(event){
    photo.css('transform', "translate3d(0,0,0)");
    panX += event.gesture.deltaX/zoom;
    panY += event.gesture.deltaY/zoom;
    wrap.css({left: panX,top: panY});
    document.write('ending panning 2');
})                          

最佳答案

var hammer = new Hammer(/** DOM 元素 **/); hammer.on(/** 你的脚本 **/);

编辑:Ya 错误地实例化了 Hammer.js。请注意,我编写了 DOM 元素,它似乎不太适合 JQuery 引用的元素。

关于javascript - Hammer JS 平移不移动图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36842965/

相关文章:

Javascript - 密码表单未提交

javascript - 从 url 字符串中删除所有空值

javascript - 将单选按钮转换为星级

jquery - $(document).ajaxComplete 不会在内容脚本内部触发

javascript - 如何在 Hammer.js 中启用鼠标右键单击(和中键单击)

javascript - 使用 Hammer.js 在 PDF.js 上缩放

javascript - 每5秒随机发出一声声音

java - 如何在我的 Jersey REST Web 服务中使用 google OAuth2

javascript - Hammerjs 无法在 IOS 中的 Chrome 或 Safari 上运行(使用 Vuejs 制作)

javascript - 使用 webworkers 和 canvas 合并 png 图像