离子 3 图像捏合和双击缩放

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

一段时间以来我遇到了同样的麻烦。今天，这个问题还没有解决(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似乎有些人想出了如何让它在那里工作

Answer 3

我只用内联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 4

缩放

，捏合，双击图像缩放(在Ionic 4中测试(。

使用照片查看器。

仅适用于实时网址。

在应用程序中。

import { PhotoViewer } from '@ionic-native/photo-viewer/ngx';
...
providers: [
    PhotoViewer, ...
],

在自定义中

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');
}

在海关.html

<img (click)="showPhoto()" />