鸿蒙自定义圆形组件

前言

DevEco Studio版本：4.0.0.600

使用效果

如何使用

参考文档：OpenHarmony Image组件使用

1、module创建

File-->New-->Module，选择Static Library

2、创建CircleImageView输出类

在CircleLibrary的Index.ets添加对外输出的引用

export { CircleImageView } from './src/main/ets/CircleImageView'

3、CircleImageView的详细代码

@Component
export struct CircleImageView {
   //图片的数据源
   private src: PixelMap | ResourceStr | DrawableDescriptor
   //圆形半径,单位是“px”
   private radius: number = 0
   //设置图片的填充效果
   private objectFit: ImageFit = ImageFit.Cover
   //设置图片的重复样式
   private objectRepeat: ImageRepeat = ImageRepeat.NoRepeat
   //设置图片的插值效果，即缓解图片在缩放时的锯齿问题
   private interpolation: ImageInterpolation = ImageInterpolation.None
   //设置图片的渲染模式为原色或黑白
   private renderMode: ImageRenderMode = ImageRenderMode.Original
   //设置图片是否跟随系统语言方向，在RTL语言环境下显示镜像翻转显示效果
   private matchTextDirection: boolean = false
   //图片组件尺寸未设置时，其显示尺寸是否跟随图源尺寸。
   private fitOriginalSize: boolean = false
   //设置边框宽度
   private border_Width: Length | EdgeWidths = "0"
   //设置边框颜色
   private border_Color: ResourceColor | EdgeColors = Color.White
   //图片加载异常时触发该回调
   private onError: (event) => void = () => {

   }
   //图片数据加载成功和解码成功时均触发该回调，返回成功加载的图片尺寸
   private onComplete: (event) => void = () => {

   }

   build() {
      Image(this.src)
         .objectFit(this.objectFit)
         .objectRepeat(this.objectRepeat)
         .interpolation(this.interpolation)
         .renderMode(this.renderMode)
         .matchTextDirection(this.matchTextDirection)
         .fitOriginalSize(this.fitOriginalSize)
         .width(`${this.radius * 2}px`)
         .height(`${this.radius * 2}px`)
         .onComplete((event?: {
            width: number,
            height: number,
            componentWidth: number,
            componentHeight: number,
            loadingStatus: number,
            contentWidth: number,
            contentHeight: number,
            contentOffsetX: number,
            contentOffsetY: number
         }) => {
            this.onComplete(event)
         })
         .onError((event?: {
            componentWidth: number,
            componentHeight: number,
            message: string
         }) => {
            this.onError(event)
         })
         .borderColor(this.border_Color)
         .borderWidth(this.border_Width)
         .borderRadius(`${this.radius}px`)
   }
}

4、在Entry中引用CircleImageView

上面的CircleImageLIbaray对外输出的har包自己导出，如何引用参考：静态Har共享包

import { CircleImageView } from "@app/CircleLibrary"

@Entry
@Component
struct Index {
   build() {
      Row() {
         Column() {
            CircleImageView({
               // src: $r("app.media.startIcon"),//本地图片资源
               src: "https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF",
               radius: 100,
               border_Width: "12px",
               border_Color: Color.Pink,
               onError: (event) => {

               },
               onComplete: (event) => {
                  console.info("加载完成！！！！！")
               }
            })
         }
         .width('100%')
      }
      .height('100%')
   }
}

通过官方提供的API实现

参考文档：OpenHarmony 形状裁剪

Image.clip()方法实现圆形效果

Stack()布局实现圆形图片外围的边框

注意点：Stack的宽高为Image的宽高+边框的宽度，例子中为：100+ 12 = 112

Stack() {
   Image($r("app.media.startIcon"))
      .height(100)
      .width(100)
      .objectFit(ImageFit.Cover)
      .clip(new Circle({ width: 100, height: 100 }))
}
.width(112)
.height(112)
.borderWidth(12)
.borderColor(Color.Pink)
.borderRadius(56)