您现在的位置是：亿华云 > 应用开发

2022强力之作：一款超精致的图片预览组件

亿华云2025-10-08 21:06:42【应用开发】5人已围观

简介我刚接触前端这个行业的时候就有一个想法，那就是写一个超炫酷的图片预览画廊。还记得当时用美图看看看，那轻快的速度和交互很是令人着迷。该组件在几年前已经发布不完全版，后面断断续续的维护，总感觉差了点什么。

我刚接触前端这个行业的强力时候就有一个想法，那就是款超写一个超炫酷的图片预览画廊。还记得当时用美图看看看，精致件那轻快的片预速度和交互很是令人着迷。

该组件在几年前已经发布不完全版，览组后面断断续续的强力维护，总感觉差了点什么。款超今年春节没休息，精致件全搭在上面进行开发，片预现在总算是览组完美实现!先看看效果：

缩略图完美渐变：

指定位置放大：

减速滚动：

什么是 react-photo-view

react-photo-view 拥有无与伦比的预览交互体验：从打开图像开始，每一帧的强力动画、细节和交互都经过了精心设计与反复调试，款超媲美原生图片预览的精致件效果。

pnpm i react-photo-view

概览：

import { PhotoProvider,片预 PhotoView } fromreact-photo-view;

importreact-photo-view/dist/react-photo-view.css;

exportdefaultfunction MyComponent() {

return (

);

}

为什么要单独开发它?

当然想实现它的执念也算一个方面，但根本原因是览组在 React 强大的生态中根本找不到一个好用的图片预览方案。当时奉行拿来主义，在网上找了一圈基于 React 放大预览组件库，结果令我有点意外，图片放大预览的b2b供应网库的数量明显比不上轮播组件库。更令人窒息的是这些少得可怜的组件库中，其中一大半都是基于 PhotoSwipe 这个开源库进行的二次封装。除此之外，能用于实际生产的预览组件库……好像没有(也可能是我找不到)，这种情况不仅体现在 React 库上，其他框架 Vue 乃至是原生的相关库都是如此。

当然 PhotoSwipe 也不是不能用，但原生操作 DOM 的写法在 React 中格格不入，其体积也是在 gzip 12KB 之上了，显得有点臃肿了，便有了这个大胆的想法。

它有多优秀?

它拥有非常完善的细节与特性：

支持触摸手势，拖动/平移/物理效果滑动，双指指定位置放大/缩小全方面动画衔接，打开/关闭/回弹/触边，顺其自然的云服务器提供商交互效果图像自适应，以一个合适的最初呈现大小，并根据调整自适应支持自定义如或任意 HTML 元素的预览键盘导航，完美适配桌面端支持自定义节点扩展，轻松实现全屏预览、旋转控制、图片介绍以及更多功能基于 typescript，7KB Gzipped，支持服务端渲染简单易用的 API，上手零成本

还导出了支持 ES2017 以上的 JS，可以做到 6KB Gzipped。在如此的体积上加上非常多的体验细节实属不容易，更多的功能可以通过非常容易的自定义渲染来实现，这与 React 理念完美契合，从而可以避免内置一些非刚需的功能。

流行库对比

以下表格统计了大部分场景所需功能，展示 react-photo-view 、 PhotoSwipe 和 rc-image(ant-design) 对比：

友好的文档

还有什么比文档更重要了，为此，我还准备了一个超漂亮的文档(目前只有中文，以后有时间在翻译吧~)

https://react-photo-view.vercel.app/ 文末查看原文可预览

实现历程

图片跟随手指滚动

在 onTouchStart 时记录当前触发位置状态，在 onTouchMove 时让其跟随手指移动，亿华云onTouchEnd 解除跟随就可以简单实现。

触边位置反馈使图片切换都是需要慢慢琢磨细节：在 onTouchStart 之后移动如果立即让图片跟随手指移动的话会带来许多误操作，比如本想让他切换图片却走了上下滑动的逻辑。这时候就需要一个 20px 的移动缓冲来预判手指移动方向。

指定图片位置进行放大

使用 transform: scale(value) 可以实现对图片的缩放，但是都是对图片中心进行放大，缩放的结果可能不是想要的。起初打算用 transform-origin 来实现，想法是美好的，虽然第一次在指定的位置能够进行放大。倘若缩小的位置不是原来的位置就会产生混乱跳动，很显然这个方式不行。

后来思来想去睡不着，在睡梦中发现了灵感：便于计算理解，我们设图片中心点为 0，任何指定位置的放大缩小，即改变图片中心的位置。比如图片宽度 200，中心点位置为 100，基于最左侧位置放大一倍。现在图片宽度 400，那么中心点的位置应为 200。那么总结公式如下：

const centerClientX = innerWidth / 2;

// 坐标偏移转换

const lastPositionX = centerClientX + lastX;

// 缩放偏移

const offsetScale = nextScale / scale;

// 最终偏移位置

const originX = clientX - (clientX - lastPositionX) * offsetScale - centerClientX;

这种模式计算能承担各种位置响应，比如双指缩放、双指滚动+缩放、边缘计算等等。

双指之间的距离

这里需要初中时直角三角勾股定理：

Math.sqrt((nextClientX - clientX) ** 2 + (nextClientY - clientY) ** 2);