OpenHarmony 图片裁剪—CircleImageView

2024-09-27 17:54:11 浏览数 (3)

简介

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

下载安装

代码语言：shell复制
ohpm  install @ohos/circleimageview

使用说明

CircleImageView引用及使用

代码语言：ts复制
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()

约束与限制

在下述版本验证通过：

  • DevEco Studio 版本： 4.1 Canary(4.1.3.317)
  • OpenHarmony SDK:API11 (4.1.0.36)

目录结构

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

写在最后

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：