Hybrid开发 Sencha pinch事件的监听实现图片的缩放功能

为实现跨平台开发

使用Sencha写了一个程序，监听img的pinch事件;

封装了一个ImageView，实现了图片的缩放功能

注意：ImgPinch是我项目的名字

/** * 可以图片缩放的ImageView */Ext.define('ImgPinch.view.ImageView', {extend : 'Ext.Panel',xtype : 'imageView',config : {style:"background:black",src : null,items : [{xtype : "img",id : "_show_image",width : "100%",height : "100%",margin : "0 0 0 0",cls : "showImageCls",},],},initialize: function() {var me = this;        me.callParent();        //设置图片的路径        var view = imageView = Ext.getCmp("_show_image");        imageView.setSrc(me.getSrc());        //记录双指触屏的位置touch0(x0, y0), touch1(x1, y1), 中心点(centerX0, centerY0)==============var x0, y0, x1, y1, touch0, touch1, centerX0, centerY0;x0 = y0 = x1 = y1 = centerX0 = centerY0 = -1;//新获取的双指触屏的位置touch00(x00, y00), touch11(x11, y11), 中心点(centerX1, centerY1)===================var x00, y00, x11, y11, touch00, touch11, centerX1, centerY1;//ImageView可视宽高===================================================var viewVisionWidth, viewVisionHeight; viewVisionWidth = me.element.dom.clientWidth;viewVisionHeight = me.element.dom.clientHeight;//ImageView的宽高===================================================var viewWidth, viewHeight;viewWidth = imageView.element.dom.clientWidth;viewHeight = imageView.element.dom.clientHeight;//ImageView的上边距和左边距===================================================var top, left, topMin, leftMin, topMax, leftMax;topMin = viewVisionHeight - viewHeight;leftMin = viewVisionWidth - viewWidth;topMax = leftMax = 0;view.element.on('pinchstart', function(event, node, options, eOpts) {touch0 = event.touches[0];x0 = touch0.pageX;y0 = touch0.pageY;touch1 = event.touches[1];x1 = touch1.pageX;y1 = touch1.pageY;//两个触摸点的中间点初始化centerX0 = (x0 + x1) / 2;centerY0 = (y0 + y1) / 2;}, view);view.element.on('pinch', function(event, node, options, eOpts) {touch00 = event.touches[0];x00 = touch00.pageX;y00 = touch00.pageY;touch11 = event.touches[1];x11 = touch11.pageX;y11 = touch11.pageY;if(x0 == -1 || y0 == -1) {return;}//两个触摸点的差值var minusX = Math.abs(x11-x00) - Math.abs(x1-x0);var minusY = Math.abs(y11-y00) - Math.abs(y1-y0);//两个触摸点的中间点初始化centerX1 = (x00 + x11) / 2;centerY1 = (y00 + y11) / 2;var oldWidth = view.getWidth();var oldHeight = view.getHeight();console.log("pinch 进行缩放oldWidth is " + oldWidth + ", oldHeight is " + oldHeight + "");var addWidth = parseInt(oldWidth.split("%")[0])+minusX;var addHeight = parseInt(oldHeight.split("%")[0])+minusY;console.log("pinch 进行缩放addWidth is " + addWidth + "%, addHeight is " + addHeight + "%");//缩放比值var zoomScaling = addWidth;var minusZoom = minusX;if(Math.abs(minusX) < Math.abs(minusY) && addHeight >= 100 && addHeight < 800) {//放大取大值，缩小取值，绝对值大取绝对值大的zoomScaling = addHeight;minusZoom = minusY;}//控制缩放范围在0%~500%之间if(zoomScaling >= 100 && zoomScaling < 800) {view.setWidth(zoomScaling + "%");view.setHeight(zoomScaling + "%");//保证图片一致处于中央位置var marginArr = view.getMargin().split(" ");top = - viewVisionHeight * minusZoom / 200 + parseInt(marginArr[0]);left = - viewVisionWidth * minusZoom / 200 + parseInt(marginArr[3]);//两指中心点有改变，修正值if(centerX0 != -1 && centerY0 != -1) {top += centerY1 - centerY0;left += centerX1 - centerX0;//重置数据centerX0 = centerX1;centerY0 = centerY1;}if(top < topMin) {top = topMin;} else if (top > topMax) {top = topMax;}if(left < leftMin) {left = leftMin;} else if (left > topMax) {left = leftMax;}view.setMargin(top + " 0 0 " + left);//重置一些数据viewWidth = imageView.element.dom.clientWidth;viewHeight = imageView.element.dom.clientHeight;console.log("wh ImageView：(" + viewWidth + ", " + viewHeight + ")");topMin = viewVisionHeight - viewHeight;leftMin = viewVisionWidth - viewWidth;x0 = x00;y0 = y00;x1 = x11;y1 = y11;}}, view);view.element.on('pinchend', function(event, node, options, eOpts) {x0 = y0 = x1 = y1 = -1;}, view);//移动ImageView记录touchstart时的位置(x2, y2)========================var x2, y2;x2 = y2 = -1;view.element.on('touchstart', function(event, node, options, eOpts) {viewVisionWidth = me.element.dom.clientWidth;viewVisionHeight = me.element.dom.clientHeight;x2 = event.pageX;y2 = event.pageY;}, view);view.element.on('touchmove', function(event, node, options, eOpts) {var touches = event.touches;switch(touches.length) {case 1:if(viewWidth > viewVisionWidth) {console.log("touch Move==>位置:(" + event.pageX + ", " + event.pageY + ")");var marginArr = view.getMargin().split(" ");console.log("touch Move==>Margin初始值:" + marginArr.toString());top = event.pageY - y2 + parseInt(marginArr[0]);left = event.pageX - x2 + parseInt(marginArr[3]);if(top < topMin) {top = topMin;} else if (top > topMax) {top = topMax;}if(left < leftMin) {left = leftMin;} else if (left > topMax) {left = leftMax;}console.log("touch Move==>Margin变换值:(" + top + " 0 0 " + left + ")");view.setMargin(top + " 0 0 " + left);}x2 = event.pageX;y2 = event.pageY;break;case 2:break;default:break;};}, view);view.element.on('touchend', function(event, node, options, eOpts) {x2 = y2 = -1;}, view);},});

用法

var view = Ext.create("Ext.Panel", {layout : "vbox",items : [{xtype : "button",height : 60,text : "点击直接网页浏览",handler : function() {//可打开手机中任意图片(也可为本程序中相对路径的图片)//uri = "file:///storage/sdcard0/DCIM/Camera/IMG_20140329_135428.jpg";//window.open(uri,"image/jpeg");window.open("images/test2.jpg","image/jpeg");//下面的方法只能打开本程序中的图片//window.location = "file:images/test1.jpg";}},{xtype : "imageView",flex : 1,src : "images/test1.jpg",},],});Ext.Viewport.setActiveItem(view);

代码下载：http://download.csdn.net/detail/kuailebeihun/7139525

版权所有，转载请注明出处！http://blog.csdn.net/kuailebeihun_/article/details/22828699