Angular+IonicでPinch zoom(拡大縮小機能)を導入する方法

UNO

どうも、こんにちは。widen uno（@WidenUno）です。

AngularでPinch zoom(拡大縮小機能)を導入する方法を簡単な技術メモとしてまとめました。
ぜひ参考にしてみて下さい。

UNO
ウェブサイト制作と投資を愛するブロガー
【経歴】
・東京在住
・外資系企業就職
・自粛期間に複業スタート
・2021年2月から本格的にブログ開始
・半年で月間2万PV達成
・1年で月間5万PV達成
・2023年月間9.4万PV達成

必要なパッケージ

Angularプロジェクトでピンチズームを導入する場合、いくつか対応案がありますが、ngx-pinch-zoomのパッケージをおすすめします。

画面上でピンチされたことをトリガーとして、自身で実装することもできますが、開発コストもかかりますし、パッケージを使った方が動作が安定していると思います。

ngx-pinch-zoom

Pinch zoom component for Angular.. Latest version: 2.6.2, last published: 3 years ago. Start using ngx-pinch-zoom in your project by running `npm i ngx-pinch-zo...

www.npmjs.com

導入方法

パッケージをnpmコマンドを使用し、インストールします。

npm i ngx-pinch-zoom

プロジェクト共通にしたい場合は、app.module.tsに下記を記載します。

import { PinchZoomModule } from ‘ngx-pinch-zoom’;

@NgModule({
  imports: [ PinchZoomModule ]
})

特定ページのみで使用したい場合は、特定ページのTypeScriptに上記を記載すればOKです。

使用方法

HTML側でピンチズームしたい要素の親に<pinch-zoom>を記載をすれば簡単に使用できます。

<pinch-zoom>
  <img src=”path_to_image” />
</pinch-zoom>

パラメータ使用し、ボタンからのコントロールやピンチズーム量を変更することもできます。

パラメータ情報はこちらをご参照ください。

ピンチズーム領域の背景色を変更した場合は下記のように記載します。

<pinch-zoom
backgroundColor=”#fff”>
  <img src=”path_to_image” />
</pinch-zoom>

ピンチズームのオンオフをTypeScript側で制御したい場合は、下記のように記載します。
＊flagはTure/Falseのboolean型で宣言します。

<pinch-zoom
disableZoomControl=”flag”>
  <img src=”path_to_image” />
</pinch-zoom>

ピンチズームをピンチズーム領域外のボタンで制御したい場合は、下記のようにtoggleZoomを使用すると実現が可能です。

<pinch-zoom #myPinch>
  <img src=”path_to_image” />
</pinch-zoom>

<button (click)=”myPinch.toggleZoom()”>
</button>

Ionicでの注意事項

Ionicでngx-pinch-zoomを使用する場合、<ion-content>を<pinch-zoom>の子要素して指定することができないため、注意が必要です。

<ion-content>を親要素とし、その中に<pinch-zoom>を指定してあげましょう。

HTMLの正しい例。

<ion-content>
  <pinch-zoom>
    <img src=”path_to_image” />
  </pinch-zoom>
</ion-content>

下記実装はNG。

<pinch-zoom>
  <ion-content>
    <img src=”path_to_image” />
  </ion-content>
</pinch-zoom>

簡単な説明となりましたが、ぜひ参考にしてみてください。

ITエンジニアの転職には、IT求人ナビがおすすめですよ。