Zoomen in einen bestimmten div in Cordova/Ionic

Habe ich den viewport-Eigenschaften ermöglicht das Zoomen/skalieren. Und ich fügte diese den native-code:

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

Ich bin in der Lage zu Zoomen, doch zusammen mit der meiner Ansicht ion-header-bar und ion-nav-bar wird gezoomt. Ich habe versucht, den header css, halten es fest:

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

aber immer noch, es würde sich vergrößert.

Meine index.html hat eine ion-header-bar, die ein Bild enthält.
Die Vorlagen gehen in 

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

Dem template, in dem ich verlangen, Zoomen in einen bestimmten div-Element ist ein " ion " -Blick und es sieht aus wie: 

<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: Würde es ein Unterschied, ob ich einen vollständigen HTML-code(mit meta-viewport, keine header, sondern Körper und divs) innerhalb der ion-view?

InformationsquelleAutor Keval | 2015-02-12
  1. 8

    Wollte ich um ähnliche Funktionalität zu erhalten und war in der Lage, es zu bekommen, um die Arbeit mit ion-Blättern. 

    <ion-scroll zooming="true" direction="xy" style="width: 100%; ">
  <div></div>
</ion-scroll>
    • Meine divs geändert via DOM nach AJAX-Anfragen. Ich habe versucht, hinzufügen diese divs innerhalb des ion-scroll aber dann die empfangenen Daten nicht geladen werden, ich.e der div innerhalb von Ionen-scrollen bleibt leer. Ich versucht, indem die Ionen-scroll-code innerhalb des jQuery wo ich bin, ändern die HTML-div-so: $("#container").html('<ion-scroll zooming="true" direction="xy" style="width: 100%; "><div>' + data + '</div></ion-scroll>'); und der doc lädt, aber dann kann ich nicht scrollen. Nur um sicher zu sein ich habe ein div mit text in der HTML -, in-Ionen-Blättern, und ich war in der Lage, um zu vergrößern in diesem text.
    • In 1.2+, müssen Sie diese als gut: .config(function($ionicConfigProvider) { $ionicConfigProvider.scrolling.jsScrolling(true); }) Via forum.ionicframework.com/t/...
    InformationsquelleAutor Santiago
  2. 1

    Andere Lösung könnte sein, die Nutzung hammerjs für multi-touch-gesten und Karte aufziehen und zuziehen zum Zoomen der Inhalte mit css.

    Etwas wie dieses:

    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;
});
    • Ich bin in der Lage, vergrößern das div-ich will, aber jetzt kann ich nicht nach unten scrollen. Und jetzt ist die app vor schwerem lag auf der Seite, durch das plugin.
    • Hmm, vielleicht versuchen Sie var pan = new Hammer.Pan() und Anpassung der hammerTime.add zu hammerTime.add(pinch, pan) Scheint, wie hammer könnte overridding die normalen touch-events... Hmm, auch, wirkt sich das hinzufügen der css: overflow: scroll; -webkit-overflow-scrolling: touch; überhaupt helfen?
    • Vielen Dank für die Beantwortung wieder, aber überhaupt keine Veränderung. Noch nicht in der Lage, um zu Blättern. Und der heavy-Verzögerung ist immer noch die gleiche
    InformationsquelleAutor laughingpine
  3. 0

    Dank @laughinpine oben, ich kam mit dieser Lösung in Ionischer 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;
    });
  }
}
    InformationsquelleAutor Russ
Schreibe einen Kommentar