diff --git a/README.md b/README.md
index 0bec28340dfee81a42582b2f00d610d463d6ccdc..921c0521eb6763a3ca5068b2de816e7efa6871c5 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,9 @@
# RoundedImageView
-## 简介
-RoundedImageView支持圆角（和椭圆或圆形）的快速 ImageView。它支持许多附加功能，包括椭圆、圆角矩形、ScaleTypes 和 TileModes。
+## Introduction
+RoundedImageView is a versatile ImageView that supports rounded corners, ovals, or circles. It offers numerous additional features such as rounded rectangles, ScaleTypes, and TileModes.
-## 效果展示：
+## Effect
@@ -15,24 +15,24 @@ RoundedImageView支持圆角（和椭圆或圆形）的快速 ImageView。它支
-## 安装教程
+## How to Install
```
ohpm install @ohos/roundedimageview
```
-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
-1. 在page页面引入包
+1. Import RoundedImageView on the target page.
```
import { RoundedImageView, ScaleType, TileMode, SrcType, FileUtils } from '@ohos/roundedimageview/'
```
-2. 创建多种PictureItem实例用于构造数据，使用方法类似
+2. Create multiple **PictureItem** instances for constructing data, with similar usage methods.
-3. 初始化：实例化dialogController和对应的RoundedImageView.Model对象，并添加typeArr类型以标记当前页页面类型
+3. Initialization: Instantiate **dialogController** and the corresponding **RoundedImageView.Model** objects, and add **typeArr** types to mark the current page type.
```
dialogController: CustomDialogController = new CustomDialogController({
@@ -48,7 +48,7 @@ OpenHarmony ohpm 环境配置等更多内容，请参考[如何安装 OpenHarmon
}
```
-4. 属性设置：通过Model类对象设置UI属性来自定义所需风格
+4. Set UI properties through a **Model** object to define the required style.
```
private updateViewModels(pictureItem: PictureItem[]) {
@@ -73,7 +73,7 @@ OpenHarmony ohpm 环境配置等更多内容，请参考[如何安装 OpenHarmon
}
```
-5. 界面绘制：界面顶部为类型选择内容，并监听type_value内容的变化，以重新构建Model，通知给Model类，Scroll中使用list布局放置图片。
+5. Draw the UI as follows: Place the type selection content at the top, and listen for changes in **type_value** to rebuild the **Model** object and notify the **Model** class. Use a list layout within **Scroll** to place images.
```
build() {
@@ -106,81 +106,80 @@ OpenHarmony ohpm 环境配置等更多内容，请参考[如何安装 OpenHarmon
}
```
-更多详细用法请参考开源库sample页面的实现
+For details, see the implementation on the sample page of the RoundedImageView library.
-## 接口说明
+## Available APIs
`let data: RoundedImageView.Model = new RoundedImageView.Model();`
-1. 设置图片路径
+1. Sets the image path.
`data.setImageSrc(src: string | Resource | ArrayBuffer)`
-2. 设置图片类型
+2. Sets the image type.
`data.setSrcType(srcType: SrcType)`
-3. 设置图片缩放类型
+3. Sets the scale type of the image.
`data.setScaleType(scaleType: ScaleType)`
-4. 设置图片的重复样式
+4. Sets how the image is repeated.
`data.setTileModeXY(value: TileMode)`
-5. 设置角半径
+5. Sets the corner radius.
`data.setCornerRadius(cornerRadius: number)`
-6. 设置图片显示的宽度
+6. Sets the width of the image.
`data.setWidth(width: number)`
-7. 设置图片显示的高度
+7. Sets the height of the image.
`data.setHeight(height: number)`
-8. 设置边框线宽
+8. Sets the border width.
`data.setBorderWidth(borderWidth: number)`
-9. 设置背景颜色
+9. Sets the background color.
`data.setBackgroundColor(value: string | CanvasGradient | CanvasPattern)`
-10. 设置当前场景上下文context
+10. Sets the context.
`data.setContext(context:common.UIAbilityContext)`
-## 约束与限制
-在下述版本验证通过：
+## Constraints
+This project has been verified in the following versions:
-- DevEco Studio: NEXT Beta1-5.0.3.806,SDK:API12 Release(5.0.0.66)
+- DevEco Studio: NEXT Beta1-5.0.3.806, SDK: API 12 Release (5.0.0.66)
-HSP场景适配:
+HSP adaptation:
-RoundedImageView.Model配置类新增`setContext(context:common.UIAbilityContext)`接口, 在HSP场景下需要传入正确的context, 才能保证三方库后续正确获取Resource资源。
+When calling the **setContext(context:common.UIAbilityContext)** API in **RoundedImageView.Model** for an HSP, you must pass the correct context to ensure that third-party libraries can subsequently access the resources correctly.
-非HSP场景不影响原功能, context可以不传。
+This context can be omitted for non-HSP scenarios.
-## 目录结构
+## Directory Structure
```
|---- RoundedImageView
-| |---- entry # 示例代码文件夹
-| |---- library # RoundedImageView库文件夹
+| |---- entry # Sample code
+| |---- library # RoundedImageView library
| |---- src
| |---- main
| |---- ets
| |---- components
-| |---- DownloadUtils.ts # 图片下载工具类
-| |---- FileUtils.ts # 文件操作工具类
-| |---- PixelMapUtils.ts # PixelMap工具类
-| |---- RoundedImageView.ets # 库的核心实现
-| |---- ScaleType.ts # ScaleType枚举
-| |---- SrcType.ts # SrcType枚举
-| |---- TileMode.ts # TileMode枚举
-| |---- GlobalContext.ts # GlobalContext替代globalThis
-| |---- README.md # 安装使用方法
+| |---- DownloadUtils.ts # Image download utility
+| |---- FileUtils.ts # File operation utility
+| |---- PixelMapUtils.ts # PixelMap utility
+| |---- RoundedImageView.ets # Core implementation of the library
+| |---- ScaleType.ts # ScaleType enumeration
+| |---- SrcType.ts # SrcType enumeration
+| |---- TileMode.ts # TileMode enumeration
+| |---- GlobalContext.ts # GlobalContext as a substitute for globalThis
+| |---- README.md # Readme
```
-## 贡献代码
+## How to Contribute
-使用过程中发现任何问题都可以提 [Issue](https://gitee.com/openharmony-sig/RoundedImageView/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/openharmony-sig/RoundedImageView/pulls) 。
+If you find any problem when using the project, submit an [issue](https://gitee.com/openharmony-sig/RoundedImageView/issues) or a [PR](https://gitee.com/openharmony-sig/RoundedImageView/pulls).
-## 开源协议
-
-本项目基于 [Apache License 2.0](https://gitee.com/openharmony-sig/RoundedImageView/blob/master/LICENSE) ，请自由地享受和参与开源。
+## License
+This project is licensed under [Apache License 2.0](./LICENSE).
diff --git a/README_zh.md b/README_zh.md
new file mode 100644
index 0000000000000000000000000000000000000000..ab04224c5ddc50f4e1c9a0c6982e1eae01eb7689
--- /dev/null
+++ b/README_zh.md
@@ -0,0 +1,187 @@
+# RoundedImageView
+
+## 简介
+RoundedImageView支持圆角（和椭圆或圆形）的快速 ImageView。它支持许多附加功能，包括椭圆、圆角矩形、ScaleTypes 和 TileModes。
+
+## 效果展示：
+
+
+
+
+
+
+
+
+
+
+
+## 安装教程
+
+ ```
+ ohpm install @ohos/roundedimageview
+ ```
+对于OpenHarmony ohpm环境配置的详细信息，请参阅[OpenHarmony环境配置指南](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md)。
+
+## 使用说明
+
+1. 在page页面引入包
+
+ ```
+ import { RoundedImageView, ScaleType, TileMode, SrcType, FileUtils } from '@ohos/roundedimageview/'
+ ```
+
+2. 创建多种PictureItem实例用于构造数据，使用方法类似
+
+3. 初始化：实例化dialogController和对应的RoundedImageView.Model对象，并添加typeArr类型以标记当前页页面类型
+
+ ```
+ dialogController: CustomDialogController = new CustomDialogController({
+ alignment: DialogAlignment.Top,
+ builder: TypeCustomDialog({ typeValue: $typeValue }),
+ autoCancel: true
+ })
+ private initViewModels(): void {
+ let viewModelsLength = Math.max(this.picIdxArr.length, this.colorIdxArr.length)
+ for (var index = 0; index < viewModelsLength; index++) {
+ this.viewModels.push(new RoundedImageView.Model)
+ }
+ }
+ ```
+
+4. 属性设置：通过Model类对象设置UI属性来自定义所需风格
+
+ ```
+ private updateViewModels(pictureItem: PictureItem[]) {
+ pictureItem.forEach((val, idx) => {
+ this.viewModels[idx]
+ .setImageSrc(pictureItem[idx].src)
+ .setBackgroundColor(pictureItem[idx].backgroundColor)
+ .setSrcType(pictureItem[idx].srcType)
+ .setIsSvg(pictureItem[idx].isSvg)
+ .setTypeValue(this.typeValue)
+ .setUiWidth(pictureItem[idx].uiWidth)
+ .setUiHeight(pictureItem[idx].uiHeight)
+ .setScaleType(pictureItem[idx].scaleType)
+ .setTileModeXY(pictureItem[idx].tileMode)
+ .setCornerRadius(pictureItem[idx].cornerRadius)
+ .setBorderWidth(pictureItem[idx].borderWidth)
+ .setBorderColor(pictureItem[idx].borderColor)
+ .setPadding(pictureItem[idx].padding)
+ .setColorWidth(this.uiHeight)
+ .setColorHeight(this.uiHeight)
+ });
+ }
+ ```
+
+5. 界面绘制：界面顶部为类型选择内容，并监听type_value内容的变化，以重新构建Model，通知给Model类，Scroll中使用list布局放置图片。
+
+ ```
+ build() {
+ Column() {
+ Column() {
+ Image($r('app.media.down')).width(30).height(30).position({ x: -30, y: 5 }).onClick(() => {
+ this.dialogController.open()
+ })
+ Text(' select:' + this.typeValue).fontSize(30)
+ }.margin(15)
+
+ Scroll(this.scroller) {
+ List({ space: 10, initialIndex: 0 }) {
+ if (this.typeValue == 'Bitmap') {
+ ForEach(this.picIdxArr, (item) => {
+ ListItem() {
+ this.viewItem(this.viewModels[item], this.rectPictureItems[item])
+ }.editable(false)
+ }, item => item)
+ }
+ ...
+ }
+ }
+ .scrollable(ScrollDirection.Vertical).scrollBar(BarState.Off)
+ }
+ .width('100%')
+ .height('100%')
+ .backgroundColor(0xDCDCDC)
+ .padding({ top: 20, bottom: 100 })
+ }
+ ```
+
+更多详细用法请参考开源库sample页面的实现
+
+## 接口说明
+
+`let data: RoundedImageView.Model = new RoundedImageView.Model();`
+1. 设置图片路径
+ `data.setImageSrc(src: string | Resource | ArrayBuffer)`
+
+2. 设置图片类型
+ `data.setSrcType(srcType: SrcType)`
+
+3. 设置图片缩放类型
+ `data.setScaleType(scaleType: ScaleType)`
+
+4. 设置图片的重复样式
+ `data.setTileModeXY(value: TileMode)`
+
+5. 设置角半径
+ `data.setCornerRadius(cornerRadius: number)`
+
+6. 设置图片显示的宽度
+ `data.setWidth(width: number)`
+
+7. 设置图片显示的高度
+ `data.setHeight(height: number)`
+
+8. 设置边框线宽
+ `data.setBorderWidth(borderWidth: number)`
+
+9. 设置背景颜色
+ `data.setBackgroundColor(value: string | CanvasGradient | CanvasPattern)`
+
+10. 设置当前场景上下文context
+
+ `data.setContext(context:common.UIAbilityContext)`
+
+
+
+## 约束与限制
+在下述版本验证通过：
+
+- DevEco Studio: NEXT Beta1-5.0.3.806,SDK:API12 Release(5.0.0.66)
+
+HSP场景适配:
+
+RoundedImageView.Model配置类新增`setContext(context:common.UIAbilityContext)`接口, 在HSP场景下需要传入正确的context, 才能保证三方库后续正确获取Resource资源。
+
+非HSP场景不影响原功能, context可以不传。
+
+## 目录结构
+
+ ```
+|---- RoundedImageView
+| |---- entry # 示例代码文件夹
+| |---- library # RoundedImageView库文件夹
+| |---- src
+| |---- main
+| |---- ets
+| |---- components
+| |---- DownloadUtils.ts # 图片下载工具类
+| |---- FileUtils.ts # 文件操作工具类
+| |---- PixelMapUtils.ts # PixelMap工具类
+| |---- RoundedImageView.ets # 库的核心实现
+| |---- ScaleType.ts # ScaleType枚举
+| |---- SrcType.ts # SrcType枚举
+| |---- TileMode.ts # TileMode枚举
+| |---- GlobalContext.ts # GlobalContext替代globalThis
+| |---- README.md # 安装使用方法
+| |---- README_zh.md # 安装使用方法
+ ```
+
+## 贡献代码
+
+使用过程中发现任何问题都可以提交 [Issue](https://gitee.com/openharmony-sig/RoundedImageView/issues)，当然，也非常欢迎提交 [PR](https://gitee.com/openharmony-sig/RoundedImageView/pulls) 。
+
+## 开源协议
+
+本项目遵循[Apache License 2.0](./LICENSE)。
+
diff --git "a/\346\223\215\344\275\234\346\255\245\351\252\244.md" b/TestingSteps.md
similarity index 46%
rename from "\346\223\215\344\275\234\346\255\245\351\252\244.md"
rename to TestingSteps.md
index 32ad9e3937ffb0f45a771986e0e64e6df96a0e2c..90e63b641a2138c2a9ea9d5264dc8c1c12235b36 100644
--- "a/\346\223\215\344\275\234\346\255\245\351\252\244.md"
+++ b/TestingSteps.md
@@ -5,3 +5,10 @@ RoundedImageView组件测试步骤
步骤二：打开应用,进入到首页，切换类型即可查看对应的显示效果；
+RoundedImageView component test steps
+
+Step 1: Install the application on the RK3568 board (OpenHarmony 3.2 Release version);
+
+Step 2: Open the application, enter the homepage, switch the type to view the corresponding display effect;
+
+
diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets
index cb4ca53b5c6142b5c2f0b978b764fb326a598aa6..e0d2348b9051278606270c3f6c2b8b5b13a3939b 100644
--- a/entry/src/main/ets/pages/Index.ets
+++ b/entry/src/main/ets/pages/Index.ets
@@ -850,7 +850,7 @@ struct Index {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
- Button('测试HSP场景').margin({top:10,bottom:10})
+ Button($r("app.string.button_hsp")).margin({top:10,bottom:10})
.onClick(()=>{
router.pushUrl({url:'@bundle:com.example.roundimageview/sharedlibrary/ets/pages/Index'})
.then(()=>{
diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json
index f94595515a99e0c828807e243494f57f09251930..8ea4cb59fa6c4125c0f695ed96a93bdfab493454 100644
--- a/entry/src/main/resources/base/element/string.json
+++ b/entry/src/main/resources/base/element/string.json
@@ -11,6 +11,10 @@
{
"name": "EntryAbility_label",
"value": "label"
+ },
+ {
+ "name": "button_hsp",
+ "value": "Test HSP scenario"
}
]
}
\ No newline at end of file
diff --git a/entry/src/main/resources/en_US/element/string.json b/entry/src/main/resources/en_US/element/string.json
index f94595515a99e0c828807e243494f57f09251930..8ea4cb59fa6c4125c0f695ed96a93bdfab493454 100644
--- a/entry/src/main/resources/en_US/element/string.json
+++ b/entry/src/main/resources/en_US/element/string.json
@@ -11,6 +11,10 @@
{
"name": "EntryAbility_label",
"value": "label"
+ },
+ {
+ "name": "button_hsp",
+ "value": "Test HSP scenario"
}
]
}
\ No newline at end of file
diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json
index 597ecf95e61d7e30367c22fe2f8638008361b044..82487c086af42e1c6a4a4e156b05968fd5fe4281 100644
--- a/entry/src/main/resources/zh_CN/element/string.json
+++ b/entry/src/main/resources/zh_CN/element/string.json
@@ -11,6 +11,10 @@
{
"name": "EntryAbility_label",
"value": "label"
+ },
+ {
+ "name": "button_hsp",
+ "value": "测试HSP场景"
}
]
}
\ No newline at end of file