# CircleImageView

**Repository Path**: openharmony-sig/CircleImageView

## Basic Information

- **Project Name**: CircleImageView
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 16
- **Created**: 2022-04-16
- **Last Updated**: 2025-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CircleImageView

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

<img src="./image/circle.png"/>

## 下载安装
```shell
ohpm  install @ohos/circleimageview
```
OpenHarmony ohpm 环境配置等更多内容，请参考 [如何安装OpenHarmony ohpm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md).
## 使用说明

### 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 })
    }
  }
```

## 接口说明
`@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()`
13. 

## 约束与限制

在下述版本验证通过：

- 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  # 安装使用方法                    
````

## 贡献代码
使用过程中发现任何问题都可以提 [Issue](https://gitee.com/openharmony-sig/CircleImageView/issues) 给组件，当然，也非常欢迎发 [PR](https://gitee.com/openharmony-sig/CircleImageView/pulls) 共建。

## 开源协议
本项目基于 [Apache License 2.0](https://gitee.com/openharmony-sig/CircleImageView/blob/master/LICENSE) ，请自由地享受和参与开源。