# RoundedImageView

**Repository Path**: caolang304/RoundedImageView

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 19
- **Created**: 2022-05-20
- **Last Updated**: 2022-05-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# RoundedImageView

## 简介
RoundedImageView支持圆角（和椭圆或圆形）的快速 ImageView。它支持许多附加功能，包括椭圆、圆角矩形、ScaleTypes 和 TileModes。

## 效果展示：

<img src="./image/imageview.gif"/>

## 安装教程

1. 参考安装教程 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md)
2. 安装命令如下：
 ```
 npm install @ohos/RoundedImageView --save
 ```

## 使用说明

提供多种PictureItem、BackgroundItem、OvalPictureItem实例用于构造数据，使用方法类似。

1、初始化：实例化dialogController和对应的RoundedImageView.Model 对象, 并添加numberarr类型成员以记录当前页下标。dialogController为构造的弹框下拉列表。

 ```
 @State datas: RoundedImageView.Model []  = [
    new RoundedImageView.Model(), new RoundedImageView.Model(), new RoundedImageView.Model(),
    new RoundedImageView.Model(), new RoundedImageView.Model(), new RoundedImageView.Model(),
    new RoundedImageView.Model(), new RoundedImageView.Model(), new RoundedImageView.Model(),
    new RoundedImageView.Model()];
  dialogController: CustomDialogController = new CustomDialogController({
    alignment: DialogAlignment.Top,
    builder: CustomDialogExample({
      cancel: this.onCancel,
      confirm: this.onAccept,
      type_value: $type_value,
      typeArr: this.typeArr
    }),
    cancel: this.existApp,
    autoCancel: true
  })
 ```

2、属性设置：通过Model类对象设置UI属性来自定义所需风格，也可以添加所需的回调。

 ```
  private aboutToAppear() {
    this.numberarr.forEach((val, idx) => {
      this.datas[idx]
        .setImageURI(this.pictures[idx].src)
        .setCornerRadius(25)
        .setScaleType(this.pictures[idx].fit)
        .setTileModeXY(this.pictures[idx].repeat)
        .setHeight(200)
        .setWidth(this.pictures[idx].picWidth)
        .setMargin(this.pictures[idx].margin)
    });
  }
 ```

3、界面绘制：界面顶部为类型选择内容。并监听type_value内容的变化，以重新构建Model
，通知给Model类。Scroll中使用list布局放置图片。
 ```
 build() {
    Column() {
      Column() {
        Text('select:' + this.type_value).fontSize(25)
        Image($rawfile('down.png')).width(25).height(25).position({ x: 225, y: 10 }).onClick((event: ClickEvent) => {
          this.typeArr = ['Bitmap', 'Ovals', 'Picasso', 'Color', 'Background']
          this.dialogController.open()
        })
      }.margin(15)

      Scroll(this.scroller) {
        List({ space: 10, initialIndex: 0 }) {
          if (this.type_value.indexOf('Bitmap') == 0) {
            ForEach(this.numberarr, (item) => {
              ListItem() {
                Column({ space: 5 }) {
                  RoundedImageView({ model: this.datas[item] })
                  Text(this.pictures[item].primaryTitle).buildPrimaryTitle()
                  Text(this.pictures[item].secondTitle).buildSecondTitle()
                  Text(this.pictures[item].scaleType).buildScaleType()
                }.width('100%')
                .direction(Direction.Rtl)
              }.editable(this.editFlag)
            }, item => item)

          } ...

          ListItem() {
            Column({ space: 5 }) {
              Column() {
                Text('   ').fontSize(30)
              }.margin(15)
            }.width('100%')
            .direction(Direction.Ltr)
          }.editable(this.editFlag)
        }
        .editMode(true)
        .onItemDelete((index: number) => {
          this.arr.splice(index - 1, 1)
          this.editFlag = false
          return true
        }).width('90%')
      }
      .scrollable(ScrollDirection.Vertical).scrollBar(BarState.Off)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
    .direction(Direction.Ltr)
  }
 ```

更多详细用法请参考开源库sample页面的实现

## 接口说明

`let data: RoundedImageView.Model  = new RoundedImageView.Model();`
1. 设置图片路径
   `data.setImageURI(value: string)`
2. 设置角半径
    `data.setCornerRadius(value: number)`
3. 设置图片缩放类型
   `data.setScaleType(value: ImageFit)`
4. 设置图片的重复样式
   `data.setTileModeXY(value: ImageRepeat)`
5. 设置图片宽度
   `data.setWidth(value: number)`
6. 设置背景颜色
   `data.setBackgroundColor(value: number)`
7. 设置裁剪椭圆对象
   `data.setOval(value: number)`

## 兼容性

支持OpenHarmony  API version 8 及以上版本

## 目录结构

 ```
|---- RoundedImageView
|     |---- entry                       # 示例代码文件夹
|     |---- RoundedImageView            # RoundedImageView库文件夹
|           |---- src     
|                   |---- main 
|                           |---- ets 
|                                   |---- components
|                                             |---- common    
|                                                      |---- RoundedImageView.ets  # 库的核心实现
|     |---- README.MD                   # 安装使用方法  
 ```

## 贡献代码

使用过程中发现任何问题都可以提 [Issue](https://gitee.com/openharmony-sig/RoundedImageView/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/openharmony-sig/RoundedImageView/pulls) 。

## 开源协议

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