正文

Android手势滑动实现两点触摸缩放图片

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0717

这篇文章主要介绍了Android手势滑动实现两点触摸缩放图片的相关资料,需要的朋友可以参考下

学习安卓手势滑动，多点触摸放大缩小图片，分享给大家供大家参考，具体代码如下
1.布局文件如下main.xml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical" >
 
 <!-- 引用自定义控件 -->
 <com.ymw.zoomimage.ZoomImageView
  android:id="@+id/image"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" >
 </com.ymw.zoomimage.ZoomImageView>
 
</LinearLayout>

2.自定义缩放图片控件ZoomImageView.java代码：

?
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
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
package com.ymw.zoomimage;
 
import java.util.Observable;
import java.util.Observer;
 
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
 
public class ZoomImageView extends View implements Observer {
 
 /** Paint object used when drawing bitmap. */
 private final Paint mPaint = new Paint(Paint.FILTER_BITMAP_FLAG);
 
 /** Rectangle used (and re-used) for cropping source image. */
 private final Rect mRectSrc = new Rect();
 
 /** Rectangle used (and re-used) for specifying drawing area on canvas. */
 private final Rect mRectDst = new Rect();
 
 /** Object holding aspect quotient */
 private final AspectQuotient mAspectQuotient = new AspectQuotient();
 
 /** The bitmap that we're zooming in, and drawing on the screen. */
 private Bitmap mBitmap;
 
 /** State of the zoom. */
 private ZoomState mState;
 
 private BasicZoomControl mZoomControl;
 private BasicZoomListener mZoomListener;
 
 public ZoomImageView(Context context, AttributeSet attrs) {
  super(context, attrs);
 
  mZoomControl = new BasicZoomControl();
 
  mZoomListener = new BasicZoomListener();
  mZoomListener.setZoomControl(mZoomControl);
 
  setZoomState(mZoomControl.getZoomState());
 
  setOnTouchListener(mZoomListener);
 
  mZoomControl.setAspectQuotient(getAspectQuotient());
 }
 
 public void zoomImage(float f, float x, float y) {
  mZoomControl.zoom(f, x, y);
 }
 
 public void setImage(Bitmap bitmap) {
  mBitmap = bitmap;
 
  mAspectQuotient.updateAspectQuotient(getWidth(), getHeight(),
    mBitmap.getWidth(), mBitmap.getHeight());
  mAspectQuotient.notifyObservers();
 
  invalidate();
 }
 
 private void setZoomState(ZoomState state) {
  if (mState != null) {
   mState.deleteObserver(this);
  }
 
  mState = state;
  mState.addObserver(this);
 
  invalidate();
 }
 
