gpt4 book ai didi

javascript - Hammer JS 平移不移动图像

转载 作者:行者123 更新时间:2023-11-30 00:10:08 26 4
gpt4 key购买 nike

我想出了以下脚本(基于此处和网络上的答案)来捏/缩放和移动缩放图像。它会放大/缩小但不会移动调整大小的图像。 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com