鸿蒙开发（二十三）：圆形圆角图片(圆形圆角鸿蒙图片半径)

其实非常的简单，使用公共属性中的 borderRadius 即可。

borderRadius(value: Length): T;

borderRadius(value: BorderRadiuses): T;

borderRadius 的作用是给组件设置边框圆角半径。

它接受两个类型的值：Length 和 BorderRadiuses。

Length 是四个圆角的半径都是一样的。

BorderRadiuses 是分别给四个圆角设置不同的半径。

图片变圆形，只需将圆角半径设置为组件宽度的一半即可。

例如，组件宽高为 200200，圆角半径设置为 100 即可：

Image($r('app.media.avatar_200_200')) .width(200) .height(200) .borderRadius(100)

运行结果：

从运行结果来看，图片变成了圆形。

接下来，我们来看看分别给四个角设置圆角半径看看。

Image($r('app.media.avatar_200_200')) .width(200) .height(200) .borderRadius({ topLeft: 100 })

运行结果：

右上角

Image($r('app.media.avatar_200_200')) .width(200) .height(200) .borderRadius({ topRight: 100 })

运行结果：

左下角

Image($r('app.media.avatar_200_200')) .width(200) .height(200) .borderRadius({ bottomLeft: 100 })

运行结果：

右下角

Image($r('app.media.avatar_200_200')) .width(200) .height(200) .borderRadius({ bottomRight: 100 })

运行结果：

四个角一起设置

Image($r('app.media.avatar_200_200')) .width(200) .height(200) .borderRadius({ topLeft: 100, topRight: 100, bottomLeft: 100, bottomRight: 100 })

运行结果：

至此，我们学会了通过 borderRadiuses 属性给图片设置圆角半径，让其变成圆形图片。

实际开发中，圆形图片很常用，例如头像。