代码拉取完成,页面将自动刷新
CircleImageView是一个图片处理的库,可以将图片裁剪为圆形或者给图片设置边框。
npm install @ohos/circleimageview --save
OpenHarmony npm环境配置等更多内容,请参考 如何安装OpenHarmony npm包 。
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()
this.data.setImageURI()
this.data.setDiameter()
this.data.setBorderWidth()
this.data.setBorderColor()
|---- CircleImageView
| |---- entry # 示例代码文件夹
| |---- circleimageview # CircleImageView库文件夹
| | | └─src
| | | │---└─main
| | | |---- └─ets
| | | │---- └──components
| | | │---- └──MainPage
| | | │---- CircleImageView.ets #自定义图片裁剪
| |---- index.ets # 对外接口
| |---- README.md # 安装使用方法
使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR 。
本项目基于 Apache License 2.0 ,请自由地享受和参与开源。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。