关于touch无法拖拽放大后图片的问题

xzf_java133

前两天客户提了个问题：要求图片可以放大进行查看于是寻找解决方案，结果找到了touch插件，参考mainActivity.w文件（路径：UI2\system\components\justep\touch\demo\touchjs）做了一个例子，但是发现当图片进行放大或者缩小后一旦拖拽，就变成了原图大小，于是寻找把拖拽方法绑定到放大缩小后的图片上，但是未果。那是因为图片缩放的时候是重新加载的一个组件来进行的，拖拽的监听是加在原图上，所以就会导致这个现象。
此时看到以前web端等比缩放图片的功能，于是就把图片缩放的功能拿过来放在pinch监听中，这样就变成了touch.js插件只是用来捕获touch事件，捕获到之后要做什么操作由我们自己来决定。这样就可以进行放大缩小后图片的拖拽，进而可以看到放大后的全图。以下是代码：
Model.prototype.pinch = function(event){
                var me = this;
                var id = this.getIDByXID('bigImage');
               
                touch.on('#' + id, 'touchstart', function(ev){
                        ev.preventDefault();
                });
                var initialScale = 1;
                var currentScale;
                touch.on('#' + id, 'pinch', function(ev){
                        // 先调用拖动的方法,防止当图片放大后原图依旧还在
                        this.style.webkitTransform = "translate3d(0,0,0)";
                        ev.hasStopedPropagation = true;
                        currentScale = ev.scale - 1;
                        currentScale = initialScale + currentScale;
                        currentScale = currentScale > 4 ? 4 : currentScale;//最大倍数2
                        currentScale = currentScale < 0.5 ? 0.5 : currentScale;//最小倍数0.5
                        // 此方法为以屏幕中心点为放大缩小中心点
//                        this.style.webkitTransform = 'scale(' + currentScale + ')';
                        // 改造方法：将图片进行等比放大和缩小
                        var bigImage = $("#" + id);
                        var oWidth = bigImage.width(); //取得图片的实际宽度
                        var oHeight = bigImage.height(); //取得图片的实际高度
                        var size = 0;
                        if(currentScale > 1){// 放大:每次固定放大25个像素，同理缩小时固定缩小25个像素
                                size = 25;
                        }else{// 缩小
                                size = -25;
                        }
                        // 当放大缩小到一定比例，无法进行缩放
                        if(!((oWidth + size) > 1500 || (oWidth + size) < 200)){
                                bigImage.width(oWidth + size);
                                bigImage.height(oHeight + size / oWidth * oHeight);
                        }
                });
               
                touch.on('#' + id, 'pinchend', function(ev){
                        initialScale = currentScale;
                });
               
                var dx = 0;
                var dy = 0;
                touch.on('#' + id, 'drag', function(ev){
                        dx = dx || 0;
                        dy = dy || 0;
                        var offx = dx + ev.x + "px";
                        var offy = dy + ev.y + "px";
                        // 此处拖拽是以原图进行拖拽，应调整为放大缩小后的图片进行拖拽
                        this.style.webkitTransform = "translate3d(" + offx + "," + offy + ",0)";
                });
               
                touch.on('#' + id, 'dragend', function(ev){
                        dx += ev.x;
                        dy += ev.y;
                });
        };

xzf_java133

经我测试，此方法有一个问题：有时候图片会消失，当图片进行缩放之后进行拖动的时候，拖到屏幕边缘的时候再次进行缩放，有一定的几率导致图片消失。虽然未调试，但我感觉推测应该是图片被屏幕边缘遮挡住了，因此我想了一种方法来还原图片。
var bigImage = $("#" + this.getIDByXID('bigImage'));
                document.getElementById(this.getIDByXID("bigImage")).style.webkitTransform = "translate3d(0,0,0)"
                bigImage.width(this.width);
               
                bigImage.height(this.height);
图片重新拖拽并设置大小，这样图片就恢复到初始化状态。
至于导致图片消失的问题，目前仍在寻找问题根源