Ionic 3画像ピンチとダブルタップzoom

Question

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

任意のアイデア？ありがとう！

Answer 1

私はしばらくの間同じ問題を抱えています。 今日、この問題はまだ解決されていません（https://github.com/driftyco/ionic/issues/6482）。 非イオン2チームコンポーネント（githubでランダムに見つかった画像ビューアの一種）を使用してこれを回しました。しかし、私はあなたも、このに従うことを試みることができます...

をこの溶液を満たして感じることはありません：https://forum.ionicframework.com/t/image-pinch-and-zoom-in-ionic-working-code/72850?source_topic_id=45910 は、一部の人々はそれが

Answer 2

を動作させる方法を考え出したようですが、イオンスクロールが直面していると思われるようですいくつかの問題や問題がIonic Githubでまだ開いているので、Gestureを使用してピンチとパンするコンポーネントを開発しました。これにより、画面、画像、divなどの任意の要素をズームすることができます。

あなたのアプリケーションに簡単に含めてコンポーネントを使用することができます。あなたのアプリのメインモジュールで

インポートZoomAreaModule.forRoot()

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

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

、その後、あなたはGitHubのを確認することができ、あなたのHTMLファイル内に多くの文書や説明のための

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

をズームエリアのコンポーネントを使用することができますズームエリアコンポーネントのページ。

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

Answer 3

Iは、インラインSVG画像でこれを試みたが、私はhammerjs（https://www.npmjs.com/package/hammerjs）と共にSVGパン - ズームライブラリ（https://www.npmjs.com/package/svg-pan-zoom）を使用します。 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); 
    }