HarmonyOS：形状裁剪（clipShape）

一、简介

可利用clipShape接口将组件裁剪为所需的形状。调用该接口后，可以保留该形状覆盖的组件部分，同时移除组件的其余部分。裁剪形状本身是不可见的。
说明 不同的形状支持的属性范围不同，路径是一种形状，除此之外还有椭圆、矩形等形状。
路径的形状不支持设置宽度和高度，具体形状支持的属性参考具体形状的文档。
形状中的fill属性对clipShape接口不生效。

二、裁剪圆形

通过设置CircleShape，将图片裁剪为圆形。 效果图

示例代码

import { CircleShape } from '@kit.ArkUI'

@Entry
@Component
struct TestClipShape {
  @State message: string = 'Hello World';

  build() {
    Column({ space: 20 }) {
      //原图
      Image($r('app.media.mount'))
        .width('100%')

      // 用一个280px直径的圆对图片进行裁剪
      Image($r('app.media.mount'))
        .clipShape(new CircleShape({ width: '280px', height: '280px' }))
        .width('500px').height('280px')

      // 用一个350px直径的圆对图片进行裁剪
      Image($r('app.media.mount'))
        .clipShape(new CircleShape({ width: '350px', height: '350px' }))
        .width('500px').height('370px')
    }
    .height('100%')
    .width('100%')
    .padding({ top: 50 })
  }
}

三、裁剪椭圆形

通过设置EllipseShape，将图片裁剪为椭圆形。 效果图

示例代码

import { CircleShape, EllipseShape } from '@kit.ArkUI'

@Entry
@Component
struct TestClipShape {
  @State message: string = 'Hello World';

  build() {
    Scroll() {
      Column({ space: 20 }) {
        //原图
        Image($r('app.media.mount'))
          .width('100%')

        Text('通过设置EllipseShape，将图片裁剪为椭圆形').fontSize(16).fontColor(Color.Black)
        Row({ space: 20 }) {
          // 用一个280px直径的圆对图片进行裁剪
          Image($r('app.media.mount'))
            .clipShape(new CircleShape({ width: '280px', height: '280px' }))
            .width('500px').height('280px')

          // 用一个350px直径的圆对图片进行裁剪
          Image($r('app.media.mount'))
            .clipShape(new CircleShape({ width: '350px', height: '350px' }))
            .width('500px').height('370px')
        }

        Text('通过设置EllipseShape，将图片裁剪为椭圆形').fontSize(16).fontColor(Color.Black)
        Row({ space: 20 }) {
          Image($r('app.media.background'))
            .clipShape(new EllipseShape({ width: '280px', height: '200px' }))
            .width('500px').height('400px')

          Image($r('app.media.background'))
            .clipShape(new EllipseShape({ width: '380px', height: '280px' }))
            .width('500px').height('400px')
        }
      }
      .width('100%')
    }
    .height('100%')
    .width('100%')

  }
}

四、裁剪矩形

通过设置RectShape，将图片裁剪为矩形。 效果图

示例代码

import { CircleShape, EllipseShape, RectShape } from '@kit.ArkUI'

@Entry
@Component
struct TestClipShape {
  @State message: string = 'Hello World';

  build() {
    Scroll() {
      Column({ space: 20 }) {
        //原图
        Image($r('app.media.mount'))
          .width('100%')

        Text('通过设置EllipseShape，将图片裁剪为椭圆形').fontSize(16).fontColor(Color.Black)
        Row({ space: 20 }) {
          // 用一个280px直径的圆对图片进行裁剪
          Image($r('app.media.mount'))
            .clipShape(new CircleShape({ width: '280px', height: '280px' }))
            .width('500px').height('280px')

          // 用一个350px直径的圆对图片进行裁剪
          Image($r('app.media.mount'))
            .clipShape(new CircleShape({ width: '350px', height: '350px' }))
            .width('500px').height('370px')
        }

        Text('通过设置EllipseShape，将图片裁剪为椭圆形').fontSize(16).fontColor(Color.Black)
        Row({ space: 20 }) {
          Image($r('app.media.background'))
            .clipShape(new EllipseShape({ width: '280px', height: '200px' }))
            .width('500px').height('400px')

          Image($r('app.media.background'))
            .clipShape(new EllipseShape({ width: '380px', height: '280px' }))
            .width('500px').height('400px')
        }

        Text('通过设置RectShape，将图片裁剪为矩形').fontSize(16).fontColor(Color.Black)
        Row({ space: 20 }) {
          Image($r('app.media.background'))
            .clipShape(new RectShape({ width: '200px', height: '200px' }))
            .width('500px').height('400px')

          Image($r('app.media.background'))
            .clipShape(new RectShape({ width: '380px', height: '280px' }))
            .width('500px').height('400px')
        }

      }
      .width('100%')
    }
    .height('100%')
    .width('100%')

  }
}

五、裁剪不规则形状

通过设置PathShape，将图片裁剪为不规则形状。 效果图

示例代码

import { CircleShape, EllipseShape, PathShape, RectShape } from '@kit.ArkUI'

@Entry
@Component
struct TestClipShape {
  @State message: string = 'Hello World';

  build() {
    Scroll() {
      Column({ space: 20 }) {
        //原图
        Image($r('app.media.mount'))
          .width('100%')

        Text('通过设置EllipseShape，将图片裁剪为椭圆形').fontSize(16).fontColor(Color.Black)
        Row({ space: 20 }) {
          // 用一个280px直径的圆对图片进行裁剪
          Image($r('app.media.mount'))
            .clipShape(new CircleShape({ width: '280px', height: '280px' }))
            .width('500px').height('280px')

          // 用一个350px直径的圆对图片进行裁剪
          Image($r('app.media.mount'))
            .clipShape(new CircleShape({ width: '350px', height: '350px' }))
            .width('500px').height('370px')
        }

        Text('通过设置EllipseShape，将图片裁剪为椭圆形').fontSize(16).fontColor(Color.Black)
        Row({ space: 20 }) {
          Image($r('app.media.background'))
            .clipShape(new EllipseShape({ width: '280px', height: '200px' }))
            .width('500px').height('400px')

          Image($r('app.media.background'))
            .clipShape(new EllipseShape({ width: '380px', height: '280px' }))
            .width('500px').height('400px')
        }

        Text('通过设置RectShape，将图片裁剪为矩形').fontSize(16).fontColor(Color.Black)
        Row({ space: 20 }) {
          Image($r('app.media.background'))
            .clipShape(new RectShape({ width: '200px', height: '200px' }))
            .width('500px').height('400px')

          Image($r('app.media.background'))
            .clipShape(new RectShape({ width: '380px', height: '280px' }))
            .width('500px').height('400px')
        }

        Text('通过设置PathShape，将图片裁剪为不规则形状').fontSize(16).fontColor(Color.Black)
        Row() {
          Image($r('app.media.background'))
            .clipShape(new PathShape({ commands: 'M0 0 H400 V200 H0 Z' }))
            .width('500px').height('300px')
        }
        .clip(true)
        .borderRadius(20)

      }
      .width('100%')
    }
    .height('100%')
    .width('100%')

  }
}