이 문서는 Ionic Advent Calendar 2017의 17 일째입니다.

핀치나 빵이라고 말한 제스처로 이미지를 줌하는 방법을 몰랐는데, 조사하면 Ionic Forum에 원하는 기능에 맞는 답변이 있었습니다. Ioni Forum에 깊이 감사하고 기사를 씁니다.
Ionic Forum - Zoom on image in Ionic?

하고 싶은 것 & 데모

안녕하세요 줌.



그러나
소스 코드

왜 기본값으로 할 수 없는가?

원래 이 작업은 Safari나 Chrome 같은 브라우저라면 할 수 있는데 WebView를 사용하고 있는 Ionic에서는 할 수 없습니다.
viewport 설정에서 작동하지 않도록 설정되어 있기 때문입니다.

index.html

  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

예를 들어, 이것을 이하와 같이 변경하면, 핀치 조작은 할 수 있게 됩니다만, 페이지 전체가 확대되기 때문에, 어쩐지-라고 하는 느낌입니다.

index.html

  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes">

※Ionic DevApp로 확인하면 iOS에서 밖에 동작하지 않았습니다.

Forum을 타고 있던 방법이라고 즈바리 화상만 확대·축소를 실시할 수 있으므로 보다 어플같은 느낌이 듭니다.

구현

링크처가 소스 코드가 됩니다(Forum의 내용의 전재입니다만・・・)
소스 코드

Hammer.js를 사용하여 제스처의 내용을 감시하고, pinch나 paned등의 조작시에, CSS를 재기록해 확대, 축소, 이동을 실시하고 있는 모습.

Hammer.js는 어디에서 설치했습니까? 라고 생각했지만, ionic-angular의gesture컴포넌트내의 hammer.ts가 그것에 해당하는 것 같다. 이것이 hammer.js를 TypeScript로 구현했습니까? 굉장하다.

ionic-team/ionic/src/gesture/hammer.ts

요약

나 자신, 「여기의 화상을 확대하고 싶다」라고 말했을 때에 「어라, 어떻게 하면 좋겠다」라고 엄청난 경험이 있습니다.
본 기사의 답변이 기재된 것은 올해의 7월이며, 시기 적절한 시기에 응답이 있었던 덕분에 무엇을 도망쳤습니다.
역시 뭔가 곤란한 일이 있으면 Ionic Forum을 보는 것이 좋습니다. 그 때 답변이 없어도 정기적으로 들여다 보는 것이 좋습니다.

덧붙여서, Direcive이므로 기본적으로 확대 축소 버튼을 만들거나 동적으로 줌, 무브 등의 처리를 할 수 없습니다. 하지만 Import에 인수를 늘려 ngOnChange라든지 여러가지 하면 할 수 있게 됩니다. 그 방법은 모두 쓴다・・・.

다른 방법

Ionic2-zoom-area라는 component도 존재합니다. 참고까지・・・.
그러나
소스 코드