形狀裁剪

用于對(duì)組件進(jìn)行裁剪、遮罩處理。

說明：
開發(fā)前請(qǐng)熟悉鴻蒙開發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

屬性

ProgressMask10+

ProgressMask設(shè)置遮罩的進(jìn)度、最大值和遮罩顏色。

constructor10+

constructor(value: number, total: number, color: ResourceColor)

構(gòu)造ProgressMask對(duì)象。

參數(shù)：

updateProgress10+

updateProgress(value: number): void

更新進(jìn)度遮罩的進(jìn)度值。

參數(shù)：

updateColor10+

updateColor(value: ResourceColor): void

更新進(jìn)度遮罩的顏色。

參數(shù)：

示例

示例1

// xxx.ets
@Entry
@Component
struct ClipAndMaskExample {
  build() {
    Column({ space: 15 }) {
      Text('clip').fontSize(12).width('75%').fontColor('#DCDCDC')
      Row() {
        Image($r('app.media.testImg')).width('500px').height('280px')
      }
      .clip(true) // 如這里不設(shè)置clip為true，則Row組件的圓角不會(huì)限制其中的Image組件，Image組件的四個(gè)角會(huì)超出Row
      .borderRadius(20)
      // 用一個(gè)280px直徑的圓對(duì)圖片進(jìn)行裁剪
      Image($r('app.media.testImg'))
        .clip(new Circle({ width: '280px', height: '280px' }))
        .width('500px').height('280px')

      Text('mask').fontSize(12).width('75%').fontColor('#DCDCDC')
      // 給圖片添加了一個(gè)500px*280px的方形遮罩
      Image($r('app.media.testImg'))
        .mask(new Rect({ width: '500px', height: '280px' }).fill(Color.Gray))
        .width('500px').height('280px')

      // 給圖片添加了一個(gè)280px*280px的圓形遮罩
      Image($r('app.media.testImg'))
        .mask(new Circle({ width: '280px', height: '280px' }).fill(Color.Gray))
        .width('500px').height('280px')
    }
    .width('100%')
    .margin({ top: 15 })
  }
}

示例2

@Entry
@Component
struct ProgressMaskExample {
  @State progressflag1: boolean = true;
  @State color: Color = 0x01006CDE;
  @State value: number = 10.0;
  @State progress: ProgressMask = new ProgressMask(10.0, 100.0, Color.Gray);
  build() {
    Column({ space: 15 }) {
      Text('progress mask').fontSize(12).width('75%').fontColor('#DCDCDC')
      // 給圖片添加了一個(gè)280px*280px的進(jìn)度遮罩
      Image($r('app.media.testImg'))
        .width('500px').height('280px')
        .mask(this.progress)
        .animation({
          duration: 2000, // 動(dòng)畫時(shí)長
          curve: Curve.Linear, // 動(dòng)畫曲線
          delay: 0, // 動(dòng)畫延遲
          iterations: 1, // 播放次數(shù)
          playMode: PlayMode.Normal // 動(dòng)畫模式
        }) // 對(duì)Button組件的寬高屬性進(jìn)行動(dòng)畫配置

      // 更新進(jìn)度遮罩的進(jìn)度值
      Button('updateProgress')
        .onClick((event: ClickEvent) = > {
          this.value += 10;
          this.progress.updateProgress(this.value);
        }).width(200).height(50).margin(20)

      // 更新進(jìn)度遮罩的顏色
      Button('updateColor')
        .onClick((event: ClickEvent) = > {
          if (this.progressflag1) {
            this.progress.updateColor(0x9fff0000);
          } else {
            this.progress.updateColor(0x9f0000ff);
          }
          this.progressflag1 = !this.progressflag1
        }).width(200).height(50).margin(20)

      // 恢復(fù)進(jìn)度遮罩
      Button('click reset!')
        .onClick((event: ClickEvent) = > {
          this.value = 0;
          this.progress.updateProgress(this.value);
        }).width(200).height(50).margin(20)
    }
    .width('100%')
    .margin({ top: 15 })
  }
}

審核編輯 黃宇