为实现跨平台开发
使用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);
