基于PhotoView的头像/圆形裁剪控件

    常见的图片裁剪有两种,一种是图片固定,裁剪框移动放缩来确定裁剪区域,早期见的比较多,缺点在于不能直接预览裁剪后的效果;还有一种现在比较普遍了,就是裁剪框固定,直接拖动缩放图片,便于预览裁剪结果。

      我做的这个控件属于后者。一般来说,做图片裁剪的思路无外乎是先监听手势,获取坐标,再对图片变形,最后确定裁剪区域的坐标对位图进行裁剪,最后保存图片到本地。我嘛还是个技术小白,一想到要监控手势这些就头疼,碰巧项目之前为了做查看大图而引入了大名鼎鼎的第三方图片查看控件——PhotoView。于是转念一想,能不能把到图片变形为止的前几步交给PhotoView来搞定,我只要负责确定确定裁剪区域后面这几步呢。后来掉了好几个坑导致偷懒也没轻松多少其实ε=(´ο`*)))唉~

裁剪控件示意图                  控件层次图 

    先简要介绍一下设计思路,如上图所示,主要分为两部分,上层是遮罩(也可以理解为是裁剪框),用于预览裁剪后的效果;下层是PhotoView,这里多包了一层改为正方形显示。

  下面是遮罩的代码,比较简单,这里就不赘述了。

复制代码
 1 /** 2  * Created by MandyLu on 2018/7/14.  3  * 圆形裁剪框  4  */ 5 public class CircleCropView extends View {  6     public final int CIRCLE_MARGIN = 50;  7  8     public CircleCropView(Context context) {  9         super(context); 10     } 11 12     public CircleCropView(Context context, @Nullable AttributeSet attrs) { 13         super(context, attrs); 14     } 15 16     public CircleCropView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { 17         super(context, attrs, defStyleAttr); 18     } 19 20     @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP) 21     public CircleCropView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) { 22         super(context, attrs, defStyleAttr, defStyleRes); 23     } 24 25     @Override 26     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 27         super.onMeasure(widthMeasureSpec, widthMeasureSpec); 28     } 29 30     @RequiresApi(api = Build.VERSION_CODES.O) 31     @Override 32     protected void onDraw(Canvas canvas) { 33         ca
                    
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信