画圆形头像

背景知识：borderRadius属性、绘画组件Circle、

borderRadius

注意：它设置元素的边框圆角半径，不支持百分比。

代码：

Image($r('app.media.ghy_singer_1'))
    .width(100)
    .height(100)
    .borderRadius(50) // 支持百分比，设置值时，要为宽高的一半。

效果：

Circle

Circle文档

代码：

// fill默认填充色是黑色
Circle().width(100).height(100).fill('#E7645F')

效果：

绘画组件 + 裁剪 画头像

代码：

Row().width(100).height(100)
  .backgroundImage($r('app.media.ghy_singer_1'))
  .clip(new Circle({width: 100, height: 100}))

效果：

绘画组件 + 裁剪 + radius 画头像

代码：

// 使用mask（遮罩）时，里面的绘画组件，必须要fill填充，不然Image会被白色遮罩住
Image($r('app.media.ghy_singer_1'))
  .width('200vp').height('200vp')
  .mask(
    new Rect({ width: '100%', height: '100%', radius: '50%' })
      .fill('rgba(255, 255, 255, 0.5)')
  )

效果：