可缩放图像的Angular 2+组件 - ngx-image-zoom

可缩放图像的Angular 2+组件 - ngx-image-zoom
插件名称 ngx-image-zoom
发布时间 2020年5月5日
插件作者 wittlock

Angular 2+的图像缩放组件,可同时使用图像URL和嵌入式图像。

安装:

# NPM
$ npm install ngx-image-zoom --save

使用:

添加到您的AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// 导入库
import { NgxImageZoomModule } from 'ngx-image-zoom';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxImageZoomModule // <-- 添加线
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

库导入后,可以在Angular应用程序中使用其组件:

<!-- 现在可以在app.component.html中使用NgxImageZoom组件 -->
<h1>
  {{title}}
</h1>
<lib-ngx-image-zoom
    [thumbImage]=myThumbnail
    [fullImage]=myFullresImage
></lib-ngx-image-zoom>

可用选项:

除thumbImage之外的所有设置都是可选的。如果没有fullImage提供了thumbImage也会被用作高分辨率版本。

选项 默认值 描述
thumbImage none (必需)当用户没有交互时将显示的图像的较小版本。
fullImage none 缩放时要使用的图像的完整分辨率版本。如果未提供,将使用thumbImage。
magnification 1 默认情况下使用的缩放系数。1表示我们以实际分辨率使用fullImage。
zoomMode ‘hover’ 下表中说明了使用的缩放模式。
enableScrollZoom false 布尔值,用于将鼠标悬停在图像上以调整放大倍率时是否应捕获鼠标滚轮。
scrollStepSize 0.1 使用滚动缩放时,此设置确定每个滚动以多大的步长更改缩放。
enableLens false 如果启用,则实际上只会放大鼠标光标周围的一小部分,而不是整个图像区域。
lensWidth 100 镜头的宽度(如果启用)。
lensHeight 100 镜头的高度(如果启用)。
circularLens false 使镜头为圆形而不是正方形。如果宽度和高度相等,这将看起来很好。
minZoomRatio baseRatio 启用scrollZoom时可应用的缩放比例的下限。有关详情,请参见下文。
maxZoomRatio 2 启用scrollZoom时可以应用的缩放上限。有关详情,请参见下文。

变焦模式:

模式 描述
hover 每当鼠标指针移到缩略图上时,它将显示缩放的图像,直到离开缩略图为止。
click 与悬停类似,但是只有在用户单击图像时它才会开始缩放。将光标从图像上移开将再次禁用它。
toggle 单击图像将放大光标的位置。再次单击将还原小图像。
hover-freeze 第一次单击将启用悬停模式,第二次单击将冻结缩放后的图像,第三次将还原缩略图。

可用输出:

活动名称 描述
zoomScroll 每当用户使用滚轮更改缩放级别时,此事件都会以当前缩放比例触发(请参见上文)。
zoomPosition 当缩放聚焦的点改变时,此事件将发出一个Coord事件(从模块导出的接口),其X / Y像素为相对缩略图的左上角。实际上,每当用户将鼠标光标移到图像上时。