矩形裁剪框

裁剪結(jié)果

圓形裁剪框

裁剪結(jié)果

自適應(yīng)

項目中總是有裁剪圖片的的需求奸披，這次單抽出來做個小demo
項目地址：https://github.com/clam314/ClipPhoto

實現(xiàn)的成員比較簡單：

各個類的職責(zé)

• ImageTouchView昏名，負(fù)責(zé)圖片的顯示，單指移動圖片阵面，雙指縮放圖片轻局，自適應(yīng)裁剪框，最后根據(jù)ClipFrameView的接口獲取裁剪框的位置和大小進行截圖样刷。
• ClipFrameView仑扑，裁剪框需要實現(xiàn)的接口，提供裁剪框的大小和位置
• RectFrameView置鼻、CircleFrameView镇饮、NinePatchFrameView，都是具體裁剪框的實現(xiàn)箕母，主要就是繪制中間的裁剪框和框外的蒙版
• ShowActivity储藐，單純的負(fù)責(zé)展示裁剪后的圖片

這里裁剪框和圖片的裁剪進行了分離，ImageTouchView只需要知道裁剪框的位置和大小即可嘶是。具體裁剪框只需要實現(xiàn)ClipFrameView接口提供裁剪框位置和大小即可钙勃。自己可以實現(xiàn)ClipFrameView，實現(xiàn)更多的裁剪框樣式

具體的實現(xiàn)

• 裁剪框的接口

public interface ClipFrameView {
    public float getFrameScale();
    public float getFrameWidth();
    public float getFrameHeight();
    public PointF getFramePosition();
}

• 圓形裁剪框

public class CircleFrameView extends View implements ClipFrameView {
    private float frameWidth;//裁剪框的寬
    private float frameHeight;//裁剪框的高
    private float frameScale; //裁剪框的寬高比例聂喇，width/height
    private float frameStrokeWidth;//裁剪寬的邊寬
    private float mWidth;//整個蒙版的寬
    private float mHeight;//整個蒙版的高
    private Paint paint;
    private Path globalPath;//整個蒙版的path
    private Path framePath;//裁剪框的path
    private PorterDuffXfermode xfermode;

    public CircleFrameView(Context context) {
        this(context,null);
    }

    public CircleFrameView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public CircleFrameView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init(){
        xfermode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        globalPath = new Path();
        framePath = new Path();
        //設(shè)置裁剪框的邊框2dp
        frameStrokeWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,2,getContext().getResources().getDisplayMetrics());
        frameScale = 1f;
        //關(guān)閉硬件加速辖源，不然部分機型path的繪制會無效
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
        int length = w>h ? h : w;//選擇寬高中最小的為標(biāo)準(zhǔn)
        frameWidth = length/5*4;//獲取4/5的高度
        frameHeight = frameWidth/frameScale;//圓形，故框高一致
        //view的中心為原點，根據(jù)view的大小添加整個蒙版的路徑
        globalPath.addRect(-w/2,-h/2,w/2,h/2, Path.Direction.CW);
        //view的中心為原點克饶，根據(jù)框高添加一個圓形的路徑
        framePath.addCircle(0,0,frameHeight/2, Path.Direction.CW);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //繪制整個畫布的陰影
        canvas.translate(mWidth/2,mHeight/2);
        paint.setColor(Color.parseColor("#333333"));
        paint.setAlpha(255/3*2);
        paint.setStyle(Paint.Style.FILL);//填充模式
        canvas.drawPath(globalPath,paint);
        //擦除框內(nèi)的陰影酝蜒，給畫筆設(shè)置成擦除的模式
        paint.setXfermode(xfermode);
        canvas.drawPath(framePath,paint);
        paint.setXfermode(null);//清除擦除模式
        //描出邊框
        paint.setColor(Color.YELLOW);
        paint.setAlpha(255);
        paint.setStyle(Paint.Style.STROKE);//邊界模式
        paint.setStrokeWidth(frameStrokeWidth);
        canvas.drawPath(framePath,paint);
    }


    @Override
    public float getFrameScale() {
        return frameScale;
    }

    @Override
    public float getFrameWidth() {
        return frameWidth;
    }

    @Override
    public float getFrameHeight() {
        return frameHeight;
    }

    @Override
    public PointF getFramePosition() {
        //返回裁剪框左上角的坐標(biāo)
        float top = (mHeight - frameHeight)/2;
        float left = (mWidth - frameWidth)/2;
        return new PointF(left,top);
    }
}

• 負(fù)責(zé)真正裁剪的View

