web-dev-qa-db-fra.com

Ionic 3 image pincer et double tap zoom

Je souhaite afficher une image SVG pouvant être zoomée dans une onglet d'ion d'un projet Ionic 3. L'effet recherché est un simple zoom régulier et pincé, rien de spécial.

J'ai essayé différentes combinaisons, mais je ne peux pas le faire fonctionner. C'est ce que j'ai en ce moment:

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

Des idées? Merci!

ionic-frameworkionic2ionic3
3
emiliosg

Il semble qu'Ionic Scroll soit confronté à des problèmes et un problème est toujours ouvert dans Ionic Github. J'ai donc développé un composant qui utilise Gesture pour pincer et recadrer. Cela vous permettra de zoomer sur n'importe quel élément de l'écran, les images, les images div, etc.

vous pouvez utiliser le composant en l'incluant simplement dans votre application.

Importez ZoomAreaModule.forRoot() dans le module principal de votre application

import { ZoomAreaModule } from 'ionic2-zoom-area';

@NgModule({
    ...
    imports: [
      ...
      ZoomAreaModule.forRoot()
    ],
    ...
})
export class AppModule {}

et ensuite vous pouvez utiliser le composant zone de zoom dans votre fichier HTML

<zoom-area> <img src="image-to-zoom.jpg" alt="zoom it" /> </zoom-area>

pour plus de documentation et d’explications, vous pouvez consulter la page Github du composant zone de zoom.

https://github.com/leonardosalles/ionic2-zoom-area

5
user4564782

Je n'ai essayé cela qu'avec une image SVG intégrée, mais j'ai utilisé la bibliothèque svg-pan-zoom ( https://www.npmjs.com/package/svg-pan-zoom ) avec hammerjs ( https://www.npmjs.com/package/hammerjs ). La bibliothèque svg-pan-zoom indique qu'elle fonctionne avec les SVG dans les objets HTML et intègre également des éléments.

Installez-les dans votre projet avec npm, importez-les dans votre composant, appliquez-les conformément aux instructions de la bibliothèque 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%;
}

Composant:

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);
    }
1
Avatarantella

J'ai le même problème depuis quelque temps. Aujourd'hui, ce problème n'est pas encore résolu ( https://github.com/driftyco/ionic/issues/6482 ). J'ai inversé la situation en utilisant un composant d'équipe non ionique2 (sorte de visualiseur d'images trouvé aléatoirement sur github). Mais je ne me sens pas satisfait de cette solution ...

Vous pouvez également essayer de suivre ceci: https://forum.ionicframework.com/t/image-pinch-and-zoom-in-ionic-working-code/72850?source_topic_id=45910 semble que certaines personnes ont compris comment le faire fonctionner là-bas

0
SMAGreg