[英]Ionic pinch to zoom in image
I just want to put an image in an ion-view make it full width and allow zoomIn/ zoomOut on pinch event. 我只想在离子视图中放置图像,使其全宽,并在发生捏合事件时允许zoomIn / zoomOut。 It looks easy but I could make it!!
看起来很简单,但我可以做到! I am new in Ionic1.
我是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="true" direction="xy" delegate-handle="zoom-pane" class="zoom-pane" scrollbar-x="false" scrollbar-y="false"> <img ng-src="img/map.png"> </ion-scroll> </ion-content> </ion-view>
Just you have to add overflow-scroll="false" property in ion-scroll 只是您必须在ion-scroll中添加overflow-scroll =“ false”属性
HTML 的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 的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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.