web-dev-qa-db-ja.com

Ionic 2で画像をズーム可能にする方法

1つの画像を含むページがありますが、この画像をズーム可能にするにはどうすればよいですか？

マイページ

ionic-frameworkzoomionic2
10
matthiasunt

画像ビューアはIonic 2+

  • Installation

npm install --save ionic-img-viewer

  • App.module.tsを追加します
import { IonicImageViewerModule } from 'ionic-img-viewer';

@NgModule({
  declarations: [
    MyApp, 
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicImageViewerModule
  ],
  • プログラムによる使用法：

<img src = "IMAGE_URL" #myImage（click）= "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(); 
  }
}

デモ： デモionic-img-viewer

6
Yassine Abid

この回避策はIonicフォーラム：

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

私は「ピンチ」イベントを自分でコーディングします-それは非常に簡単でした（建物のフロアマップをズームするために使用します）：

_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)で、_this.height_と_this.width_（これは_<img>_タグに「バインド」されていました）を適切に変更します。

1
Kamil Kiełczewski