• Android ImageView 四个角自定义角度,以及角度的变换


    背景:

    在正常开发过程中,我们经常会发现一些图片有各种各样的显示,有圆角、直角、圆形、不规则图形等?比较常见的是圆形,还有圆角。今天我们将讲述圆角、四个角不同度数以及通过圆角巧妙变成圆形

    1.如果大家不熟悉圆形或者path的以及canvas.clipPath,可以参考我的一篇文章:圆形头像  

    2.今天我们依旧通过Canvas的画布剪切来完成,有所不同的是,这次的path不是一个圆,而是在矩形中画圆addRoundRect

    废话不多说:直接上代码

    1. public class MyRoundJiaoImageView extends AppCompatImageView {
    2. private int leftTopRadius;
    3. private int rightTopRadius;
    4. private int leftBottomRadius;
    5. private int rightBottomRadius;
    6. private int allRadius;
    7. public MyRoundJiaoImageView(Context context) {
    8. super(context);
    9. }
    10. public MyRoundJiaoImageView(Context context, AttributeSet attrs) {
    11. super(context, attrs);
    12. initAtter(context, attrs);
    13. }
    14. private void initAtter(Context context, AttributeSet attrs) {
    15. TypedArray typed = context.obtainStyledAttributes(attrs, R.styleable.roundRadion);
    16. if (typed == null)
    17. return;
    18. leftTopRadius = typed.getInt(R.styleable.roundRadion_mleftTopRadius, 0);
    19. rightTopRadius = typed.getInt(R.styleable.roundRadion_mrightRadius, 0);
    20. leftBottomRadius = typed.getInt(R.styleable.roundRadion_mleftButtomRadius, 0);
    21. rightBottomRadius = typed.getInt(R.styleable.roundRadion_mrightButtomRadius, 0);
    22. allRadius = typed.getInt(R.styleable.roundRadion_allRadius, 0);
    23. typed.recycle();
    24. }
    25. @Override
    26. protected void onDraw(Canvas canvas) {
    27. int width = getMeasuredWidth();
    28. int height = getMeasuredHeight();
    29. Path path = new Path();
    30. /*向路径中添加圆角矩形。radii数组定义圆角矩形的四个圆角的x,y半径。radii长度必须为8*/
    31. if (allRadius > 0) {
    32. float rids[] = {allRadius, allRadius, allRadius, allRadius, allRadius, allRadius, allRadius, allRadius};
    33. path.addRoundRect(new RectF(0, 0, width, height), rids, Path.Direction.CW);
    34. } else {
    35. float rids[] = {leftTopRadius, leftTopRadius, rightTopRadius, rightTopRadius, leftBottomRadius, leftBottomRadius, rightBottomRadius, rightBottomRadius};
    36. path.addRoundRect(new RectF(0, 0, width, height), rids, Path.Direction.CW);
    37. }
    38. canvas.clipPath(path);
    39. super.onDraw(canvas);
    40. }
    41. public void setAllRadius(int allRadius) {
    42. this.allRadius = allRadius;
    43. invalidate();
    44. }
    45. }

    讲解:

    如果对画布的操作,需要在onDraw的super之前完成,否则将不会生效

    1.我们这边是通过自定义圆角角度,如何自定义参数,可参考Android View自定义参数declare-styleable介绍与使用 

    参数如下:

    1. <declare-styleable name="roundRadion">
    2. <attr name="mleftTopRadius" format="integer" />
    3. <attr name="mrightRadius" format="integer" />
    4. <attr name="mleftButtomRadius" format="integer" />
    5. <attr name="mrightButtomRadius" format="integer" />
    6. <attr name="allRadius" format="integer" />
    7. declare-styleable>

    2.path的addRoundRect的使用

    public void addRoundRect(RectF rect, float[] radii, Direction dir)

    RectF :矩形的范围

    radii:四个角的角度参数,正常需要8个值,因为我们知道一个角确定下来需要两个角度的坐标

    所以这个数组正常就是:

    1. float rids[] = {leftTopRadius, leftTopRadius, rightTopRadius, rightTopRadius, leftBottomRadius, leftBottomRadius, rightBottomRadius, rightBottomRadius};
    2. A.(leftTopRadius, leftTopRadius)
    3. B(rightTopRadius, rightTopRadius)
    4. C(leftBottomRadius, leftBottomRadius)
    5. D(rightBottomRadius, rightBottomRadius)

    坐标里面的值需一样,否则开角不同,会导致不生效 

    Direction :绘制的方向

    3.只要我们path路径准备好,canvs绘制路径即可。

    说明:

    1.这种剪切是支持不同角的角度值剪切,但是,图片的画布只是针对前景色,也就是ImageView的drawable或者src的部分,背景大小还是原来的尺寸,接下来我们将会用一组动画说明。

    2.当角度都是360度的时候,这个图片就是圆形,我们常见的头像做法。这种剪切方法可以剪切出任意效果,只要我们path绘制的够完美。

  • 相关阅读:
    最新消息!2022年全国大学生数学建模竞赛评阅要点发布
    线程是如何进行创建的
    Emgu CV4图像处理之打开Tensorflow训练模型17(C#)
    OpenFunction v0.8.0 发布:通过 Dapr Proxy 加速函数启动
    【密码学】第三章、分组密码
    【AI】推理引擎中的模型小型化问题
    leetcode:67. 二进制求和
    C语言字符串中【数组形式】和【指针形式】不同之处
    jvm打破砂锅问到底- 为什么要标记或记录跨代引用
    python协议解析
  • 原文地址:https://blog.csdn.net/qq36246172/article/details/126497979