web-dev-qa-db-ja.com

Ionic 3画像ピンチとダブルタップズーム

Ionic 3プロジェクトのイオンタブ内にズーム可能なSVG画像を表示したい。私が探している効果は、通常のピンチとダブルタップズームだけで、特別なことは何もありません。

さまざまな組み合わせを試しましたが、うまくいきません。これは私が今持っているものです：

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

何か案は？ありがとう！

ionic-frameworkionic2ionic3
4
EmilioSG

Ionic Scrollはいくつかの問題に直面していて、問題はまだIonic Githubで開いているようです。そこで、Gestureを使用してピンチアンドパンするコンポーネントを開発しました。これ画面、画像、divなどの任意の要素をズームできます...

コンポーネントをアプリに含めるだけで使用できます。

アプリのメインモジュールにZoomAreaModule.forRoot()をインポートします

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

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

次に、HTMLファイルでズーム領域コンポーネントを使用できます

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

詳細なドキュメントと説明については、ズームエリアコンポーネントのGithubページを確認してください。

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

5
user4564782

画像のズーム、ピンチ、ダブルタップズーム（Ionic 4）でテスト済み）。

フォトビューア を使用します。

ライブURLでのみ機能します。

App.module.ts内

import { PhotoViewer } from '@ionic-native/photo-viewer/ngx';

...

providers: [
    PhotoViewer, ...
],

Custom.tsで

import { PhotoViewer } from
'@ionic-native/photo-viewer/ngx';

...

constructor(private photoViewer: PhotoViewer) { }

...

showPhoto()
{
    console.log("showPhoto");
   this.photoViewer.show('https://dummyimage.com/600x400/000/fff');
}

Custom.htmlで

<img (click)="showPhoto()" />
1
Amit Pandey

私はしばらくの間同じ問題を抱えています。現在、この問題はまだ解決されていません（ https://github.com/driftyco/ionic/issues/6482 ）。私は非ionic2チームコンポーネント（githubでランダムに見つかった一種の画像ビューア）を使用してこれを好転させました。しかし、私はこの解決策に満足していません...

これに従うこともできます： https://forum.ionicframework.com/t/image-pinch-and-zoom-in-ionic-working-code/72850?source_topic_id=4591 何人かの人々はそれをそこで機能させる方法を考え出しました

1
SMAGreg

インラインSVG画像でこれを試しただけですが、svg-pan-zoomライブラリ（ https://www.npmjs.com/package/svg-pan-zoom ）を一緒に使用しましたHammerjs（ https://www.npmjs.com/package/hammerjs ）。 svg-pan-zoomライブラリは、HTMLオブジェクトのSVGおよび埋め込み要素でも機能すると述べています。

それらをnpmを使用してプロジェクトにインストールし、コンポーネントにインポートします。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%;
}

成分：

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