 private AspectQuotient getAspectQuotient() {
  return mAspectQuotient;
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
  if (mBitmap != null && mState != null) {
 
   Log.d("ZoomImageView", "OnDraw");
 
   final float aspectQuotient = mAspectQuotient.get();
 
   final int viewWidth = getWidth();
   final int viewHeight = getHeight();
   final int bitmapWidth = mBitmap.getWidth();
   final int bitmapHeight = mBitmap.getHeight();
 
   Log.d("ZoomImageView", "viewWidth = " + viewWidth);
   Log.d("ZoomImageView", "viewHeight = " + viewHeight);
   Log.d("ZoomImageView", "bitmapWidth = " + bitmapWidth);
   Log.d("ZoomImageView", "bitmapHeight = " + bitmapHeight);
 
   final float panX = mState.getPanX();
   final float panY = mState.getPanY();
   final float zoomX = mState.getZoomX(aspectQuotient) * viewWidth
     / bitmapWidth;
   final float zoomY = mState.getZoomY(aspectQuotient) * viewHeight
     / bitmapHeight;
 
   // Setup source and destination rectangles
   mRectSrc.left = (int) (panX * bitmapWidth - viewWidth / (zoomX * 2));
   mRectSrc.top = (int) (panY * bitmapHeight - viewHeight
     / (zoomY * 2));
   mRectSrc.right = (int) (mRectSrc.left + viewWidth / zoomX);
   mRectSrc.bottom = (int) (mRectSrc.top + viewHeight / zoomY);
   // mRectDst.left = getLeft();
   mRectDst.left = 0;
   mRectDst.top = 0;
   // mRectDst.right = getRight();
   mRectDst.right = getWidth();
   mRectDst.bottom = getHeight();
 
   // Adjust source rectangle so that it fits within the source image.
   if (mRectSrc.left < 0) {
    mRectDst.left += -mRectSrc.left * zoomX;
    mRectSrc.left = 0;
   }
   if (mRectSrc.right > bitmapWidth) {
    mRectDst.right -= (mRectSrc.right - bitmapWidth) * zoomX;
    mRectSrc.right = bitmapWidth;
   }
   if (mRectSrc.top < 0) {
    mRectDst.top += -mRectSrc.top * zoomY;
    mRectSrc.top = 0;
   }
   if (mRectSrc.bottom > bitmapHeight) {
    mRectDst.bottom -= (mRectSrc.bottom - bitmapHeight) * zoomY;
    mRectSrc.bottom = bitmapHeight;
   }
 
   mRectDst.left = 0;
   mRectDst.top = 0;
   mRectDst.right = viewWidth;
   mRectDst.bottom = viewHeight;
 
   Log.d("ZoomImageView", "mRectSrc.top" + mRectSrc.top);
   Log.d("ZoomImageView", "mRectSrc.bottom" + mRectSrc.bottom);
   Log.d("ZoomImageView", "mRectSrc.left" + mRectSrc.left);
   Log.d("ZoomImageView", "mRectSrc.right" + mRectSrc.right);
 
   Log.d("ZoomImageView", "mRectDst.top" + mRectDst.top);
   Log.d("ZoomImageView", "mRectDst.bottom" + mRectDst.bottom);
   Log.d("ZoomImageView", "mRectDst.left" + mRectDst.left);
   Log.d("ZoomImageView", "mRectDst.right" + mRectDst.right);
 
   canvas.drawBitmap(mBitmap, mRectSrc, mRectDst, mPaint);
  }
 }
 
 @Override
 protected void onLayout(boolean changed, int left, int top, int right,
   int bottom) {
  super.onLayout(changed, left, top, right, bottom);
 
  mAspectQuotient.updateAspectQuotient(right - left, bottom - top,
    mBitmap.getWidth(), mBitmap.getHeight());
  mAspectQuotient.notifyObservers();
 }
 
 @Override
 public void update(Observable observable, Object data) {
  invalidate();
 }
 
 private class BasicZoomListener implements View.OnTouchListener {
 
  /** Zoom control to manipulate */
  private BasicZoomControl mZoomControl;
 
  private float mFirstX = -1;
  private float mFirstY = -1;
  private float mSecondX = -1;
  private float mSecondY = -1;
 
  private int mOldCounts = 0;
 
  /**
   * Sets the zoom control to manipulate
   *
   * @param control
   *   Zoom control
   */
  public void setZoomControl(BasicZoomControl control) {
   mZoomControl = control;
  }
 
  public boolean onTouch(View v, MotionEvent event) {
 
   switch (event.getAction()) {
   case MotionEvent.ACTION_DOWN:
    mOldCounts = 1;
    mFirstX = event.getX();
    mFirstY = event.getY();
    break;
   case MotionEvent.ACTION_MOVE: {
    float fFirstX = event.getX();
    float fFirstY = event.getY();
 
    int nCounts = event.getPointerCount();
 
    if (1 == nCounts) {
     mOldCounts = 1;
     float dx = (fFirstX - mFirstX) / v.getWidth();
     float dy = (fFirstY - mFirstY) / v.getHeight();
     mZoomControl.pan(-dx, -dy);
    } else if (1 == mOldCounts) {
     mSecondX = event.getX(event.getPointerId(nCounts - 1));
     mSecondY = event.getY(event.getPointerId(nCounts - 1));
     mOldCounts = nCounts;
    } else {
     float fSecondX = event
       .getX(event.getPointerId(nCounts - 1));
     float fSecondY = event
       .getY(event.getPointerId(nCounts - 1));
 
     double nLengthOld = getLength(mFirstX, mFirstY, mSecondX,
       mSecondY);
     double nLengthNow = getLength(fFirstX, fFirstY, fSecondX,
       fSecondY);
 
     float d = (float) ((nLengthNow - nLengthOld) / v.getWidth());
 
     mZoomControl.zoom((float) Math.pow(20, d),
       ((fFirstX + fSecondX) / 2 / v.getWidth()),
       ((fFirstY + fSecondY) / 2 / v.getHeight()));
 
     mSecondX = fSecondX;
     mSecondY = fSecondY;
    }
    mFirstX = fFirstX;
    mFirstY = fFirstY;
 
    break;
   }
 
   }
 
   return true;
  }
 
  private double getLength(float x1, float y1, float x2, float y2) {
   return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
  }
 }
 
 private class BasicZoomControl implements Observer {
 
  /** Minimum zoom level limit */
  private static final float MIN_ZOOM = 1;
 
  /** Maximum zoom level limit */
  private static final float MAX_ZOOM = 16;
 
  /** Zoom state under control */
  private final ZoomState mState = new ZoomState();
 
  /** Object holding aspect quotient of view and content */
  private AspectQuotient mAspectQuotient;
 
  /**
   * Set reference object holding aspect quotient
   *
   * @param aspectQuotient
   *   Object holding aspect quotient
   */
  public void setAspectQuotient(AspectQuotient aspectQuotient) {
   if (mAspectQuotient != null) {
    mAspectQuotient.deleteObserver(this);
   }
 
   mAspectQuotient = aspectQuotient;
   mAspectQuotient.addObserver(this);
  }
 
  /**
   * Get zoom state being controlled
   *
   * @return The zoom state
   */
  public ZoomState getZoomState() {
   return mState;
  }
 
  /**
   * Zoom
   *
   * @param f
   *   Factor of zoom to apply
   * @param x
   *   X-coordinate of invariant position
   * @param y
   *   Y-coordinate of invariant position
   */
  public void zoom(float f, float x, float y) {
 
   // Log.d("Zoom", "zoom f = " + f);
 
   final float aspectQuotient = mAspectQuotient.get();
 
   final float prevZoomX = mState.getZoomX(aspectQuotient);
   final float prevZoomY = mState.getZoomY(aspectQuotient);
 
   mState.setZoom(mState.getZoom() * f);
   limitZoom();
 
   final float newZoomX = mState.getZoomX(aspectQuotient);
   final float newZoomY = mState.getZoomY(aspectQuotient);
 
   // Pan to keep x and y coordinate invariant
   mState.setPanX(mState.getPanX() + (x - .5f)
     * (1f / prevZoomX - 1f / newZoomX));
   mState.setPanY(mState.getPanY() + (y - .5f)
     * (1f / prevZoomY - 1f / newZoomY));
 
   limitPan();
 
   mState.notifyObservers();
  }
 
  /**
   * Pan
   *
   * @param dx
   *   Amount to pan in x-dimension
   * @param dy
   *   Amount to pan in y-dimension
   */
  public void pan(float dx, float dy) {
   final float aspectQuotient = mAspectQuotient.get();
 
   mState.setPanX(mState.getPanX() + dx
     / mState.getZoomX(aspectQuotient));
   mState.setPanY(mState.getPanY() + dy
     / mState.getZoomY(aspectQuotient));
 
   limitPan();
 
   mState.notifyObservers();
  }
 
  /**
   * Help function to figure out max delta of pan from center position.
   *
   * @param zoom
   *   Zoom value
   * @return Max delta of pan
   */
  private float getMaxPanDelta(float zoom) {
   return Math.max(0f, .5f * ((zoom - 1) / zoom));
  }
 
  /**
   * Force zoom to stay within limits
   */
  private void limitZoom() {
   if (mState.getZoom() < MIN_ZOOM) {
    mState.setZoom(MIN_ZOOM);
   } else if (mState.getZoom() > MAX_ZOOM) {
    mState.setZoom(MAX_ZOOM);
   }
  }
 
  /**
   * Force pan to stay within limits
   */
  private void limitPan() {
   final float aspectQuotient = mAspectQuotient.get();
 
   final float zoomX = mState.getZoomX(aspectQuotient);
   final float zoomY = mState.getZoomY(aspectQuotient);
 
   final float panMinX = .5f - getMaxPanDelta(zoomX);
   final float panMaxX = .5f + getMaxPanDelta(zoomX);
   final float panMinY = .5f - getMaxPanDelta(zoomY);
   final float panMaxY = .5f + getMaxPanDelta(zoomY);
 
   if (mState.getPanX() < panMinX) {
    mState.setPanX(panMinX);
   }
   if (mState.getPanX() > panMaxX) {
    mState.setPanX(panMaxX);
   }
   if (mState.getPanY() < panMinY) {
    mState.setPanY(panMinY);
   }
   if (mState.getPanY() > panMaxY) {
    mState.setPanY(panMaxY);
   }
  }
 
  // Observable interface implementation
 
  public void update(Observable observable, Object data) {
   limitZoom();
   limitPan();
  }
 }
 
 private class AspectQuotient extends Observable {
 
  /**
   * Aspect quotient
   */
  private float mAspectQuotient;
 
  // Public methods
 
  /**
   * Gets aspect quotient
   *
   * @return The aspect quotient
   */
  public float get() {
   return mAspectQuotient;
  }
 
  /**
   * Updates and recalculates aspect quotient based on supplied view and
   * content dimensions.
   *
   * @param viewWidth
   *   Width of view
   * @param viewHeight
   *   Height of view
   * @param contentWidth
   *   Width of content
   * @param contentHeight
   *   Height of content
   */
  public void updateAspectQuotient(float viewWidth, float viewHeight,
    float contentWidth, float contentHeight) {
   final float aspectQuotient = (contentWidth / contentHeight)
     / (viewWidth / viewHeight);
 
   if (aspectQuotient != mAspectQuotient) {
    mAspectQuotient = aspectQuotient;
    setChanged();
   }
  }
 }
 
 private class ZoomState extends Observable {
  /**
   * Zoom level A value of 1.0 means the content fits the view.
   */
  private float mZoom;
 
  /**
   * Pan position x-coordinate X-coordinate of zoom window center
   * position, relative to the width of the content.
   */
  private float mPanX;
 
  /**
   * Pan position y-coordinate Y-coordinate of zoom window center
   * position, relative to the height of the content.
   */
  private float mPanY;
 
  // Public methods
 
  /**
   * Get current x-pan
   *
   * @return current x-pan
   */
  public float getPanX() {
   return mPanX;
  }
 
  /**
   * Get current y-pan
   *
   * @return Current y-pan
   */
  public float getPanY() {
   return mPanY;
  }
 
  /**
   * Get current zoom value
   *
   * @return Current zoom value
   */
  public float getZoom() {
   return mZoom;
  }
 
  /**
   * Help function for calculating current zoom value in x-dimension
   *
   * @param aspectQuotient
   *   (Aspect ratio content) / (Aspect ratio view)
   * @return Current zoom value in x-dimension
   */
  public float getZoomX(float aspectQuotient) {
   return Math.min(mZoom, mZoom * aspectQuotient);
  }
 
  /**
   * Help function for calculating current zoom value in y-dimension
   *
   * @param aspectQuotient
   *   (Aspect ratio content) / (Aspect ratio view)
   * @return Current zoom value in y-dimension
   */
  public float getZoomY(float aspectQuotient) {
   return Math.min(mZoom, mZoom / aspectQuotient);
  }
 
  /**
   * Set pan-x
   *
   * @param panX
   *   Pan-x value to set
   */
  public void setPanX(float panX) {
   if (panX != mPanX) {
    mPanX = panX;
    setChanged();
   }
  }
 
  /**
   * Set pan-y
   *
   * @param panY
   *   Pan-y value to set
   */
  public void setPanY(float panY) {
   if (panY != mPanY) {
    mPanY = panY;
    setChanged();
   }
  }
 
  /**
   * Set zoom
   *
   * @param zoom
   *   Zoom value to set
   */
  public void setZoom(float zoom) {
   if (zoom != mZoom) {
    mZoom = zoom;
    setChanged();
   }
  }
 }
}

3.工程主文件MainActivity.java代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package com.ymw.zoomimage;
 
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
 
public class MainActivity extends Activity {
 
 private ZoomImageView zoomImg;
 
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  zoomImg = (ZoomImageView) findViewById(R.id.image);
  Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(),
    R.drawable.a);
  zoomImg.setImage(bitmap);
 
 }
}

以上就是Android多点触摸放大缩小图片的示例代码，希望对大家的学习有所帮助。