【OpenHarmony】图片处理库：CircleImageView

简介

CircleImageView是一个图片处理的库，可以将图片裁剪为圆形或者给图片设置边框。

下载安装

ohpm  install @ohos/circleimageview

使用说明

CircleImageView引用及使用

import { CircleImageView } from '@ohos/circleimageview';

  aboutToAppear() {
    this.data.setImageURI('hugh.png').setDiameter(200).setBorderWidth(5)
      .setBorderColor(Color.White).setDisableCircularTransformation(true)
  }

  build() {
    Column() {
          List({ space: 10, initialIndex: 0 }) {
            ListItem() {
              Column() {
                CircleImageView({model:$data})
              }.align(Alignment.Center).width(200).height(200)
            }.height('50%').width('100%')

            ListItem() {
              Column({ space: 5 }) {
                CircleImageView({model:$data})
              }.align(Alignment.Center)
            }.height('50%').backgroundColor(0x000000).width('100%')
      }
    .width('100%').margin({ top: 5 })
    }
  }

DD一下：欢迎大家关注工粽号<程序猿百晓生>，可以了解到以下知识点。

`欢迎大家关注工粽号<程序猿百晓生>，可以了解到以下知识点。`
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

接口说明

@State data: CircleImageView.Model = new CircleImageView.Model()

1. 设置图片路径(该URI只能是rawfile目录下的图片资源) this.data.setImageURI()
2. 设置设置裁剪大小 this.data.setDiameter()
3. 设置边框宽度 this.data.setBorderWidth()
4. 设置边框颜色 this.data.setBorderColor()
5. 获取图片路径 this.data.getImageURI()
6. 设置设置裁剪大小 this.data.getDiameter()
7. 设置图片缩放类型 this.data.setScaleType()
8. 获取图片缩放类型 this.data.getScaleType()
9. 设置是否禁用图片圆形属性 this.data.setDisableCircularTransformation()
10. 获取是否禁用图片圆形属性 this,data.isDisableCircularTransformation()
11. 设置圆背景颜色 this.data.setCircleBackgroundColor()
12. 获取圆背景颜色 this.data.getCircleBackgroundColor()

约束与限制

在下述版本验证通过：

• DevEco Studio NEXT Developer Beta3: 5.0(5.0.3.530), SDK: API12 (5.0.0.35(SP3))

目录结构

|---- CircleImageView
|     |---- entry  # 示例代码文件夹
|     |---- library  # CircleImageView库文件夹
|     |     |      └─src
|     |     |      │---└─main  
|     |     |      |----   └─ets
|     |     |      │----      └──components  
|     |     |      │----             └──MainPage 
|     |     |      │----                  CircleImageView.ets #自定义图片裁剪
|     |---- index.ets  # 对外接口
|     |---- README_zh.md  # 安装使用方法