离子捏放大图像 [英] Ionic pinch to zoom in image

问题描述

我只想将图像放在离子视图中，使其全宽，并允许zoomIn / zoomOut在捏合事件。看起来很容易，但我可以做到！我是Ionic1的新人。有人可以帮助我吗？

I just want to put an image in an ion-view make it full width and allow zoomIn/ zoomOut on pinch event. It looks easy but I could make it!! I am new in Ionic1. can someone help me?

这是我试过，但无法实现我想要的

This what I tried but couldn't achieve what I want:

< ion-view view-title =MAP>
< ion-content>
< ion-scroll zooming =truedirection =xydelegate-handle =zoom-paneclass =zoom-panescrollbar-x =falsescrollbar-y =false> ;
< img ng-src =img / map.png>
< / ion-scroll>
< / ion-content>
< / ion-view>

推荐答案

scroll =false属性在离子滚动

Just you have to add overflow-scroll="false" property in ion-scroll

HTML

        <ion-scroll id="mapImage"
                zooming="true"
                direction="xy"
                delegate-handle="zoom-pane"
                class="zoom-pane"
                min-zoom="1"
                max-zoom="15"
                overflow-scroll="false">
            <img ng-src="img/map.png">
    </ion-scroll>

CSS

.zoom-pane {
width: 100% !important;
height: 100% !important;
}

.zoom-pane .scroll {
    min-height: 100% !important;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;    
}

.zoom-pane img {
    width: 100% !important;
    vertical-align: top !important;
}

这篇关于离子捏放大图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！