イメージをズームできるようにする方法2

Question

イメージが1つのページがありますが、このイメージをズーム可能にするにはどうしたらいいですか？

My Page

Answer 1

私はイオンのフォーラムでこの回避策を見つけました：

HTML：

<ion-scroll (pinch)="pinchEvent($event)" scrollX="true" scrollY="true" zoom="true" style="width:100%;height:100%;text-align:center;"> 
    <div [ngStyle]="{'background':'url('+src+') no-repeat','width' : width + 'px', 'height' : height + 'px', 'transform' : 'rotate('+rotacion+'deg)', 'background-size' : 'contain', 'background-position' : 'center'}" style="margin-top:50px;margin-bottom:50px;"></div> 
</ion-scroll> 

.TS方法：

pinchEvent(e) { 
    this.width = this.pinchW * e.scale; 
    this.height = this.pinchH * e.scale; 

    if(this.timeout == null){ 
     this.timeout = setTimeout(() => { 
      this.timeout = null; 
      this.updateWidthHeightPinch(); 
     }, 1000); 
    } else { 
     clearTimeout(this.timeout); 
     this.timeout = setTimeout(() => { 
      this.timeout = null; 
      this.updateWidthHeightPinch(); 
     }, 1000); 
    } 
} 

updateWidthHeightPinch() { 
    this.pinchW = this.width; 
    this.pinchH = this.height; 
} 

Answer 2

Iコード "ピンチ" イベント自分自身を - それは非常に簡単でした（私は建物の床の地図をズームするためにそれを使用します）：

div class="floor-map" 
    style="position: relative; left: 0px; top: 0px; height: 0px; overflow: hidden; cursor: move;" 
    (touchstart)="mapMoveStart($event)" 
    (touchend)="mapMoveStop($event)" 
    (touchmove)="mapMove($event)" 
    tappable 
    #floorMapRef 
> 
    <img [style.width]="width + 'px'" 
     [style.height]="height + 'px'" ...> 
</div> 

そしてmapMoveで、私はこのようなものがあります：

pinchLenght = -1 // -1 means no pinch 
... 

mapMoveStart(event) { 
    this.pinchLenght = -1; // "reset" pinch 
    ... 
} 

mapMove(event) 
{ 
    if(event.touches.length==2) { // two fingers detection 
     let length = Math.abs(event.touches[0].clientX-event.touches[1].clientX) 
       + Math.abs(event.touches[0].clientY-event.touches[1].clientY); 

      if(this.pinchLenght < 0) { // case: first pinch "touch" 
      this.pinchLenght = length 
      } else { 
      let delta = length - this.pinchLenght; 
      this.pinchLenght = length; 

      if(delta>0) { 
       this.zoomMap(1.05); 
      } 
      if(delta<0) { 
       this.zoomMap(0.95); 
      } 
     } 
    } 
    ... 
} 
... 

そして方法zoomMap(zoomFactor: number)に私はきちんと（<img>タグに 'バインド' でした）this.heightとthis.widthを変更します。

Answer 3

あなたは2+イオンのため

• インストール

NPM --saveイオン-IMG-ビューアをインストール

• を画像ビューアを使用することができるアプリに追加します。 module.ts

import { IonicImageViewerModule } from 'ionic-img-viewer'; 

@NgModule({ 
    declarations: [ 
    MyApp, 
    HomePage 
    ], 
    imports: [ 
    BrowserModule, 
    IonicModule.forRoot(MyApp), 
    IonicImageViewerModule 
    ], 

• プログラムによる使用：

<のIMG SRC = "IMAGE_URL" #myImage（クリック）= "presentImage（MYIMAGE）" />

import { ImageViewerController } from 'ionic-img-viewer'; 

export class MyPage { 
    _imageViewerCtrl: ImageViewerController; 

    constructor(imageViewerCtrl: ImageViewerController) { 
    this._imageViewerCtrl = imageViewerCtrl; 
    } 

    presentImage(myImage) { 
    const imageViewer = this._imageViewerCtrl.create(myImage); 
    imageViewer.present(); 
    } 
} 

デモ：Demo ionic-img-viewer