[英]Pan and Zoom Image Plugin
I am trying to implement something like google arts and culture image zoom and pan.我正在尝试实现诸如谷歌艺术和文化图像缩放和平移之类的东西。
I tried working with ng2-image-viewer library but can't seem to be able to work it out.我尝试使用ng2-image-viewer库,但似乎无法解决。
Following is the snippet i tried.以下是我尝试过的片段。
<app-image-viewer
[images]="['https://images.nga.gov/en/web_images/niagara2.jpg']"
[loadOnInit]="true"
[idContainer]="'idOnHTML'">
</app-image-viewer>
Result:结果:
As you can see, image is above the expected area, not proper controls and neither is that small rectangle that gives us the minimap.如您所见,图像在预期区域上方,不是适当的控件,也不是为我们提供小地图的那个小矩形。
Follow this:按照这个:
1- To install this library, run: 1- 要安装此库,请运行:
npm install iv-viewer
npm install ng2-image-viewer
2- in AppModule 2- 在 AppModule 中
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import your library
import { ImageViewerModule } from 'ng2-image-viewer';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify your library as an import
ImageViewerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
3- Now just add the these codes on your angular-cli.json file: 3- 现在只需在您的 angular-cli.json 文件中添加这些代码:
"styles": [
"../node_modules/ng2-image-viewer/imageviewer.scss"
],
4- Once your library is imported, you can use its components, directives and pipes in your Angular application: 4- 导入库后,您可以在 Angular 应用程序中使用其组件、指令和管道:
<!-- You can now use your library component in app.component.html -->
<h1>
Image Viewer
</h1>
<app-image-viewer [images]="['https://picsum.photos/900/500/?random', 'https://picsum.photos/900/500/?random', 'https://picsum.photos/900/500/?random']"
[idContainer]="'idOnHTML'"
[loadOnInit]="true"></app-image-viewer>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.