# rvcomponent **Repository Path**: mwplay/rvcomponent ## Basic Information - **Project Name**: rvcomponent - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 6 - **Created**: 2024-08-07 - **Last Updated**: 2024-08-07 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # image-preview 此版本为 **_bate_** 版本，相较于上个版本，取消了旋转手势，把双指滑动功能修改为单指滑动。 已知问题：在触发放大手势时，若滑动速度过快会出现图片中心丢失问题。 ## 简介 image-preview 提供图片预览组件，支持缩放和平移，提供一些自定义属性和事件监听。 ## 下载安装 `ohpm install @rv/image-preview` ## 权限 无需权限,若使用网络资源图片，需要互联网访问权限。 ## 属性列表 | 属性名 | 类型 | 必须 | 默认值 | 描述 | |-------------|-------------------------------------------------|-----|------|-----------------------------------------------------------------------------------------------------------------------------------------------------------| | `option` | `ImagePreViewOption` | 是 | null | 配置选项，集体如下介绍 | ## ImagePreViewOption ### 构造函数 ```ts constructor(images: ImageType[] = []) 其中: type ImageType = PixelMap | ResourceStr | DrawableDescriptor ``` ### 接口说明 > 接口均支持链式调用 1. 设置内部图片内容 ```typescript setImage(images: ImageType[]) ``` 2. 添加图片 ```typescript addImage(images: ImageType ``` 3. 删除图片 ```typescript /** * 删除指定图片 * @param index 需要删除的图片位置 * @returns */ removeImage(index: number) ``` 4. 设置背景颜色，默认值：`Color.Transparent` ```typescript /** * 设置背景颜色 * @param bgColor 背景颜色 */ setBackgroundColor(bgColor: ResourceColor) ``` 5. 设置第一次展示的图片位置，默认值 `0` ```typescript /** * 设置展示页 * @param showIndex 索引 */ setShowIndex(showIndex: number) ``` 6. 设置缓存数量，默认值 `0` ```typescript /** * 设置缓存数量 * @param cachedCount 缓存数量 */ setCachedCount(cachedCount: number) ``` 7. 设置长按事件回调 ```typescript /** * 设置长按事件 * @param event 事件回调函数 * 其中： * event: GestureEvent，与手势事件一致 * index: 当前长按的图片索引 */ setLongPressListener(event: (event: GestureEvent, index: number) => void) ``` 8. 设置单击事件回调 ```typescript /** * 设置单击事件 * @param event 事件回调函数 * 其中： * event: ClickEvent，与点击事件一致 * index: 当前点击的图片索引 */ setOnClickListener(event: (event: ClickEvent, index: number) => void) ``` 9. 设置下拉事件回调 ```typescript /** * 设置下拉事件 * @param event 事件回调函数 * 其中 * index: 当前下拉的页面索引 * @returns */ setOnPullDownListener(event: (index: number) => void) ``` 10. 设置翻页事件回调 ```typescript /** * 设置翻页事件回调 * @param event 事件回调函数 * 其中 * @param prePage: 翻页前处于的页面索引 * @param nextPage: 即将去往的页面索引 * @returns */ setFlipListener(event: (prePage: number, nextPage: number) => void) ``` 11. 设置是否允许缩放，默认值：`true` ```typescript /** * 是否允许缩放 * @param zoomEnabled */ setZoomEnabled(zoomEnabled: boolean) ``` 12. 设置共享元素转场id生成策略，默认生成策略 `image.toString() + index` ```typescript /** * 设置共享元素转场id生成策略 * 其中 * image：此图片的src * index：图片的索引 */ setSharedIdGenerate(event: (image: ImageType, index: number) => string) ``` 13. 设置即将翻页的回调事件 ```typescript /** * 设置即将翻页的回调事件，回调在手指滑动时触发，在手指未松开前会持续调用，它会先于翻页事件回调(FlipListener), */ setAboutToTurnPageListener(event: (page: number) => void) ``` 14. 设置最大缩放比，默认值：`2` ```typescript /** * 最大缩放比 * @param maxScale 大于 1 ，小于 1 的按 1 计算 */ setMaxScale(maxScale: number ``` 15. 设置最小缩放比，默认值：`0.5` ```typescript /** * 最小缩放比 * @param minScale maxScale 小于 1 ，大于 1 的按 1 计算 */ setMinScale(minScale: number) ``` 16. 设置指示器选中颜色，默认值：`Color.Blue` ```typescript /** * 设置指示器选中颜色 */ setIndicatorCheckedColor(indicatorCheckedColor: ResourceColor) ``` 17. 设置指示器未选中颜色，默认值：`Color.Gray` ```typescript /** * 设置指示器未选中颜色 */ setIndicatorUnselectedColor(indicatorUncheckedColor: ResourceColor) ``` 18. 设置指示器类型，默认值：`IndicatorType.Dot` ```typescript /** * 设置指示器类型 */ setIndicatorType(type: IndicatorType) ``` 其中： ```typescript export enum IndicatorType { Dot, // 圆点指示器 Number, // 文本指示器 None // 无指示器 } ``` ### 共享元素转场 当配置共享元素转场id生成策略后，源图片的共享元素id也必须与其一致，例如： ```typescript Image(item) .width(100) .height(100) .margin(10) .sharedTransition(JSON.stringify(item) + index) // 那么配置的共享元素转场id生成策略需要是 .setSharedIdGenerate((image: ImageType, index: number) => JSON.stringify(item) + index) ``` ## 使用示例 列表页： ```typescript import { router } from '@kit.ArkUI' @Entry @Component struct ImagePreViewPageIndex { @State images: ResourceStr[] = [ $r('sys.media.ohos_save_button_line'), $r('sys.media.ohos_icon_mask_svg'), $r('sys.media.ohos_ic_public_video'), $r('sys.media.ohos_user_auth_icon_fingerprint'), $r('sys.media.ohos_ic_public_select_all'), ] build() { Row() { Column() { Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.images, (item: ResourceStr, index: number) => { Image(item) .width(100) .height(100) .margin(10) .sharedTransition(JSON.stringify(item) + index) .onClick(() => { router.pushUrl({ url: 'pages/ImagePreViewPage', params: this.images }) }) }) } } .width('100%') } .height('100%') } } ``` 预览页： ```typescript import { ImagePreView, ImagePreViewOption } from '@rv/image-preview/Index' import { promptAction, router } from '@kit.ArkUI' @Entry @Component struct ImagePreViewPage { images: ResourceStr[] = router.getParams() as ResourceStr[] @State imagePreViewOption: ImagePreViewOption = new ImagePreViewOption() aboutToAppear(): void { this.imagePreViewOption .setImage(this.images) .setLongPressListener((_, index) => { promptAction.showToast({ message: "长按" + index.toString() }) }) .setOnPullDownListener((index) => { router.back() }) .setOnClickListener((_, index) => { promptAction.showToast({ message: "单击" + index.toString() }) }) .setAboutToTurnPageListener((page) => { promptAction.showToast({ message: "即将去往" + page.toString() }) }) .setCachedCount(0) .setMinScale(0.5) .setBackgroundColor(Color.White) .setFlipListener(() => { promptAction.showToast({ message: "翻页" }) }) .setSharedIdGenerate((item,index) => JSON.stringify(item) + index) // .setIndicatorType(IndicatorType.None) } build() { Column() { ImagePreView({ option: this.imagePreViewOption }) } .width("100%") .height("100%") } } ``` 效果如下： ![Screenshot_2024-05-06T212737.png](ImagePreview/src/image/Screenshot_2024-07-04T114339.png) ![PixPin_2024-05-06_21-31-30.gif](ImagePreview/src/image/recording.gif)