我想在 Ionic 3 项目的 ion-tab 中显示可缩放的 SVG 图像。我正在寻找的效果只是常规的捏合和双击缩放，没什么特别的。
我尝试了不同的组合，但无法成功。这就是我现在拥有的：
HTML：
<ion-content>
<ion-scroll scrollX="true" scrollY="true" zoom="true" overflow-scroll="false" class="scroll-view" min-zoom="1" maxZoom="10">
<img src="assets/img/image.svg">
</ion-scroll>
</ion-content>
CSS：
.scroll-view{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
有什么想法吗？谢谢！
【问题讨论】：
标签： ionic-framework ionic2 ionic3
Ionic Scroll 似乎面临一些问题，并且 Ionic Github 中仍然存在问题，因此我开发了一个使用 Gesture 进行捏合和平移的组件。这将允许您缩放屏幕、图像、div 等中的任何元素...
您可以通过简单地将组件包含在您的应用中来使用它。
在您应用的主模块中导入ZoomAreaModule.forRoot()
import { ZoomAreaModule } from 'ionic2-zoom-area';
@NgModule({
...
imports: [
...
ZoomAreaModule.forRoot()
],
...
})
export class AppModule {}
然后您可以在 HTML 文件中使用缩放区域组件
<zoom-area>
<img src="image-to-zoom.jpg" alt="zoom it" />
</zoom-area>
有关更多文档和说明，您可以查看缩放区域组件的 Github 页面。
【讨论】：
一段时间以来，我遇到了同样的麻烦。 今天，这个问题还没有解决（https://github.com/driftyco/ionic/issues/6482）。 我通过使用非 ionic2 团队组件（在 github 上随机找到的一种图像查看器）来解决这个问题。但我对这个解决方案并不满意......
你也可以尝试关注这个：https://forum.ionicframework.com/t/image-pinch-and-zoom-in-ionic-working-code/72850?source_topic_id=45910 似乎有些人想出了如何让它在那里工作
【讨论】：
我只使用内联 SVG 图像进行了尝试，但我使用了 svg-pan-zoom 库 (https://www.npmjs.com/package/svg-pan-zoom) 和hammerjs (https://www.npmjs.com/package/hammerjs)。 svg-pan-zoom 库表示它可以与 HTML 对象中的 SVG 以及嵌入元素一起使用。
使用 npm 将它们安装到您的项目中，将它们导入到您的组件中，然后根据 svg-pan-zoom 库的说明实现它们。
HTML：
<ion-content>
<div class="zoom">
<svg id="svg" class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:100%;height:100%;">...</svg>
</div>
</ion-content>
CSS：
.zoom {
position: fixed;
width: 100%;
height: 100%;
}
组件：
import { Component } from '@angular/core';
import svgPanZoom from 'svg-pan-zoom';
import Hammer from 'hammerjs';
@Component({
selector: 'page-map',
templateUrl: 'map.html'
})
export class MapPage {
panZoom:any;
constructor(){ }
ngOnInit(){
let eventsHandler;
eventsHandler = {
haltEventListeners: ['touchstart', 'touchend', 'touchmove', 'touchleave', 'touchcancel'],
init: function(options) {
var instance = options.instance, initialScale = 1, pannedX = 0, pannedY = 0
// Init Hammer
// Listen only for pointer and touch events
this.hammer = Hammer(options.svgElement, {
inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput
})
// Enable pinch
this.hammer.get('pinch').set({enable: true})
// Handle double tap
this.hammer.on('doubletap', function(ev){
instance.zoomIn()
})
// Handle pan
this.hammer.on('panstart panmove', function(ev){
// On pan start reset panned variables
if (ev.type === 'panstart') {
pannedX = 0
pannedY = 0
}
// Pan only the difference
instance.panBy({x: ev.deltaX - pannedX, y: ev.deltaY - pannedY})
pannedX = ev.deltaX
pannedY = ev.deltaY
})
// Handle pinch
this.hammer.on('pinchstart pinchmove', function(ev){
// On pinch start remember initial zoom
if (ev.type === 'pinchstart') {
initialScale = instance.getZoom()
instance.zoom(initialScale * ev.scale)
}
instance.zoom(initialScale * ev.scale)
})
// Prevent moving the page on some devices when panning over SVG
options.svgElement.addEventListener('touchmove', (e) => { e.preventDefault(); });
},
destroy: function(){
this.hammer.destroy()
}
}
let options = {
controlIconsEnabled: false,
customEventsHandler: eventsHandler
};
this.panZoom = svgPanZoom('#svg', options);
}
【讨论】：
图像的缩放、捏合、双击缩放（在 Ionic 4 中测试）。
使用Photo Viewer。
仅适用于实时 URL。
在 app.module.ts 中
import { PhotoViewer } from '@ionic-native/photo-viewer/ngx';
...
providers: [
PhotoViewer, ...
],
在 custom.ts 中
import { PhotoViewer } from
'@ionic-native/photo-viewer/ngx';
...
constructor(private photoViewer: PhotoViewer) { }
...
showPhoto()
{
console.log("showPhoto");
this.photoViewer.show('https://dummyimage.com/600x400/000/fff');
}
在custom.html中
<img (click)="showPhoto()" />
【讨论】：