Question

我想在Ionic 3项目的离子标签内显示可缩放的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;
}

有什么想法吗？谢谢！

Answer 1

似乎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/leonardosalles/ionic2-zoom-area

Answer 2

我只尝试使用内联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);
    }

Answer 3

缩放，缩小，双击图像缩放（在Ionic 4中测试）。

使用Photo Viewer。

仅适用于实时网址。

在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()" />

离子3图像捏和双击变焦

3 个答案: