android對(duì)圖片進(jìn)行縮放

作者：某人_Valar
如需轉(zhuǎn)載請(qǐng)保留原文鏈接
近期都在處理android圖像方面的問(wèn)題，就記錄一下

相關(guān)文章

1 簡(jiǎn)介

先來(lái)一張效果圖


TIM圖片.gif

上圖中灰色的一塊是ImageView控件，ImageView中的圖片進(jìn)行左右上下移動(dòng)，以及雙指縮放。
對(duì)于android控件的縮放移動(dòng)，點(diǎn)這里----android控件的縮放，移動(dòng)

2 使用步驟
  • 布局layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:id="@+id/root"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="@color/mywhite"
              android:gravity="center_horizontal"
              android:fitsSystemWindows="true">

  
        <ImageView
            android:background="@color/light_gery"
            android:scaleType="matrix"
            android:src="@drawable/ic_sure"
            android:id="@+id/hair_iv"
            android:layout_marginTop="50dp"
            android:layout_width="300dp"
            android:layout_height="300dp"/>


</LinearLayout>
  • 先看關(guān)于手勢(shì)觸摸的判斷，需要判斷用戶(hù)是單指觸摸還是雙指，分別在OnTounch的監(jiān)聽(tīng)事件中判斷。
    注：先重寫(xiě)onLongClick()方法，不然會(huì)影響OnTouch里面的觸摸監(jiān)聽(tīng)。
  private static final int NONE = 0;
  private static final int DRAG = 1;
  private static final int ZOOM = 2;
  private int mode = NONE;


hairIv.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                return true;
            }
        });


 hairIv.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction() & MotionEvent.ACTION_MASK) {
                    case MotionEvent.ACTION_DOWN:
                         //單點(diǎn)觸控
                        mode = DRAG;
                        
                        break;
                    case MotionEvent.ACTION_POINTER_DOWN:
                        //多點(diǎn)觸控
                    
                        break;
                    case MotionEvent.ACTION_MOVE:
                        // 手指滑動(dòng)
                        if (mode == DRAG) {
                            // 是一個(gè)手指拖動(dòng)
                          Log.d(TAG, "mode = DRAG" );
                        } else if (mode == ZOOM) {
                            // 兩個(gè)手指滑動(dòng)
                          Log.d(TAG, "mode = ZOOM" );
                        }
                        break;
                    case MotionEvent.ACTION_UP:
                    case MotionEvent.ACTION_POINTER_UP:
                        // 手指放開(kāi)事件
                        mode = NONE;
                        break;
                }
              
                return true;
            }
        });

這些寫(xiě)上之后就可以先看一下單指，雙指的觸摸事件有沒(méi)有被正確處理

  • 通過(guò)Android提供的Matrix類(lèi)對(duì)圖像進(jìn)行處理，關(guān)于Matrix的原理可以看一下Android官方文檔Matrix部分，也可以找一些其他的博客，這里只看使用。

定義要用到的變量

    private Matrix matrix = new Matrix();
    private Matrix savedMatrix = new Matrix();
    // 第一個(gè)按下的手指的點(diǎn)
    private PointF startPoint = new PointF();
    // 兩個(gè)按下的手指的觸摸點(diǎn)的中點(diǎn)
    private PointF midPoint = new PointF();
    // 初始的兩個(gè)手指按下的觸摸點(diǎn)的距離
    private float oriDis = 1f;

在onTouch中完善

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                ImageView view = (ImageView) v;
                final int x = (int) event.getRawX();
                final int y = (int) event.getRawY();
                Log.d(TAG, "onTouch: x= " + x + "y=" + y);
                switch (event.getAction() & MotionEvent.ACTION_MASK) {
                    case MotionEvent.ACTION_DOWN:
                         //單點(diǎn)觸控
                        matrix.set(view.getImageMatrix());
                        savedMatrix.set(matrix);
                        startPoint.set(event.getX(), event.getY());
                        mode = DRAG;
                        break;
                    case MotionEvent.ACTION_POINTER_DOWN:
                        //多點(diǎn)觸控
                        oriDis = distance(event);
                        if (oriDis > 10f) {
                            savedMatrix.set(matrix);
                            midPoint = midPoint(event);
                            mode = ZOOM;
                        }
                        break;
                    case MotionEvent.ACTION_MOVE:
                        // 手指滑動(dòng)事件
                        if (mode == DRAG) {
                            // 是一個(gè)手指拖動(dòng)
                            matrix.set(savedMatrix);
                            matrix.postTranslate(event.getX() - startPoint.x, event.getY()
                                    - startPoint.y);
                        } else if (mode == ZOOM) {
                            // 兩個(gè)手指滑動(dòng)
                            float newDist = distance(event);
                            if (newDist > 10f) {
                                matrix.set(savedMatrix);
                                float scale = newDist / oriDis;
                                matrix.postScale(scale, scale, midPoint.x, midPoint.y);
                            }
                        }
                        break;
                    case MotionEvent.ACTION_UP:
                    case MotionEvent.ACTION_POINTER_UP:
                        // 手指放開(kāi)事件
                        mode = NONE;
                        break;
                }
                view.setImageMatrix(matrix);
                return true;
            }

其中用到的計(jì)算位置和距離的方法

    /**
     * 計(jì)算兩個(gè)手指頭之間的中心點(diǎn)的位置
     * x = (x1+x2)/2;
     * y = (y1+y2)/2;
     *
     * @param event 觸摸事件
     * @return 返回中心點(diǎn)的坐標(biāo)
     */
    private PointF midPoint(MotionEvent event) {
        float x = (event.getX(0) + event.getX(1)) / 2;
        float y = (event.getY(0) + event.getY(1)) / 2;
        return new PointF(x, y);
    }


    /**
     * 計(jì)算兩個(gè)手指間的距離
     *
     * @param event 觸摸事件
     * @return 放回兩個(gè)手指之間的距離
     */
    private float distance(MotionEvent event) {
        float x = event.getX(0) - event.getX(1);
        float y = event.getY(0) - event.getY(1);
        return (float) Math.sqrt(x * x + y * y);//兩點(diǎn)間距離公式
    }
3 源碼
public class ImageActivity extends AppCompatActivity{

    @BindView(R.id.hair_iv)
    ImageView hairIv;

    private static final int NONE = 0;
    private static final int DRAG = 1;
    private static final int ZOOM = 2;
    private int mode = NONE;

    private Matrix matrix = new Matrix();
    private Matrix savedMatrix = new Matrix();
    // 第一個(gè)按下的手指的點(diǎn)
    private PointF startPoint = new PointF();
    // 兩個(gè)按下的手指的觸摸點(diǎn)的中點(diǎn)
    private PointF midPoint = new PointF();
    // 初始的兩個(gè)手指按下的觸摸點(diǎn)的距離
    private float oriDis = 1f;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image);
        ButterKnife.bind(this);

        hairIv.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                return true;
            }
        });

        hairIv.setOnTouchListener(new View.OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                ImageView view = (ImageView) v;
                final int x = (int) event.getRawX();
                final int y = (int) event.getRawY();
                Log.d(TAG, "onTouch: x= " + x + "y=" + y);
                switch (event.getAction() & MotionEvent.ACTION_MASK) {
                    case MotionEvent.ACTION_DOWN:
                         //單點(diǎn)觸控
                        matrix.set(view.getImageMatrix());
                        savedMatrix.set(matrix);
                        startPoint.set(event.getX(), event.getY());
                        mode = DRAG;
                        break;
                    case MotionEvent.ACTION_POINTER_DOWN:
                        //多點(diǎn)觸控
                        oriDis = distance(event);
                        if (oriDis > 10f) {
                            savedMatrix.set(matrix);
                            midPoint = midPoint(event);
                            mode = ZOOM;
                        }
                        break;
                    case MotionEvent.ACTION_MOVE:
                        // 手指滑動(dòng)事件
                        if (mode == DRAG) {
                            // 是一個(gè)手指拖動(dòng)
                            matrix.set(savedMatrix);
                            matrix.postTranslate(event.getX() - startPoint.x, event.getY()
                                    - startPoint.y);
                        } else if (mode == ZOOM) {
                            // 兩個(gè)手指滑動(dòng)
                            float newDist = distance(event);
                            if (newDist > 10f) {
                                matrix.set(savedMatrix);
                                float scale = newDist / oriDis;
                                matrix.postScale(scale, scale, midPoint.x, midPoint.y);
                            }
                        }
                        break;
                    case MotionEvent.ACTION_UP:
                    case MotionEvent.ACTION_POINTER_UP:
                        // 手指放開(kāi)事件
                        mode = NONE;
                        break;
                }
                view.setImageMatrix(matrix);
                return true;
            }
        });
    }

    /**
     * 計(jì)算兩個(gè)手指頭之間的中心點(diǎn)的位置
     * x = (x1+x2)/2;
     * y = (y1+y2)/2;
     *
     * @param event 觸摸事件
     * @return 返回中心點(diǎn)的坐標(biāo)
     */
    private PointF midPoint(MotionEvent event) {
        float x = (event.getX(0) + event.getX(1)) / 2;
        float y = (event.getY(0) + event.getY(1)) / 2;
        return new PointF(x, y);
    }


    /**
     * 計(jì)算兩個(gè)手指間的距離
     *
     * @param event 觸摸事件
     * @return 放回兩個(gè)手指之間的距離
     */
    private float distance(MotionEvent event) {
        float x = event.getX(0) - event.getX(1);
        float y = event.getY(0) - event.getY(1);
        return (float) Math.sqrt(x * x + y * y);//兩點(diǎn)間距離公式
    }

  }
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容