Hybrid开发 Sencha pinch事件的监听实现图片的缩放效能
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