public class ImageTouchView extends ImageView {
    private float mWidth;
    private float mHeight;

    private PointF startPoint = new PointF();
    private Matrix matrix = new Matrix();
    private Matrix currentMatrix = new Matrix();

    private int mode = 0;//用于標(biāo)記模式
    private static final int DRAG = 1;//拖動
    private static final int ZOOM = 2;//放大
    private float startDis = 0;
    private PointF midPoint;//中心點

    public ImageTouchView(Context context){
        super(context);
    }

    public ImageTouchView(Context context,AttributeSet paramAttributeSet){
        super(context,paramAttributeSet);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                mode = DRAG;
                currentMatrix.set(this.getImageMatrix());//記錄ImageView當(dāng)期的移動位置
                startPoint.set(event.getX(),event.getY());//開始點
                break;
            case MotionEvent.ACTION_MOVE://移動事件
                if (mode == DRAG) {//圖片拖動事件
                    float dx = event.getX() - startPoint.x;//x軸移動距離
                    float dy = event.getY() - startPoint.y;//y軸移動距離
                    matrix.set(currentMatrix);//在當(dāng)前的位置基礎(chǔ)上移動
                    matrix.postTranslate(dx, dy);
                } else if(mode == ZOOM){//圖片放大事件
                    float endDis = distance(event);//結(jié)束距離
                    if(endDis > 10f){
                        float scale = endDis / startDis;//放大倍數(shù)
                        Log.v("scale=", String.valueOf(scale));
                        matrix.set(currentMatrix);
                        matrix.postScale(scale, scale, midPoint.x, midPoint.y);
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
                mode = 0;
                break;
            //有手指離開屏幕，但屏幕還有觸點(手指)
            case MotionEvent.ACTION_POINTER_UP:
                mode = 0;
                break;
            //當(dāng)屏幕上已經(jīng)有觸點（手指）,再有一個手指壓下屏幕,變成放大模式,計算兩點之間中心點的位置
            case MotionEvent.ACTION_POINTER_DOWN:
                mode = ZOOM;
                startDis = distance(event);//計算得到兩根手指間的距離
                if(startDis > 10f){//避免手指上有兩個繭
                    midPoint = mid(event);//計算兩點之間中心點的位置
                    currentMatrix.set(this.getImageMatrix());//記錄當(dāng)前的縮放倍數(shù)
                }
                break;
            }
        this.setImageMatrix(matrix);
        return true;
    }

    /**
     * 兩點之間的距離
     */
    private static float distance(MotionEvent event){
        //兩根手指間的距離
        float dx = event.getX(1) - event.getX(0);
        float dy = event.getY(1) - event.getY(0);
        return (float)Math.sqrt(dx*dx + dy*dy);
    }

    /**
     * 計算兩點之間中心點的位置
     */
    private static PointF mid(MotionEvent event){
        float midx = event.getX(1) + event.getX(0);
        float midy = event.getY(1) + event.getY(0);
        return new PointF(midx/2, midy/2);
    }

    /**
     *根據(jù)裁剪框的位置和大小,截取圖片
     *
     *@param frameView 裁剪框
     */
    public Bitmap getBitmap(ClipFrameView frameView) {
        if(frameView == null)return null;
        setDrawingCacheEnabled(true);
        buildDrawingCache();

        //判斷裁剪框的區(qū)域是否超過了View的大小矾湃，避免超過大小而報錯
        int left =  frameView.getFramePosition().x > 0 ? (int)frameView.getFramePosition().x : 0;
        int top = frameView.getFramePosition().y > 0 ? (int)frameView.getFramePosition().y : 0;
        int width = left+frameView.getFrameWidth() < mWidth ? (int)frameView.getFrameWidth() : (int)mWidth;
        int height = top+frameView.getFrameHeight() < mHeight ? (int)frameView.getFrameHeight() : (int)mHeight;
        //根據(jù)裁剪框的位置和大小,截取圖片
        Bitmap finalBitmap = Bitmap.createBitmap(getDrawingCache(),left,top,width,height);
        // 釋放資源
        destroyDrawingCache();
        return finalBitmap;
    }

    /**
     *將圖片自動縮放到裁剪框的上部
     *
     *@param frameView 裁剪框
     */
    public void autoFillClipFrame(ClipFrameView frameView){
        if(getDrawable() == null || frameView == null)return;

        float left = frameView.getFramePosition().x;
        float top = frameView.getFramePosition().y;
        float width = frameView.getFrameWidth();
        float height = frameView.getFrameHeight();
        RectF dstRect = new RectF(left,top,left+width,top+height);
        RectF srcRect = new RectF(0,0,getDrawable().getIntrinsicWidth(),getDrawable().getMinimumHeight());
        Matrix newMatrix = new Matrix();
        //將源矩陣矩陣填充到目標(biāo)矩陣亡脑，這里選擇對其左上，根據(jù)需求可以選其他模式
        newMatrix.setRectToRect(srcRect,dstRect, Matrix.ScaleToFit.START);
        setImageMatrix(newMatrix);
        matrix = newMatrix;
        invalidate();
    }


    /**
     *設(shè)置圖片
     *
     * @param filePath 圖片的完整路徑
     * @param multiple 倍數(shù)洲尊，當(dāng)圖片寬或高大于Vie的寬或高multiple倍實行向下采樣
     */
    public void setImageFile(final String filePath,final int multiple){
        post(new Runnable() {
            @Override
            public void run() {
                //為了獲取view的大小
                Bitmap bitmap = getSmallBitmap(filePath,(int) mWidth,(int)mHeight,multiple);
                if(bitmap != null)setImageBitmap(bitmap);
            }
        });
    }

    //計算圖片的縮放大小
    private static int calculateInSampleSize(BitmapFactory.Options options, int reqWidth, int reqHeight,int  multiple) {
        final int height = options.outHeight;
        final int width = options.outWidth;
        int inSampleSize = 1;//1是不縮放远豺，2是縮小1/2,4是縮小1/4等
        if (height > reqHeight *multiple|| width > reqWidth*multiple) {
            final int heightRatio = Math.round((float) height / (float) reqHeight);
            final int widthRatio = Math.round((float) width / (float) reqWidth);
            inSampleSize = heightRatio < widthRatio ? heightRatio : widthRatio;
        }
        return inSampleSize;
    }

    private static Bitmap getSmallBitmap(String filePath, int w, int h,int multiple) {
        final BitmapFactory.Options options = new BitmapFactory.Options();
        options.inJustDecodeBounds = true;//true的話，不會真的把bitmap加載到內(nèi)存,但能獲取bitmap的大小信息等
        BitmapFactory.decodeFile(filePath, options);
        options.inSampleSize = calculateInSampleSize(options, w, h,multiple);
        options.inJustDecodeBounds = false;
        return BitmapFactory.decodeFile(filePath, options);
    }
}

• MainActivity的布局

裁剪框的View和裁剪的View在同一個父布局里坞嘀，兩者重疊躯护，大小一致。這樣圖片裁剪的區(qū)域和裁剪框一致

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#dafc"
        >

        <TextView
            android:id="@+id/sure"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:gravity="center"
            android:text="確定"
            android:textColor="#000000" />
    </RelativeLayout>
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.clam.clipphoto.ImageTouchView
            android:id="@+id/image_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/image_clip_small"
            android:scaleType="matrix" />

        <com.clam.clipphoto.FrameView
            android:id="@+id/frame_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </FrameLayout>
</LinearLayout>

• 使用

public class MainActivity extends AppCompatActivity{
    private ImageView imageView;
    private ClipFrameView clipFrameView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.sure).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(imageView instanceof  ImageTouchView){
                    //TODO 此處靜態(tài)變量傳遞參數(shù)是錯誤丽涩，這里只是為了方便展示截圖的成果棺滞，
                    // TODO bitmap最好保存文件再傳遞路徑過去。另外Intent里面塞超過40KB的bitmap就會報錯的
                    ShowActivity.save = ((ImageTouchView) imageView).getBitmap(clipFrameView);
                    Intent i = new Intent(MainActivity.this,ShowActivity.class);
                    startActivity(i);
                }
            }
        });
        findViewById(R.id.reset).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(imageView instanceof ImageTouchView){
                    ((ImageTouchView) imageView).autoFillClipFrame(clipFrameView);
                }
            }
        });
        imageView = (ImageView)findViewById(R.id.image_view);
        clipFrameView = (ClipFrameView)findViewById(R.id.frame_view);

        //本次demo圖片存放的路徑file path：/storage/emulated/0/Pictures/image_clip.jpg
        final File file = new File(Environment.getExternalStoragePublicDirectory(DIRECTORY_PICTURES),"image_clip.jpg");
        if(imageView instanceof  ImageTouchView){
            ((ImageTouchView) imageView).setImageFile(file.getAbsolutePath(),2);
        }


        imageView.post(new Runnable() {
            @Override
            public void run() {
                if(imageView instanceof ImageTouchView){
                    ((ImageTouchView) imageView).autoFillClipFrame(clipFrameView);
                }
            }
        });
    }
}