為實作跨平台開發
使用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
![Java小結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)