We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
drag和pinch同时使用在一个元素上时,transform的值会覆盖之前的值,无法兼容。比如先位移translate3d(100px, 100px, 0),然后在这个基础上使用缩放scale(0.5),则直接会将之前的translate覆盖,直接变回没有位移过的位置,在这个位置上缩小。如果是先缩放scale(0.5),然后拖拽translate(100px, 100px, 0), 此时该元素的大小会变成未缩放状态,产生位移。
这个有没有什么好办法解决呢?
The text was updated successfully, but these errors were encountered:
是否可以共存我不是很确定,但是我之前使用的是矩阵来计算着两者的转换效果。但是我发现,在安卓下会很卡、请问有什么办法解决吗。我的父层是fixed的,目标元素是absolute 以下是我的代码,希望可以帮到你。如果有错的话,希望能帮忙更正。谢谢 // 双指缩放开始 touch.on(goodsImg, 'touchstart', function(ev){ ev.preventDefault(); }); // 双指缩放结束 var initialScale = 1; var currentScale,target=0; touch.on(goodsImg, 'pinch', function(ev){ currentScale = ev.scale - 1; currentScale = initialScale + currentScale; currentScale = currentScale > 2 ? 2 : currentScale; currentScale = currentScale < 1 ? 1 : currentScale; // 放大 $(this).css('transform' , "matrix("+currentScale+",0,0,"+currentScale+",0,0"+")"); }); touch.on(goodsImg, 'pinchend', function(ev){ initialScale = currentScale; //测试输出initialScale,当initialScale>1的时候。执行拖动,否则不拖动(取消绑定拖拖动事件) return initialScale; });
// 拖动 // 绑定拖动事件 touch.on(goodsImg, 'pinch', function(ev){ ev.preventDefault(); }); var dragx,dragy; touch.on(goodsImg,"drag", function(ev) { console.log("绑定拖动事件"); dragx = dragx || 0; dragy = dragy || 0; var offx = dragx+ev.x; var offy = dragy+ev.y; $(this).css('transform',"matrix("+initialScale+",0,0,"+initialScale+","+offx+","+offy+")"); }); touch.on(goodsImg,"dragend",function(ev){ console.log("拖动完毕"); dragx+=ev.x; dragy+=ev.y; });
Sorry, something went wrong.
感谢答主,@VincentZongBao 今天试了你的代码,发现在放大缩小那块有点问题,所以把 $(this).css('transform' , "matrix("+currentScale+",0,0,"+currentScale+",0,0"+")"); 替换为 $(this).css('transform' , "matrix("+currentScale+",0,0,"+currentScale+","+dragx+","+dragy+"); 这样似乎可行,在iphone上测试可行
No branches or pull requests
drag和pinch同时使用在一个元素上时,transform的值会覆盖之前的值,无法兼容。比如先位移translate3d(100px, 100px, 0),然后在这个基础上使用缩放scale(0.5),则直接会将之前的translate覆盖,直接变回没有位移过的位置,在这个位置上缩小。如果是先缩放scale(0.5),然后拖拽translate(100px, 100px, 0), 此时该元素的大小会变成未缩放状态,产生位移。
这个有没有什么好办法解决呢?
The text was updated successfully, but these errors were encountered: