[Android开发]造轮子——自定义图片裁剪工具

矩形裁剪框

裁剪结果

圆形裁剪框

裁剪结果

自适应

项目中总是有裁剪图片的的需求，这次单抽出来做个小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);
                }
            }
        });
    }
}

最后编辑于：2020.04.26 11:42:28

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,271评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,275评论 2赞 380
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,151评论 0赞 336
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,550评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,553评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,559评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,924评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,580评论 0赞 257
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,826评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,578评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,661评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,363评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,940评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,926评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,156评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,872评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,391评论 2赞 342

[Android开发]造轮子——自定义图片裁剪工具

实现的成员比较简单：

各个类的职责

具体的实现

推荐阅读更多精彩内容