@Entry
@Component
struct ImageSimple {

  build() {
    Column({ space: 10 }) {
      //通过renderMode属性设置图片的渲染模式为原色或黑白
      Row({ space: 50 }) {
        Image($r('app.media.girl'))
          // 设置图片的渲染模式为原色
          .renderMode(ImageRenderMode.Original)
          .width(100)
          .height(100)
          .border({ width: 1 })
            // overlay是通用属性,用于在组件上显示说明文字
          .overlay('Original', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })

        Image($r('app.media.girl'))
          // 设置图片的渲染模式为黑白
          .renderMode(ImageRenderMode.Template)
          .width(100)
          .height(100)
          .border({ width: 1 })
          .overlay('Template', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
      }
      .margin(20)
      .justifyContent(FlexAlign.Center)

      //通过sourceSize属性设置图片解码尺寸,降低图片的分辨率。
      Row({ space: 50 }) {
        Image($r('app.media.girl'))
          .sourceSize({
            width: 150,
            height:180
          })
          .objectFit(ImageFit.ScaleDown)
          .aspectRatio(1)
          .width('25%')
          .border({ width: 1 })
          .overlay('width:150 height:180', { align: Alignment.Bottom, offset: { x: 0, y: 40 } })

        Image($r('app.media.girl'))
          .sourceSize({
            width: 90,
            height:100
          })
          .objectFit(ImageFit.ScaleDown)
          .width('25%')
          .aspectRatio(1)
          .border({ width: 1 })
          .overlay('width:90 height:100', { align: Alignment.Bottom, offset: { x: 0, y: 40 } })

      }

      //通过colorFilter修改图片的像素颜色,为图片添加滤镜。
      Row({ space: 50 }) {
        Image($r('app.media.girl'))
          .width('25%')
          .margin(10)

        Image($r('app.media.girl'))
          .width('25%')
          .margin(10)
          .colorFilter(
            [1, 1, 0, 0, 0,
              0, 1, 0, 0, 0,
              0, 0, 1, 0, 0,
              0, 0, 0, 1, 0])

      }
      .margin(30)
      .justifyContent(FlexAlign.Center)



    }
    .width('100%')
    .height('100%')
  }
}
1)通过renderMode属性设置图片的渲染模式为原色或黑白
2)通过sourceSize属性设置图片解码尺寸,降低图片的分辨率
3)通过colorFilter修改图片的像素颜色,为图片添加滤镜

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