touch 疑问

260769741

使用touch 例子的代码 实现了缩放功能，但是拖拽的时候图片会恢复原来的尺寸  求怎么解决

1.         Model.prototype.pinch = function(event){//双指缩放
   
2.                 var id = this.getIDByXID('pinch');
   
3.                 var target = document.getElementById(id);
   
4.                 target.style.webkitTransition = 'all ease 0.05s';
   
5. //////////////////////////缩放               
   
6.                 touch.on('#' + id, 'touchstart', function(ev){//按下
   
7.                         ev.preventDefault();
   
8.                 });
   
9.                 var initialScale = 1;
   
10.                 var currentScale;
    
11.                 touch.on('#' + id, 'pinch', function(ev){//双指缩放
    
12.                         ev.hasStopedPropagation = true;
    
13.                         currentScale = ev.scale - 1;
    
14.                         currentScale = initialScale + currentScale;
    
15.                         currentScale = currentScale > 2 ? 2 : currentScale;//最大倍数2
    
16.                         currentScale = currentScale < 1 ? 1 : currentScale;//最小倍数1
    
17.                         this.style.webkitTransform = 'scale(' + currentScale + ')';                                
    
18.                 });
    
19.                
    
20.                 touch.on('#' + id, 'pinchend', function(ev){//缩放弹起
    
21.                         initialScale = currentScale;
    
22.                 });
    
23. ///////////////////////////拖拽               
    
24.                 var dx, dy;
    
25.                 touch.on('#' + id, 'drag', function(ev){//拖拽
    
26.                         dx = dx || 0;
    
27.                         dy = dy || 0;
    
28.                         var offx = dx + ev.x + "px";
    
29.                         var offy = dy + ev.y + "px";        
    
30.                         this.style.webkitTransform = "translate(" + offx + "," + offy + ")";
    
31.                 });
    
32.                
    
33.                 touch.on('#' + id, 'dragend', function(ev){//拖拽弹起
    
34.                         dx += ev.x;
    
35.                         dy += ev.y;
    
36.                 });
    
37.                
    
38.         };

复制代码

260769741

静静的等

jishuang

你好楼主，这个问题需要我在本地环境进行问题重现，所以会花费较长时间，请你耐心等待，我完成后会第一时间反馈结果，谢谢！

260769741

jishuang 发表于 2015-11-27 15:39
你好楼主，这个问题需要我在本地环境进行问题重现，所以会花费较长时间，请你耐心等待，我完成后会第一时间 ...

谢谢哈！反正我就在线等

260769741

jishuang 发表于 2015-11-27 15:39
你好楼主，这个问题需要我在本地环境进行问题重现，所以会花费较长时间，请你耐心等待，我完成后会第一时间 ...

我还在等待中

liangyongfei

你自己debugger调试看看，是什么时机尺寸发生了变化的！
在各个事件中进行调试查看~！

260769741

liangyongfei 发表于 2015-11-30 09:46
你自己debugger调试看看，是什么时机尺寸发生了变化的！
在各个事件中进行调试查看~！ ...

1. Model.prototype.pinch = function(event){//双指缩放
   
2. var id = this.getIDByXID('pinch');
   
3. var target = document.getElementById(id);
   
4. target.style.webkitTransition = 'all ease 0.05s';
   
5. //////////////////////////缩放
   
6. touch.on('#' + id, 'touchstart', function(ev){//按下
   
7. ev.preventDefault();
   
8. });
   
9. var initialScale = 1;
   
10. var currentScale;
    
11. touch.on('#' + id, 'pinch', function(ev){//双指缩放
    
12. ev.hasStopedPropagation = true;
    
13. currentScale = ev.scale - 1;
    
14. currentScale = initialScale + currentScale;
    
15. currentScale = currentScale > 2 ? 2 : currentScale;//最大倍数2
    
16. currentScale = currentScale < 1 ? 1 : currentScale;//最小倍数1
    
17. <FONT color=red>this.style.webkitTransform = 'scale(' + currentScale + ')';</FONT>
    
18. });
    
19. 
    
20. touch.on('#' + id, 'pinchend', function(ev){//缩放弹起
    
21. initialScale = currentScale;
    
22. });
    
23. ///////////////////////////拖拽
    
24. var dx, dy;
    
25. touch.on('#' + id, 'drag', function(ev){//拖拽
    
26. dx = dx || 0;
    
27. dy = dy || 0;
    
28. var offx = dx + ev.x + "px";
    
29. var offy = dy + ev.y + "px";
    
30. this.style.webkitTransform = "translate(" + offx + "," + offy + ")";
    
31. });
    
32. 
    
33. touch.on('#' + id, 'dragend', function(ev){//拖拽弹起
    
34. dx += ev.x;
    
35. dy += ev.y;
    
36. });
    
37. 
    
38. };

复制代码

百度查了下 H5代码 this.style.webkitTransform = 'scale'   
这代码是生成一个渲染图，缩放的并不是Image控件本身的尺寸.我初学者根本没办法解决这问题。

又想换另外一个 插件 pinchzoom.js  来实现缩放拖动。又不知道这个pinchzoom.js在X5里怎么调用
http://bbs.wex5.com/forum.php?mod=viewthread&tid=79277&highlight=pinchzoom.js
我想引用这个插件 不知道怎么调用。出错和上面那个X友一样。
你们能做个 pinchzoom.js  的demo 吗？

liangyongfei

260769741 发表于 2015-11-30 16:57
百度查了下 H5代码 this.style.webkitTransform = 'scale'   
这代码是生成一个渲染图，缩放的并不是Imag ...

本地正在调试解决！

260769741

liangyongfei 发表于 2015-11-30 17:30
本地正在调试解决！

谢谢！！！坐等

260769741