Zoom spécifiques dans un div dans Cordova/Ionique

J'ai ajouté la fenêtre avec les propriétés permettant de zoom/mise à l'échelle. Et j'ai ajouté ces vers du code natif:

WebSettings settings = super.appView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setDisplayZoomControls(true);
settings.setSupportZoom(true);

Je suis en mesure de zoom, mais avec mon point de vue, ion-header-bar et ion-nav-bar obtient zoom. J'ai essayé de donner l'en-tête de la css, pour le maintenir fixe:

position: fixed;
top: 0px;
left: 0px;

mais encore, il faudrait obtenir agrandie.

Mon index.html a un ion-header-bar, qui contient une image.
Les modèles vont dans 

<ion-nav-view class="has-header"></ion-nav-view>

Le modèle dans lequel j'ai besoin de zoomer dans une div est d'avoir un 'ion-view" et ça ressemble: 

<ion-view>
    <ion-nav-bar class="bar-stable">
        <ion-nav-buttons side="right">
            icon1
        </ion-nav-buttons>
        <ion-nav-buttons side="left">
            icon2
        </ion-nav-buttons>
    </ion-nav-bar>
    <div>
        Multiple divs in here, which are containers for html and css data we receive via AJAX requests. And this is here I need zooming in.
    </div>
</ion-view>

PS: Serait-il si j'ai ajouter un code HTML(avec meta viewport, aucun en-tête, mais le corps et les divs) à l'intérieur de la ion-view?

OriginalL'auteur Keval | 2015-02-12

  1. 8

    Je voulais avoir des fonctionnalités similaires et a été en mesure de le faire fonctionner à l'aide de ion de défilement. 

    <ion-scroll zooming="true" direction="xy" style="width: 100%; ">
  <div></div>
</ion-scroll>
    Mes divs sont modifiés par DOM après les requêtes AJAX. J'ai essayé d'ajouter ces divs dans le ion-scroll mais alors les données reçues ne se charge pas, j'.e la div à l'intérieur de ion-faites défiler la liste reste vide. J'ai essayé d'ajouter l'ion de défilement de code dans le jQuery, où je suis en modifiant le code HTML de la div comme ceci: $("#container").html('<ion-scroll zooming="true" direction="xy" style="width: 100%; "><div>' + data + '</div></ion-scroll>'); et le doc charge, mais ensuite je ne peux pas faire défiler. Juste pour être sûr, j'ai ajouté un div avec du texte dans le code HTML, dans ion-faites défiler la liste et j'ai été en mesure de zoom dans ce texte.
    1.2+, vous devez ajouter ceci: les .config(function($ionicConfigProvider) { $ionicConfigProvider.scrolling.jsScrolling(true); }) Via forum.ionicframework.com/t/...

    OriginalL'auteur Santiago

  2. 1

    Une autre solution pourrait être d'utiliser hammerjs pour les gestes multi-touch et la carte de pincement et pincer pour zoomer le contenu à l'aide de css.

    Quelque chose comme ceci:

    var hammerTime = new Hammer.Manager($('div.youWantToScale')[0], {touchAction: "pan-x pan-y"});
var pinch = new Hammer.Pinch();
var lastZoom;
hammerTime.add(pinch);
hammerTime.on("pinchout pinchin", function(e) {
   var currentZoom = Number($('div.youWantToScale').css("zoom"));
   if (lastZoom) {
      var newZoom = currentZoom + (e.scale - lastZoom);

      //bounds checking for your zoom, min=1 and max=3 here
      newZoom = newZoom < 1 ? 1 : (newZoom > 3 ? 3 : newZoom); 
      $('div.youWantToScale').css("zoom", newZoom);
   } 
   lastZoom = e.scale;
});

hammerTime.on("pinchstart", function (e) {
   //Seems clunky, but reset the lastZoom on a new pinch   
   lastZoom = undefined;
});
    Je suis en mesure de zoom dans le div que je veux, mais maintenant je ne peux pas faire défiler vers le bas. Et maintenant, l'application est confrontée à de lourds lag sur cette page, en raison du plugin.
    Hmm, peut-être essayer d'ajouter var pan = new Hammer.Pan() et réglage de la hammerTime.add à hammerTime.add(pinch, pan) Semble que le marteau peut être overridding normal des événements tactiles... Hmm, en outre, le fait d'ajouter le css: overflow: scroll; -webkit-overflow-scrolling: touch; d'aide?
    Merci pour la réponse encore une fois, mais pas de changement à tous. Toujours pas de défilement. Et le heavy gal est toujours le même

    OriginalL'auteur laughingpine

  3. 0

    Grâce à @laughinpine ci-dessus, je suis venu avec cette solution Ionique, 4:

    <ion-content scrollX scrollY>
  <div #map style="background-image: url('/assets/images/map.png');">
  </div>
</ion-content>


import * as Hammer from 'hammerjs';

@Component({
  ...
})
export class MapPage
  @ViewChild('map') public map: ElementRef;

  private readonly minZoom: number = 0.3;
  private readonly maxZoom: number = 2.0;
  private readonly zoomVelocity: number = 0.005;

  public constructor(private renderer: Renderer2) {}

  private addPinchToMap(): void {
    const hammerTime = new Hammer.Manager(this.map.nativeElement, { touchAction: 'pan-x pan-y' });
    const pinch = new Hammer.Pinch();
    let lastZoom: number = 1; //Default original zoom

    hammerTime.add(pinch);

    hammerTime.on('pinchin', (event: MSGestureEvent) => {
      let newZoom = lastZoom - this.zoomVelocity;
      newZoom = newZoom < this.minZoom ? this.minZoom : newZoom;
      this.renderer.setStyle(this.map.nativeElement, 'zoom', newZoom);
      lastZoom = newZoom;
    });

    hammerTime.on('pinchout', (event: MSGestureEvent) => {
      let newZoom = lastZoom + this.zoomVelocity;
      newZoom = newZoom > this.maxZoom ? this.maxZoom : newZoom;
      this.renderer.setStyle(this.map.nativeElement, 'zoom', newZoom);
      lastZoom = newZoom;
    });
  }
}

    OriginalL'auteur Russ