From bccbdc968f948904c4da128e4fbd7a1fbe672452 Mon Sep 17 00:00:00 2001 From: hexagon1337 Date: Tue, 24 Sep 2024 11:04:59 +0800 Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8D=E5=9B=BD=E9=99=85=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: hexagon1337 --- README.md | 80 +++++++++++++++++++++++------------------------ README_zh.md | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 127 insertions(+), 40 deletions(-) create mode 100644 README_zh.md diff --git a/README.md b/README.md index 44cc06e..cf3be31 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,45 @@ # LargeImage -## 简介 -加载可以执行缩放（放大和缩小）和滚动操作的图像，图像放大之后可以拖动查看。 +## Introduction +LargeImage is a tool that provides zooming, scrolling, and panning for image viewing. -详细功能： -1.加载图像。 -2.支持缩放。 -3.支持拖动查看大图。 +You can use it to: +1. Load an image. +2. Scale an image. +3. Pan to view a large image. -# 下载安装 +# How to Install ```javascript ohpm install @ohos/largeimage ``` -## 使用说明 +## How to Use ```typescript -import {LargeImage} from '@ohos/largeimage'; // 导入库的代码 +import {LargeImage} from '@ohos/largeimage'; // Import the code. @Entry @Component struct Index { - @State model: LargeImage.Model = new LargeImage.Model() //创建模型 + @State model: LargeImage.Model = new LargeImage.Model() // Create a model. @State rotate:number =0; private aboutToAppear() { - this.model.setImage($r('app.media.tiger')); // 设置图片资源 - this.model.setMaxScale(2); // 设置图片最大缩放比例 + this.model.setImage($r('app.media.tiger')); // Set the image source. + this.model.setMaxScale(2); // Set the maximum zoom scale. } build() { Stack({ alignContent: Alignment.Bottom }) { - LargeImage({ model: this.model }) // 加载大图对象 + LargeImage ({model: this.model}) // Load the large image. Image($r('app.media.rotate')) .width(30) .height(30) .margin({ top: 6 ,left:10,right:20}) .onClick((event: ClickEvent) => { this.rotate +=90; - this.model.setOrientation(this.rotate) // 设置图片旋转角度 + this.model.setOrientation(this.rotate) // Set the image orientation. }) } } @@ -49,39 +49,39 @@ struct Index { -## 接口说明 +## Available APIs -| 接口名 | 参数 | 返回值 | 说明 | +| API | Parameter | Return Value| Description | | -------------------------------------------- | ----------------------------- | ------ | ------------------------ | -| setImage | src: Resource | void | 设置图像资源 | -| setZoomEnabled | zoomEnabled: boolean | void | 设置是否可以缩放图像。 | -| setPanEnabled | panEnabled: boolean | void | 设置是否可以平移图像。 | -| setMaxScale | maxScale: number | void | 设置图像的最大缩放比例。 | -| setOrientation | degrees: number | void | 设置图像旋转角度 | -| getLoadedImageWidth
getLoadedImageHeight | 无 | number | 获取源图像的宽度和高度 | -| setSingleTapListener | listener: OnSingleTapListener | void | 设置单击事件监听器 | -| setLongPressListener | listener: OnLongPressListener | void | 设置长按事件监听器 | -| setDoubleTapListener | listener: OnDoubleTapListener | void | 设置双击事件监听器 | - -## 约束与限制 -在下述版本验证通过： - -- DevEco Studio NEXT Developer Beta3: 5.0(5.0.3.530), SDK: API12 (5.0.0.35(SP3)) - -## 目录结构 +| setImage | src: Resource | void | Sets image source. | +| setZoomEnabled | zoomEnabled: boolean | void | Sets whether to enable zooming for the image. | +| setPanEnabled | panEnabled: boolean | void | Sets whether to enable panning for the image. | +| setMaxScale | maxScale: number | void | Sets the maximum zoom scale of the image.| +| setOrientation | degrees: number | void | Sets the image orientation. | +| getLoadedImageWidth
getLoadedImageHeight | N/A | number | Obtains the width and height of the source image. | +| setSingleTapListener | listener: OnSingleTapListener | void | Sets a listener for single tap events. | +| setLongPressListener | listener: OnLongPressListener | void | Sets a listener for long-press events. | +| setDoubleTapListener | listener: OnDoubleTapListener | void | Sets a listener for double-tap events. | + +## Constraints +This project has been verified in the following versions: + +- DevEco Studio NEXT Developer Beta3: 5.0 (5.0.3.530), SDK: API 12 (5.0.0.35(SP3)) + +## Directory Structure ```` |---- LargeImage -| |---- entry # 示例代码文件夹 -| |---- library # LargeImage库文件夹 -| |---- LargeImage.ets # LargeImage对外接口 -| |---- README.md # 安装使用方法 +| |---- entry # Sample code +| |---- library # LargeImage library +| |---- LargeImage.ets # External APIs +| |---- README.md # Readme ```` -## 贡献代码 +## How to Contribute -使用过程中发现任何问题都可以提[Issue](https://gitee.com/openharmony-tpc/LargeImage/issues) 给我们，当然，我们也非常欢迎你给我们提[PR](https://gitee.com/openharmony-tpc/LargeImage/pulls)。 +If you find any problem when using this project, submit an [issue](https://gitee.com/openharmony-tpc/LargeImage/issues) or a [PR](https://gitee.com/openharmony-tpc/LargeImage/pulls). -## 开源协议 +## License -本项目基于 [Apache License 2.0](https://gitee.com/openharmony-tpc/LargeImage/blob/master/LICENSE)，请自由地享受和参与开源。 +This project is licensed under [Apache License 2.0](https://gitee.com/openharmony-tpc/LargeImage/blob/master/LICENSE). diff --git a/README_zh.md b/README_zh.md new file mode 100644 index 0000000..324cc0f --- /dev/null +++ b/README_zh.md @@ -0,0 +1,87 @@ +# LargeImage + +## 简介 +加载可以执行缩放（放大和缩小）和滚动操作的图像，图像放大之后可以拖动查看。 + +详细功能： +1.加载图像。 +2.支持缩放。 +3.支持拖动查看大图。 + +# 下载安装 + +```javascript +ohpm install @ohos/largeimage +``` + +## 使用说明 + +```typescript +import {LargeImage} from '@ohos/largeimage'; // 导入库的代码 + +@Entry +@Component +struct Index { + @State model: LargeImage.Model = new LargeImage.Model() //创建模型 + @State rotate:number =0; + + private aboutToAppear() { + this.model.setImage($r('app.media.tiger')); // 设置图片资源 + this.model.setMaxScale(2); // 设置图片最大缩放比例 + } + + build() { + Stack({ alignContent: Alignment.Bottom }) { + LargeImage({ model: this.model }) // 加载大图对象 + Image($r('app.media.rotate')) + .width(30) + .height(30) + .margin({ top: 6 ,left:10,right:20}) + .onClick((event: ClickEvent) => { + this.rotate +=90; + this.model.setOrientation(this.rotate) // 设置图片旋转角度 + }) + } + } +} + +``` + + + +## 接口说明 + +| 接口名 | 参数 | 返回值 | 说明 | +| -------------------------------------------- | ----------------------------- | ------ | ------------------------ | +| setImage | src: Resource | void | 设置图像资源 | +| setZoomEnabled | zoomEnabled: boolean | void | 设置是否可以缩放图像。 | +| setPanEnabled | panEnabled: boolean | void | 设置是否可以平移图像。 | +| setMaxScale | maxScale: number | void | 设置图像的最大缩放比例。 | +| setOrientation | degrees: number | void | 设置图像旋转角度 | +| getLoadedImageWidth
getLoadedImageHeight | 无 | number | 获取源图像的宽度和高度 | +| setSingleTapListener | listener: OnSingleTapListener | void | 设置单击事件监听器 | +| setLongPressListener | listener: OnLongPressListener | void | 设置长按事件监听器 | +| setDoubleTapListener | listener: OnDoubleTapListener | void | 设置双击事件监听器 | + +## 约束与限制 +在下述版本验证通过： + +- DevEco Studio NEXT Developer Beta3: 5.0(5.0.3.530), SDK: API12 (5.0.0.35(SP3)) + +## 目录结构 +```` +|---- LargeImage +| |---- entry # 示例代码文件夹 +| |---- library # LargeImage库文件夹 +| |---- LargeImage.ets # LargeImage对外接口 +| |---- README.md # 安装使用方法 +```` + + +## 贡献代码 + +使用过程中发现任何问题都可以提[Issue](https://gitee.com/openharmony-tpc/LargeImage/issues) ，当然，也非常欢迎提[PR](https://gitee.com/openharmony-tpc/LargeImage/pulls)共建。 + +## 开源协议 + +本项目基于 [Apache License 2.0](https://gitee.com/openharmony-tpc/LargeImage/blob/master/LICENSE)，请自由地享受和参与开源。 -- Gitee