介绍
@hypersprite/react-vignette 是一个 React 组件，可以将图片等媒体内容显示为漂亮的画框式效果，提供了丰富的自定义选项，适合用于相册、全屏图片查看等场景。本篇文章将详细介绍该组件的使用方法。
安装
在安装之前，您需要确保已经安装了 Node.js 和 npm。在终端中运行以下命令以安装 @hypersprite/react-vignette：
npm install @hypersprite/react-vignette
使用
在您的 React 组件中引入 @hypersprite/react-vignette，可以像下面这样使用：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - -------- - ---- ------------------------------
-------- ----- -
----- ------ -------- - ----------------
----- ---------- - -- -- -
--------------
--
----- ----------- - -- -- -
---------------
--
------ -
--
-- -------
---- -------------------- ------------------- ----------- --
---------
-----------
---------------------
-------------------
-------------------
-------------------
--
---
-
-
------ ------- ----上面的代码中，我们创建了一个状态变量 open，点击图片后调用 handleOpen 函数将其置为 true，从而打开 @hypersprite/react-vignette。Vignette 组件提供了一些自定义选项，例如 maxScaleRatio 和 minScaleRatio 可以设置最大和最小缩放比例，src 则是我们要显示的图片的路径，点击画框之外的区域或者按下 ESC 键可以关闭 @hypersprite/react-vignette，关闭时会调用 handleClose 函数。
自定义
@hypersprite/react-vignette 提供了一些自定义选项，可以根据您的需求进行自定义。下面是一些常用选项的介绍。
open
open 属性控制 @hypersprite/react-vignette 是否处于打开状态。当 open 为 true 时，@hypersprite/react-vignette 将会显示。
onClose
onClose 属性是一个回调函数，当用户关闭 @hypersprite/react-vignette 时，它将被调用。通常情况下，您需要将 open 状态变量重置为 false。
const handleClose = () => {
setOpen(false);
};maxScaleRatio 和 minScaleRatio
maxScaleRatio 和 minScaleRatio 属性控制画框的最大和最小缩放比例。您可以将它们设置为任何数字。
<Vignette
...
maxScaleRatio={2.0}
minScaleRatio={1.0}
...
/>enableZoom
enableZoom 属性控制是否启用缩放功能。默认情况下，缩放功能是启用的。
<Vignette
...
enableZoom={false}
...
/>zoomSpeed
zoomSpeed 属性控制缩放速度。默认情况下，缩放速度是 1.2。
<Vignette
...
zoomSpeed={1.5}
...
/>background
background 属性控制背景颜色。
<Vignette ... background="#f0f0f0" ... />
onZoomChange 和 onPositionChange
onZoomChange 和 onPositionChange 属性是回调函数，当用户缩放或移动画框时，它们会被调用。这些函数接收两个参数，分别是缩放比例或者 XY 坐标的变化量。您可以使用这些回调函数来做一些实时的操作，例如在画框周围显示缩放比例或者调整画框周围其他元素的位置。
-- -------------------- ---- ------- ----- ---------------- - ------------ -- - ---------------------- ------------ -- ----- -------------------- - -------- ------- -- - ------------------------ --- ------- -- ------ --- -------- -- --- --------- --- ------------------------------- --------------------------------------- --- --
示例代码
在本节中，我们将演示如何使用自定义选项来创建具有交互性的 @hypersprite/react-vignette。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - -------- - ---- ------------------------------
-------- ----- -
----- ------ -------- - ----------------
----- ------------ -------------- - --------------
----- ---- ------ - ------------
----- ---- ------ - ------------
----- ---------- - -- -- -
--------------
--
----- ----------- - -- -- -
---------------
--
----- ---------------- - ------------ -- -
--------------------------
--
----- -------------------- - -------- ------- -- -
-------- - --------
-------- - --------
--
----- ----------------- - -- -- -
------ --------------------- - -----
--
------ -
--
---- -------------------- -------------- --------- --
---------
-----------
---------------------
-------------------
-------------------
-----------------
---------------
-------------------------------
---------------------------------------
--------------
--------------------
--
----- -- -
----
--------
--------- -----------
------- ---
------ ---
---------------- -------
-------- ---
------------- --
---------- -- --- ---- ------- -- -- ------
--
-
---------------------------
------
--
----
--------
--------- -----------
---- --
----- --
---------- ------------------- ----------
--
-
---- --------------- ---------- ----------- --
------
---
--
-
------ ------- ----在上面的代码中，我们除了使用 Vignette 组件以外，还在页面上添加了一个图片，它跟随画框周围的位置而移动。我们使用了 scaleRatio 和 onZoomChange 属性来计算缩放比例，并使用了 dx、dy 和 onPositionChange 属性来更新图片的位置。我们还在画框周围添加了一个显示缩放比例的提示框。您可以通过自定义这些选项以及其他自定义选项来实现对 @hypersprite/react-vignette 的更高度的控制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc1967216659e244197