1

我使用 Ionic4 和 Angular8。

我想在智能手机上捏合/捏出屏幕。

我尝试了什么 以下描述已添加到 index.html。

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

但出乎意料的是，它并没有在实际机器上工作。

我也试过。

以下内容已添加到 .

scrollX = "true"

然后，您现在可以在智能手机上捏合/张开屏幕。但我不知道为什么或为什么。

此外，如果 的高度大到需要垂直滚动，我在捏合屏幕后无法水平滚动。

我不知道为什么。我想在屏幕放大后进行水平滚动工作。

如果有人知道怎么做，请告诉我。

4

2 回答 2

4

您可以使用Pinch zoom for Angular.

该模块提供了使用触摸屏上的手势放大、缩小和定位图像的机会。

查看现场演示。它易于安装。

1 - 安装 npm 包。

npm i ngx-pinch-zoom

2 - 在你的 ts 中导入模块。喜欢home.module.ts：

import { PinchZoomModule } from 'ngx-pinch-zoom';

@NgModule({
    imports: [ PinchZoomModule ]
})

3 - 在你的 html 中

<pinch-zoom>
    <img src="path_to_image" /> 
</pinch-zoom>
于 2020-02-02T09:26:24.647 回答
1

This works in ionic 4+. Tested on ionic 5.

Pinch to zoom on the entire page or specific div or on image.

You can do following.

<ion-content scrollX="true" scrollY="true">
...your content.
<ion-content>

Above method enables pinch to zoom on entire page on web. Not for mobile platforms.

For Mobile platforms. Install pinch to zoom from - http://ivylab.space/pinch-zoom

or npm i ngx-pinch-zoom

follow @AliGhassan Solution for remaining setup.

Now to enable pinch to zoom on entire web page, Set the html tags for ionic content as follows in your page.html file

<ion-content scrollX="true" scrollY="true">
   <pinch-zoom [properties]="zoomProperties">
     <ion-grid>
       ....contents.. 
     </ion-grid>
   </pinch-zoom>
</ion-content>

Create a variable for zoom properties as follows in page.ts file

zoomProperties = {
  "double-tap": true, // double tap to zoom in and out.
  "overflow": "hidden",// Am not sure. But Documentation says, it will not render elements outside the container.
  "wheel": false, // Disables mouse - To enable scrolling. Else mouse scrolling will be used to zoom in and out on web.
  "disableZoomControl": "disable", // stops showing zoom + and zoom - images.
  "backgroundColor": "rgba(0,0,0,0)" // Makes the pinch zoom container color to transparent. So that ionic themes can be applied without issues.
 }

Now, You should be able to pinch to zoom on mobile platforms as well.

If you are further interested, You can implement the same concept on an image or a div etc.

Thank you :)

于 2021-01-09T00:21:30.567 回答