From b1730b39d1c40b6f81ba811a4a7c29fc172eac68 Mon Sep 17 00:00:00 2001 From: liuhaikang Date: Sat, 21 Sep 2024 18:05:15 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=8B=B1=E6=96=87=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: liuhaikang --- README.md | 85 +++++++++++++++++++++++++-------------------- README_zh.md | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 146 insertions(+), 37 deletions(-) create mode 100644 README_zh.md diff --git a/README.md b/README.md index 70d7e6b..e44283d 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,18 @@ # CircleImageView -## 简介 -> CircleImageView是一个图片处理的库，可以将图片裁剪为圆形或者给图片设置边框。 +## Introduction +> CircleImageView is an image processing library that enables you to crop an image into a circle or set a border for an image. -## 下载安装 +## How to Install ```shell ohpm install @ohos/circleimageview ``` -OpenHarmony ohpm 环境配置等更多内容，请参考 [如何安装OpenHarmony ohpm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md). -## 使用说明 +For details about the OpenHarmony ohpm environment configuration, see [OpenHarmony HAR](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.en.md). +## How to Use -### CircleImageView引用及使用 +### Importing and Using CircleImageView ``` import { CircleImageView } from '@ohos/circleimageview'; @@ -41,58 +41,69 @@ import { CircleImageView } from '@ohos/circleimageview'; } ``` -## 接口说明 +## Available APIs `@State data: CircleImageView.Model = new CircleImageView.Model()` -1. 设置图片路径(该URI只能是rawfile目录下的图片资源) +1. Sets an image URI. The URI must pointer to an image resource in the **rawfile** directory. + `this.data.setImageURI()` -2. 设置设置裁剪大小 +2. Sets the cropped image size. + `this.data.setDiameter()` -3. 设置边框宽度 +3. Sets the border width. + `this.data.setBorderWidth()` -4. 设置边框颜色 +4. Sets the border color. + `this.data.setBorderColor()` -5. 获取图片路径 +5. Obtains the image URI. + `this.data.getImageURI()` -6. 设置设置裁剪大小 +6. Obtains the cropped image size. + `this.data.getDiameter()` -7. 设置图片缩放类型 +7. Sets the scale type of the image. + `this.data.setScaleType()` -8. 获取图片缩放类型 +8. Obtains the scale type of the image. + `this.data.getScaleType()` -9. 设置是否禁用图片圆形属性 +9. Sets whether to disable circular transformation for the image. + `this.data.setDisableCircularTransformation()` -10. 获取是否禁用图片圆形属性 - `this,data.isDisableCircularTransformation()` -11. 设置圆背景颜色 - `this.data.setCircleBackgroundColor()` -12. 获取圆背景颜色 - `this.data.getCircleBackgroundColor()` -13. +10. Obtains whether circular transformation is disabled for the image. + + `this,data.isDisableCircularTransformation()` +11. Sets the background color of the circle. + + `this.data.setCircleBackgroundColor()` +12. Obtains the background color of the circle. -## 约束与限制 + `this.data.getCircleBackgroundColor()` -在下述版本验证通过： -- DevEco Studio NEXT Developer Beta3: 5.0(5.0.3.530), SDK: API12 (5.0.0.35(SP3)) +## Constraints -## 目录结构 +This project has been verified in the following version: + +- DevEco Studio NEXT Developer Beta3: 5.0 (5.0.3.530), SDK: API 12 (5.0.0.35(SP3)) + +## Directory Structure ```` |---- CircleImageView -| |---- entry # 示例代码文件夹 -| |---- library # CircleImageView库文件夹 +| |---- entry # Sample code +| |---- library # CircleImageView library | | | └─src | | | │---└─main | | | |---- └─ets | | | │---- └──components | | | │---- └──MainPage -| | | │---- CircleImageView.ets #自定义图片裁剪 -| |---- index.ets # 对外接口 -| |---- README.md # 安装使用方法 +| | | │---- CircleImageView.ets # Custom image cropping +| |---- index.ets # External APIs +| |---- README.md # Readme ```` -## 贡献代码 -使用过程中发现任何问题都可以提 [Issue](https://gitee.com/openharmony-sig/CircleImageView/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/openharmony-sig/CircleImageView/pulls) 。 - -## 开源协议 -本项目基于 [Apache License 2.0](https://gitee.com/openharmony-sig/CircleImageView/blob/master/LICENSE) ，请自由地享受和参与开源。 +## How to Contribute +If you find any problem when using the project, submit an [issue](https://gitee.com/openharmony-sig/CircleImageView/issues) or a [PR](https://gitee.com/openharmony-sig/CircleImageView/pulls). +## License +This project is licensed under [Apache License 2.0](https://gitee.com/openharmony-sig/CircleImageView/blob/master/LICENSE). diff --git a/README_zh.md b/README_zh.md new file mode 100644 index 0000000..c6eea78 --- /dev/null +++ b/README_zh.md @@ -0,0 +1,98 @@ +# CircleImageView + +## 简介 +> CircleImageView是一个图片处理的库，可以将图片裁剪为圆形或者给图片设置边框。 + + + +## 下载安装 +```shell +ohpm install @ohos/circleimageview +``` +OpenHarmony ohpm 环境配置等更多内容，请参考 [如何安装OpenHarmony ohpm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md). +## 使用说明 + +### 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()` +13. + +## 约束与限制 + +在下述版本验证通过： + +- DevEco Studio NEXT Developer Beta3: 5.0(5.0.3.530), SDK: API12 (5.0.0.35(SP3)) + +## 目录结构 +```` +|---- CircleImageView +| |---- entry # 示例代码文件夹 +| |---- library # CircleImageView库文件夹 +| | | └─src +| | | │---└─main +| | | |---- └─ets +| | | │---- └──components +| | | │---- └──MainPage +| | | │---- CircleImageView.ets #自定义图片裁剪 +| |---- index.ets # 对外接口 +| |---- README_zh.md # 安装使用方法 +```` + +## 贡献代码 +使用过程中发现任何问题都可以提 [Issue](https://gitee.com/openharmony-sig/CircleImageView/issues) 给组件，当然，也非常欢迎发 [PR](https://gitee.com/openharmony-sig/CircleImageView/pulls) 共建。 + +## 开源协议 +本项目基于 [Apache License 2.0](https://gitee.com/openharmony-sig/CircleImageView/blob/master/LICENSE) ，请自由地享受和参与开源。 + -- Gitee