保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847

反应图像缩放:使用和安装

什么是反应变焦图像?

在照片库或电子商务网站上签出图像时,您可能会想要缩放图像以获得特定区域的清晰视图。在这里,我们使用反应图像缩放功能,以便可以实现所需的功能。此功能特别用于以放大视图显示图像。当用户将鼠标悬停或有时单击时,我们会得到图像的扩展视图。基本上,此功能共有15个版本。

反应图片缩放的组成部分:

以下是反应图像缩放中的一些出色组件。

反应地图互动:

此功能基本上在任何react元素上添加地图,例如缩放或平移。触摸设备和鼠标设备都可以使用此功能。使用触摸板时,要放大图像,请先捏住它。要平移图像,我们需要将其拖动。对于鼠标或触控板,我们必须滚动滚轮才能获得缩放的图像。而且我们必须拖动鼠标才能平移图像。

 

反应 Zoom Pan Pinch:

它支持一个简单的缩放平移,并捏住许多标记语言dom组件,例如图片和div。

 

反应图像放大:

这也是用于触摸板和鼠标的响应式反应图像缩放组件之一。就地和并排图像放大,正负空间镜选项,交互提示,可配置的放大图像尺寸,可选的放大图像外部渲染,悬停意图,长按手势,淡入淡出过渡,基本的反滑轮播支持我们可以在React Image中找到一些放大功能。

反应图像放大:

它是React组件,可在悬停时缩放图像。

反应图像缩放:

我们主要在浏览器中使用此组件,以便获得缩放的图像。要获得缩放的图像,只需将鼠标悬停。

 

反应 Pinch缩放平移:

这是一个反应组件,使我们能够添加捏缩放和平移缩放的图像功能。要在桌面上使用它,首先,需要按住Alt键。之后,只需将鼠标从内部内容的中心向下拖动到边缘即可。

 

反应 SVG Pan zoom:

它将平移和缩放选项添加到Svg。

 

反应Prismazoom:

它使平移和缩放功能能够使用CSS转换做出反应。

 

反应中等图像缩放:

它提供Medium.com样式的图像缩放以进行反应。这是Medium.com的React.js的库’的缩放图像工具。它允许低分辨率和高分辨率图像一起工作,以获得缩放图像。无论隐藏的父元素还是具有transform属性的父元素,它都可以正常工作。   

响应式捏捏缩放:

它允许在移动设备和台式机上缩放和平移图像或画布。借助此功能,可以轻松获得最小和最大设置。

图像缩放的安装和使用:

安装:

我们可以在npm的帮助下安装React image zoom。

npm install react-image-zoom–save

 

道具类型:

  • 宽度:此功能基本上是为图像分配宽度。知道值必须是数字是非常重要的。 (需要)
  • height:确定图像的高度。像宽度一样,值必须是数字。 (可选的)
  • zoomWidth:描述缩放图像的宽度。它’再次是一个数字。 zoomHeight与原始图像的高度相同。 (可选的)
  • img:如果容器不包含元素作为标记,则使用源图像的URL。应该是一个字符串。
  • 标尺:这是缩放比例。如果我们不这样做’然后提供规模’基本上将计算该图像的自然尺寸。
  • offset:用于缩放图像的偏移量。需要一个垂直数字和一个水平数字。 
  • zoomStyle:基本上,它将自定义样式应用于缩放的图像。 
  • zoomLensStyle:在这里,它仅将自定义样式应用于变焦镜头。
  • zoomPosition:定义缩放图像的位置。它的属性基本上是上,左,下,原始和右。默认情况下,它适用。

 

 

作者头像
QuikieApps
//www.qinheli.com.cn/blog

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。