From 97f23362af2b31c2a09133d802b115f82a1a516d Mon Sep 17 00:00:00 2001 From: yang Date: Sat, 21 Sep 2024 10:21:10 +0800 Subject: [PATCH] =?UTF-8?q?RoundedImageView=E7=BB=84=E4=BB=B6=E4=B8=AD?= =?UTF-8?q?=E8=8B=B1=E6=96=87=E5=9B=BD=E9=99=85=E5=8C=96=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: yang --- README.md | 91 +++++---- README_zh.md | 187 ++++++++++++++++++ ...255\245\351\252\244.md" => TestingSteps.md | 7 + entry/src/main/ets/pages/Index.ets | 2 +- .../main/resources/base/element/string.json | 4 + .../main/resources/en_US/element/string.json | 4 + .../main/resources/zh_CN/element/string.json | 4 + 7 files changed, 252 insertions(+), 47 deletions(-) create mode 100644 README_zh.md rename "\346\223\215\344\275\234\346\255\245\351\252\244.md" => TestingSteps.md (46%) diff --git a/README.md b/README.md index 0bec283..921c052 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 0000000..ab04224 --- /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 32ad9e3..90e63b6 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 cb4ca53..e0d2348 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 f945955..8ea4cb5 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 f945955..8ea4cb5 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 597ecf9..82487c0 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 -- Gitee