1 Star 0 Fork 12

zp_star / CircleImageView

加入 Gitee
与超过 1000 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

CircleImageView

简介

CircleImageView是一个方便的将图片裁剪成圆形,也可以给图片设置边框

下载安装

npm install @ohos/circleimageview --save

OpenHarmony npm环境配置等更多内容,请参考 如何安装OpenHarmony npm包

使用说明

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)
            }.editable(false).height('50%').width('100%')

            ListItem() {
              Column({ space: 5 }) {
                CircleImageView({model:$data})
              }.align(Alignment.Center)
            }.editable(false).height('50%').backgroundColor(0x000000).width('100%')
      }
    .width('100%').margin({ top: 5 })
    }
  }

接口说明

@State data: CircleImageView.Model = new CircleImageView.Model()

  1. 设置图片路径 this.data.setImageURI()
  2. 设置设置裁剪大小 this.data.setDiameter()
  3. 设置边框宽度 this.data.setBorderWidth()
  4. 设置边框颜色 this.data.setBorderColor()

兼容性

支持 OpenHarmony API version 8 及以上版本。

目录结构

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

贡献代码

使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR

开源协议

本项目基于 Apache License 2.0 ,请自由地享受和参与开源。

简介

暂无描述 展开 收起
Apache-2.0
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/zpzpzpzp/CircleImageView.git
git@gitee.com:zpzpzpzp/CircleImageView.git
zpzpzpzp
CircleImageView
CircleImageView
master

搜索帮助