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

为实现跨平台开发

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

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

注意：ImgPinch是我项目的名字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
/** 
 * 可以图片缩放的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);  
    },  
});

用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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);