离子3图像捏和双击变焦

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

似乎Ionic Sc​​roll面临一些问题,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