造轮子——自定义图片裁剪工具

矩形裁剪框 裁剪结果 圆形裁剪框 裁剪结果 自适应

项目中总是有裁剪图片的的需求，这次单抽出来做个小demo
项目地址：https://github.com/clam314/ClipPhoto

实现的成员比较简单：

各个类的职责

• ImageTouchView，负责图片的显示，单指移动图片，双指缩放图片，自适应裁剪框，最后根据ClipFrameView的接口获取裁剪框的位置和大小进行截图。
• ClipFrameView，裁剪框需要实现的接口，提供裁剪框的大小和位置
• RectFrameView、CircleFrameView、NinePatchFrameView，都是具体裁剪框的实现，主要就是绘制中间的裁剪框和框外的蒙版
• ShowActivity，单纯的负责展示裁剪后的图片

这里裁剪框和图片的裁剪进行了分离，ImageTouchView只需要知道裁剪框的位置和大小即可。具体裁剪框只需要实现ClipFrameView接口提供裁剪框位置和大小即可。自己可以实现ClipFrameView，实现更多的裁剪框样式

具体的实现

• 裁剪框的接口

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();
        //设置裁剪框的边框2dp
        frameStrokeWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,2,getContext().getResources().getDisplayMetrics());
        frameScale = 1f;
        //关闭硬件加速，不然部分机型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;//选择宽高中最小的为标准
        frameWidth = length/5*4;//获取4/5的高度
        frameHeight = frameWidth/frameScale;//圆形，故框高一致
        //view的中心为原点，根据view的大小添加整个蒙版的路径
        globalPath.addRect(-w/2,-h/2,w/2,h/2, Path.Direction.CW);
        //view的中心为原点，根据框高添加一个圆形的路径
        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);
        //擦除框内的阴影，给画笔设置成擦除的模式
        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() {
        //返回裁剪框左上角的坐标
        float top = (mHeight - frameHeight)/2;
        float left = (mWidth - frameWidth)/2;
        return new PointF(left,top);
    }
}

• 负责真正裁剪的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;//用于标记模式
    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当期的移动位置
                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);//在当前的位置基础上移动
                    matrix.postTranslate(dx, dy);
                } else if(mode == ZOOM){//图片放大事件
                    float endDis = distance(event);//结束距离
                    if(endDis > 10f){
                        float scale = endDis / startDis;//放大倍数
                        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;
            //当屏幕上已经有触点（手指）,再有一个手指压下屏幕,变成放大模式,计算两点之间中心点的位置
            case MotionEvent.ACTION_POINTER_DOWN:
                mode = ZOOM;
                startDis = distance(event);//计算得到两根手指间的距离
                if(startDis > 10f){//避免手指上有两个茧
                    midPoint = mid(event);//计算两点之间中心点的位置
                    currentMatrix.set(this.getImageMatrix());//记录当前的缩放倍数
                }
                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);
    }

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

        //判断裁剪框的区域是否超过了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;
        //根据裁剪框的位置和大小,截取图片
        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();
        //将源矩阵矩阵填充到目标矩阵，这里选择对其左上，根据需求可以选其他模式
        newMatrix.setRectToRect(srcRect,dstRect, Matrix.ScaleToFit.START);
        setImageMatrix(newMatrix);
        matrix = newMatrix;
        invalidate();
    }


    /**
     *设置图片
     *
     * @param filePath 图片的完整路径
     * @param multiple 倍数，当图片宽或高大于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加载到内存,但能获取bitmap的大小信息等
        BitmapFactory.decodeFile(filePath, options);
        options.inSampleSize = calculateInSampleSize(options, w, h,multiple);
        options.inJustDecodeBounds = false;
        return BitmapFactory.decodeFile(filePath, options);
    }
}

• MainActivity的布局

裁剪框的View和裁剪的View在同一个父布局里，两者重叠，大小一致。这样图片裁剪的区域和裁剪框一致

<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 此处静态变量传递参数是错误，这里只是为了方便展示截图的成果，
                    // 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);
                }
            }
        });
    }
}