OpenHarmony 实战开发——图片裁剪CircleImageView

简介

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

下载安装

ohpm  install @ohos/circleimageview

OpenHarmony ohpm 环境配置等更多内容，请参考 如何安装OpenHarmony ohpm包.

使用说明

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()

约束与限制

在下述版本验证通过：

• DevEco Studio 版本： 4.1 Canary(4.1.3.317)

• OpenHarmony SDK:API11 (4.1.0.36)

目录结构

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

为了帮助到大家能够更有效的学习OpenHarmony 开发的内容，下面特别准备了一些相关的参考学习资料：

OpenHarmony 开发环境搭建：https://qr18.cn/CgxrRy

《OpenHarmony源码解析》：https://qr18.cn/CgxrRy

• 搭建开发环境
• Windows 开发环境的搭建
• Ubuntu 开发环境搭建
• Linux 与 Windows 之间的文件共享
• ……

系统架构分析：https://qr18.cn/CgxrRy

• 构建子系统
• 启动流程
• 子系统
• 分布式任务调度子系统
• 分布式通信子系统
• 驱动子系统
• ……

OpenHarmony 设备开发学习手册：https://qr18.cn/CgxrRy

OpenHarmony面试题（内含参考答案）：https://qr18.cn/CgxrRy