# 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

## Introduction
> CircleImageView is an image processing library that enables you to crop an image into a circle or set a border for an image.

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

## How to Install
```shell
ohpm  install @ohos/circleimageview
```
For details about the OpenHarmony ohpm environment configuration, see [OpenHarmony HAR](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.en.md).
## How to Use

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

## Available APIs
`@State data: CircleImageView.Model = new CircleImageView.Model()`
1. Sets an image URI. The URI must pointer to an image resource in the **rawfile** directory.

   `this.data.setImageURI()`
2. Sets the cropped image size.

   `this.data.setDiameter()`
3. Sets the border width.

   `this.data.setBorderWidth()`
4. Sets the border color.

   `this.data.setBorderColor()`
5. Obtains the image URI.

   `this.data.getImageURI()`
6. Obtains the cropped image size.

   `this.data.getDiameter()`
7. Sets the scale type of the image.

   `this.data.setScaleType()`
8. Obtains the scale type of the image.

   `this.data.getScaleType()`
9. Sets whether to disable circular transformation for the image.

   `this.data.setDisableCircularTransformation()`
10. Obtains whether circular transformation is disabled for the image.

      `this,data.isDisableCircularTransformation()`
11. Sets the background color of the circle.

      `this.data.setCircleBackgroundColor()`
12. Obtains the background color of the circle.

      `this.data.getCircleBackgroundColor()`


## Constraints

This project has been verified in the following version:

- DevEco Studio NEXT Developer Beta3: 5.0 (5.0.3.530), SDK: API 12 (5.0.0.35(SP3))

## Directory Structure
````
|---- CircleImageView
|     |---- entry  # Sample code
|     |---- library  # CircleImageView library
|     |     |      └─src
|     |     |      │---└─main  
|     |     |      |----   └─ets
|     |     |      │----      └──components  
|     |     |      │----             └──MainPage 
|     |     |      │----                  CircleImageView.ets # Custom image cropping
|     |---- index.ets  # External APIs
|     |---- README.md  # Readme                   
````

## How to Contribute
If you find any problem when using the project, submit an [issue](https://gitee.com/openharmony-sig/CircleImageView/issues) or a [PR](https://gitee.com/openharmony-sig/CircleImageView/pulls).

## License
This project is licensed under [Apache License 2.0](https://gitee.com/openharmony-sig/CircleImageView/blob/master/LICENSE).