通常我们遇到的图片缩放需求，都是图片基于屏幕自适应后，进行缩放和移动，且图片最小只能是自适应的大小。最近遇到一个需求，要求图片只能在屏幕内缩放和移动，不能超出屏幕。
一、需求
在屏幕中加载一张图片，图片可以手势缩放移动。但是图片最大只能缩放到屏幕大小，也只允许在屏幕内移动。可以从系统中读取图片（通过绝对路径），也可以从资源文件中读取图片。
二、自定义ZoomImageView
屏幕内手势缩放图片与普通的图片缩放相比，比较麻烦的是，需要计算图片的精确位置。不同于普通缩放的图片充满屏幕，屏内缩放的图片只占据屏幕的一部分，我们需要判断手指是否点在图片内，才能进行各种操作。
|
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
|
/** * 判断手指是否点在图片内(单指) */ private void isClickInImage(){ if (translationX <= mFirstX && mFirstX <= (translationX + currentW) && translationY <= mFirstY && mFirstY <= (translationY + currentH)){ isClickInImage = true; }else { isClickInImage = false; } } /** * 判断手指是否点在图片内(双指) * 只要有一只手指在图片内就为true * @param event */ private void isClickInImage(MotionEvent event){ if (translationX <= event.getX(0) && event.getX(0) <= (translationX + currentW) && translationY <= event.getY(0) && event.getY(0) <= (translationY + currentH)){ isClickInImage = true; }else if (translationX <= event.getX(1) && event.getX(1) <= (translationX + currentW) && translationY <= event.getY(1) && event.getY(1) <= (translationY + currentH)){ isClickInImage = true; }else { isClickInImage = false; } } |
其他的各种操作，之于缩放，移动，边界检查等，和普通的图片缩放没有太多区别。完整代码如下：
|
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
|
package com.uni.myapplication; import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Matrix;import android.graphics.Paint;import android.support.annotation.Nullable;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View; import java.io.File; /** * Created by newcboy on 2018/3/9. */ public class ZoomImageView extends View { public static final int IMAGE_MAX_SIZE = 1000;//加载图片允许的最大size，单位kb private float minimal = 100.0f; private float screenW;//屏幕宽度 private float screenH;//屏幕高度 //单指按下的坐标 private float mFirstX = 0.0f; private float mFirstY = 0.0f; //单指离开的坐标 private float lastMoveX =-1f; private float lastMoveY =-1f; //两指的中点坐标 private float centPointX; private float centPointY; //图片的绘制坐标 private float translationX = 0.0f; private float translationY = 0.0f; //图片的原始宽高 private float primaryW; private float primaryH; //图片当前宽高 private float currentW; private float currentH; private float scale = 1.0f; private float maxScale, minScale; private Bitmap bitmap; private Matrix matrix; private int mLocker = 0; private float fingerDistance = 0.0f; private boolean isLoaded = false; private boolean isClickInImage = false; public ZoomImageView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); } /** * 从资源文件中读取图片 * @param context * @param imageId */ public void setResourceBitmap(Context context, int imageId){ bitmap = BitmapFactory.decodeResource(context.getResources(), imageId); isLoaded = true; primaryW = bitmap.getWidth(); primaryH = bitmap.getHeight(); matrix = new Matrix(); } /** * 根据路径添加图片 * @param path * @param scale */ public void setImagePathBitmap(String path, float scale){ this.scale = scale; setImageBitmap(path); } private void setImageBitmap(String path){ File file = new File(path); if (file.exists()){ isLoaded = true; bitmap = ImageLoadUtils.getImageLoadBitmap(path, IMAGE_MAX_SIZE); primaryW = bitmap.getWidth(); primaryH = bitmap.getHeight(); matrix = new Matrix(); }else { isLoaded = false; } } @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); if (changed){ screenW = getWidth(); screenH = getHeight(); translationX = (screenW - bitmap.getWidth() * scale)/ 2; translationY = (screenH - bitmap.getHeight() * scale) / 2; setMaxMinScale(); } } /** * */ private void setMaxMinScale(){ float xScale, yScale; xScale = minimal / primaryW; yScale = minimal / primaryH; minScale = xScale > yScale ? xScale : yScale; xScale = primaryW / screenW; yScale = primaryH / screenH; if (xScale > 1 || yScale > 1 ) { if (xScale > yScale) { maxScale = 1/xScale; }else { maxScale = 1/yScale; } }else { if (xScale > yScale) { maxScale = 1/xScale; }else { maxScale = 1/yScale; } } if (isScaleError()){ restoreAction(); } } @Override public boolean onTouchEvent(MotionEvent event) { if (!isLoaded){ return true; } switch (event.getActionMasked()){ case MotionEvent.ACTION_DOWN: mFirstX = event.getX(); mFirstY = event.getY(); isClickInImage(); break; case MotionEvent.ACTION_POINTER_DOWN: fingerDistance = getFingerDistance(event); isClickInImage(event); break; case MotionEvent.ACTION_MOVE: float fingerNum = event.getPointerCount(); if (fingerNum == 1 && mLocker == 0 && isClickInImage){ movingAction(event); }else if (fingerNum == 2 && isClickInImage){ zoomAction(event); } break; case MotionEvent.ACTION_POINTER_UP: mLocker = 1; if (isScaleError()){ translationX = (event.getX(1) + event.getX(0)) / 2; translationY = (event.getY(1) + event.getY(0)) / 2; } break; case MotionEvent.ACTION_UP: lastMoveX = -1; lastMoveY = -1; mLocker = 0; if (isScaleError()){ restoreAction(); } break; } return true; } /** * 移动操作 * @param event */ private void movingAction(MotionEvent event){ float moveX = event.getX(); float moveY = event.getY(); if (lastMoveX == -1 || lastMoveY == -1) { lastMoveX = moveX; lastMoveY = moveY; } float moveDistanceX = moveX - lastMoveX; float moveDistanceY = moveY - lastMoveY; translationX = translationX + moveDistanceX; translationY = translationY + moveDistanceY; lastMoveX = moveX; lastMoveY = moveY; invalidate(); } /** * 缩放操作 * @param event */ private void zoomAction(MotionEvent event){ midPoint(event); float currentDistance = getFingerDistance(event); if (Math.abs(currentDistance - fingerDistance) > 1f) { float moveScale = currentDistance / fingerDistance; scale = scale * moveScale; translationX = translationX * moveScale + centPointX * (1-moveScale); translationY = translationY * moveScale + centPointY * (1-moveScale); fingerDistance = currentDistance; invalidate(); } } /** * 图片恢复到指定大小 */ private void restoreAction(){ if (scale < minScale){ scale = minScale; }else if (scale > maxScale){ scale = maxScale; } translationX = translationX - bitmap.getWidth()*scale / 2; translationY = translationY - bitmap.getHeight()*scale / 2; invalidate(); } /** * 判断手指是否点在图片内(单指) */ private void isClickInImage(){ if (translationX <= mFirstX && mFirstX <= (translationX + currentW) && translationY <= mFirstY && mFirstY <= (translationY + currentH)){ isClickInImage = true; }else { isClickInImage = false; } } /** * 判断手指是否点在图片内(双指) * 只要有一只手指在图片内就为true * @param event */ private void isClickInImage(MotionEvent event){ if (translationX <= event.getX(0) && event.getX(0) <= (translationX + currentW) && translationY <= event.getY(0) && event.getY(0) <= (translationY + currentH)){ isClickInImage = true; }else if (translationX <= event.getX(1) && event.getX(1) <= (translationX + currentW) && translationY <= event.getY(1) && event.getY(1) <= (translationY + currentH)){ isClickInImage = true; }else { isClickInImage = false; } } /** * 获取两指间的距离 * @param event * @return */ private float getFingerDistance(MotionEvent event){ float x = event.getX(1) - event.getX(0); float y = event.getY(1) - event.getY(0); return (float) Math.sqrt(x * x + y * y); } /** * 判断图片大小是否符合要求 * @return */ private boolean isScaleError(){ if (scale > maxScale || scale < minScale){ return true; } return false; } /** * 获取两指间的中点坐标 * @param event */ private void midPoint(MotionEvent event){ centPointX = (event.getX(1) + event.getX(0))/2; centPointY = (event.getY(1) + event.getY(0))/2; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (isLoaded){ imageZoomView(canvas); } } private void imageZoomView(Canvas canvas){ currentW = primaryW * scale; currentH = primaryH * scale; matrix.reset(); matrix.postScale(scale, scale);//x轴y轴缩放 peripheryJudge(); matrix.postTranslate(translationX, translationY);//中点坐标移动 canvas.drawBitmap(bitmap, matrix, null); } /** * 图片边界检查 * (只在屏幕内) */ private void peripheryJudge(){ if (translationX < 0){ translationX = 0; } if (translationY < 0){ translationY = 0; } if ((translationX + currentW) > screenW){ translationX = screenW - currentW; } if ((translationY + currentH) > screenH){ translationY = screenH - currentH; } } } |
实际上，用Bitmap绘制图片时，可以通过Paint设置图片透明度。
|
1
2
3
|
Paint paint = new Paint();paint.setStyle( Paint.Style.STROKE);paint.setAlpha(150); |
在setAlpha()中传入一个0~255的整数。数字越大，透明度越低。
然后在绘制图片时
|
1
|
canvas.drawBitmap(bitmap, matrix, paint); |
三、ImageLoadUtils图片加载类
这个类是对传入的图片进行压缩处理的类，在应用从系统中读取图片时用到。在写这个类时，发现一些和网上说法不一样的地方。
options.inSampleSize这个属性，网上的说法是必须是2的幂次方，但实际上，我的验证结果是所有的整数都可以。
这里采用的压缩方法是，获取系统剩余内存和图片大小，然后将图片压缩到合适的大小。
|
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
|
package com.uni.myapplication; import android.app.ActivityManager;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.BitmapFactory.Options;import android.net.Uri; import java.io.File;import java.io.FileInputStream; /** * 图片加载工具类 * * Created by newcboy on 2018/1/25. */ public class ImageLoadUtils { /** * 原图加载，根据传入的指定图片大小。 * @param imagePath * @param maxSize * @return */ public static Bitmap getImageLoadBitmap(String imagePath, int maxSize){ int fileSize = 1; Bitmap bitmap = null; int simpleSize = 1; File file = new File(imagePath); if (file.exists()) { Uri imageUri = Uri.parse(imagePath); try { fileSize = (int) (getFileSize(file) / 1024); } catch (Exception e) { e.printStackTrace(); } Options options = new Options(); if (fileSize > maxSize){ for (simpleSize = 2; fileSize>= maxSize; simpleSize++){ fileSize = fileSize / simpleSize; } } options.inSampleSize = simpleSize; bitmap = BitmapFactory.decodeFile(imageUri.getPath(), options); } return bitmap; } /** * 获取指定文件的大小 * @param file * @return * @throws Exception */ public static long getFileSize(File file) throws Exception{ if(file == null) { return 0; } long size = 0; if(file.exists()) { FileInputStream mInputStream = new FileInputStream(file); size = mInputStream.available(); } return size; } /** * 获取手机运行内存 * @param context * @return */ public static long getTotalMemorySize(Context context){ long size = 0; ActivityManager activityManager = (ActivityManager) context.getSystemService(context.ACTIVITY_SERVICE); ActivityManager.MemoryInfo outInfo = new ActivityManager.MemoryInfo();//outInfo对象里面包含了内存相关的信息 activityManager.getMemoryInfo(outInfo);//把内存相关的信息传递到outInfo里面C++思想 //size = outInfo.totalMem; //总内存 size = outInfo.availMem; //剩余内存 return (size/1024/1024); } } |
四、调用
使用方法和通常的控件差不多，只是多了一个设置图片的方法。
1.在布局文件中添加布局。
|
1
2
3
4
|
<com.uni.myapplication.ZoomImageView android:id="@+id/zoom_image_view" android:layout_width="wrap_content" android:layout_height="wrap_content" /> |
2.在代码中调用
|
1
2
3
|
zoomImageView = (ZoomImageView) findViewById(R.id.zoom_image_view);zoomImageView.setImagePathBitmap(MainActivity.this, imagePath, 1.0f);zoomImageView.setResourceBitmap(MainActivity.this, R.mipmap.ic_launcher); |
其中setImagePathBitmap()是从系统中读取图片加载的方法，setResourceBitmap()是从资源文件中读取图片的方法。
当然，从系统读取图片需要添加读写权限，这个不能忘了。而且6.0以上的系统需要动态获取权限。动态获取权限的方法这里就不介绍了，网上有很详细的说明。
五、最终效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/newcboy/article/details/79523316
