使用Path自定义圆角图片

拓朴季风
• 阅读 6817

简单实现圆角图片CircleView

效果:
使用Path自定义圆角图片

CircleImageView代码:

public class CircleImageView extends AppCompatImageView {

    private Path mPath;
    private RectF mRectF;
    private Paint mPaint;
    public CircleImageView(Context context) {
        this(context, null);
    }

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

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


    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(15);

        mPath  = new Path();

    }
    @Override
    protected void onDraw(Canvas canvas) {
        //设置外框的矩形区域,不可再init()初始化,构造器中width和height还未确定,可在onMesure()中获取并设置
        mRectF = new RectF(0,0, getWidth(),getHeight());
        //path划出一个圆角矩形,容纳图片,图片矩形区域设置比红色外框小,否则会覆盖住外框,随意控制
        mPath.addRoundRect(new RectF(10, 10, mRectF.right-10,mRectF.bottom-10), 50, 50, Path.Direction.CW);

        canvas.drawRoundRect(mRectF, 50, 50, mPaint); //画出红色外框圆角矩形

        canvas.clipPath(mPath);//将canvas裁剪到path设定的区域,往后的绘制都只能在此区域中,

        //这一句应该放在canvas.clipPath(path)之后,canvas.clipPath(path)只对裁剪之后的绘制起作用,
        // 这个方法在ImageView中会画出xml设置的Drawable,落在刚才设置的path中
        super.onDraw(canvas);

    }
}

   整个原理就是用Path划出一个圆角矩形区域,调用super.onDraw(canvas)就可以让Drawable 落在那个区域。

使用,xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.why.traing2.MainActivity">

       <com.example.why.traing2.CircleImageView
           android:id="@+id/img_circle"
           android:layout_width="200dp"
           android:layout_height="200dp"
           android:src="@drawable/gakki"
           android:scaleType="centerCrop"
           app:layout_constraintTop_toTopOf="parent"
           android:layout_marginTop="8dp"
           app:layout_constraintBottom_toBottomOf="parent"
           android:layout_marginBottom="8dp"
           android:layout_marginLeft="8dp"
           app:layout_constraintLeft_toLeftOf="parent"
           app:layout_constraintVertical_bias="0.501"
           android:layout_marginRight="8dp"
           app:layout_constraintRight_toRightOf="parent"
           />

</android.support.constraint.ConstraintLayout>

Activivty:


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        CircleImageView circleImageView = (CircleImageView)findViewById(R.id.img_circle);
    }
}

看了些参考资料,发现上篇写错了,发现思路比较简单的,记录下。也可以用Shader, Xfermode实现,参考:https://enggm.wordpxress.com/...

点赞
收藏
评论区
推荐文章
刚刚好 刚刚好
2年前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
非常实用的GitHub项目
CoilCoil是Android上的一个全新的图片加载框架,它的全名叫做coroutineimageloader,即协程图片加载库。与传统的图片加载库Glide,Picasso或Fresco等相比。该具有轻量(只有大约1500个方法)、快、易于使用、更现代的API等优势。它支持GIF和SVG,并且可以执行四个默认转换:模糊,圆形裁剪,灰度和圆角。示例如
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
希望的天 希望的天
4年前
Android-图片加载库Coil使用教程
框架介绍Coil是Android上的一个全新的图片加载框架,它的全名叫做coroutineimageloader,即协程图片加载库。与传统的图片加载库Glide,Picasso或Fresco等相比。该具有轻量(只有大约1500个方法)、快、易于使用、更现代的API等优势。它支持GIF和SVG,并且可以执行四个默认转换:模糊,圆形裁剪,灰度和圆角。
浩浩 浩浩
4年前
【Flutter实战】图片和Icon
3.5图片及ICON3.5.1图片Flutter中,我们可以通过Image组件来加载并显示图片,Image的数据源可以是asset、文件、内存以及网络。ImageProviderImageProvider是一个抽象类,主要定义了图片数据获取的接口load(),从不同的数据源获取图片需要实现不同的ImageProvi
红橙Darren 红橙Darren
4年前
Android无限广告轮播 - 自定义BannerView
1.概述这其实是我第一篇想写的博客,可能是因为我遇到了太多的坑,那个时候刚入行下了很多Demo发现怎么也改不动,可能是能力有限,这次就做一个具体的实现和彻底的封装。  上次讲了,有了源码分析我们对ViewPager就有了一个大概的了解,那么再来封装成自定义View,就会简单许多,附视频讲解地址:    这里写图片描述2.效果封装2.1
Easter79 Easter79
3年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
Stella981 Stella981
3年前
Intellij idea或者Android Studio实用Live_Templates好用模板整理
Live\_Templates的作用是自动补全代码:自定义补全代码:单例模式:sin!输入图片说明(https://static.oschina.net/uploads/img/201707/17114328_kR84.png"在这里输入图片标题")Templatetext:privatestatic
Wesley13 Wesley13
3年前
Java实现简单计算器
1概述JavaAWTSwing实现的简单计算器,功能如下:支持加减乘除支持小数运算键盘监听鼠标监听2效果演示!在这里插入图片描述(https://imgblog.csdnimg.cn/20201216012859251.gif)!在这里插入图片描述(htt
Wesley13 Wesley13
3年前
DOM解析XML文件3
1.新建名为domxml的项目!这里写图片描述(http://static.oschina.net/uploads/img/201507/11181054_RvEx.jpg)2.新建user\_item.xml的自定义布局文件<?xmlversion"1.0"encoding"UTF8"?<LinearLay
Wesley13 Wesley13
3年前
Android侧滑菜单(DrawerLayout)的学习
侧滑菜单的简单使用;DrawerLayoutandroid提供的侧滑菜单,能够实现目录推出,就是大家常见的效果,效果图如下;!这里写图片描述(https://static.oschina.net/uploads/img/201706/29113317_a1lf.jpg)DrawerLayout的使用非常简单;只要你提供布局就好;一个左