[英]Zooming in a specific div in Cordova/Ionic
我添加了视口,其属性允许缩放/缩放。 我将这些添加到本机代码中:
WebSettings settings = super.appView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setDisplayZoomControls(true);
settings.setSupportZoom(true);
我能够缩放,但随着我的观点, ion-header-bar
和ion-nav-bar
变焦。 我尝试给标头css,以保持固定:
position: fixed;
top: 0px;
left: 0px;
但它仍然会变焦。
我的index.html有一个ion-header-bar
,它包含一个图像。 模板进入
<ion-nav-view class="has-header"></ion-nav-view>
我需要放大特定div的模板有一个'离子视图',它看起来像:
<ion-view>
<ion-nav-bar class="bar-stable">
<ion-nav-buttons side="right">
icon1
</ion-nav-buttons>
<ion-nav-buttons side="left">
icon2
</ion-nav-buttons>
</ion-nav-bar>
<div>
Multiple divs in here, which are containers for html and css data we receive via AJAX requests. And this is here I need zooming in.
</div>
</ion-view>
PS:如果我在ion-view
添加完整的HTML代码(带有meta视口,没有标题,但是正文和div),这是否重要?
我想获得类似的功能,并能够使用离子滚动使其工作。
<ion-scroll zooming="true" direction="xy" style="width: 100%; ">
<div></div>
</ion-scroll>
另一个解决方案可能是使用hammerjs进行多点触控手势,并使用css来缩小和缩小内容以缩放内容。
像这样的东西:
var hammerTime = new Hammer.Manager($('div.youWantToScale')[0], {touchAction: "pan-x pan-y"});
var pinch = new Hammer.Pinch();
var lastZoom;
hammerTime.add(pinch);
hammerTime.on("pinchout pinchin", function(e) {
var currentZoom = Number($('div.youWantToScale').css("zoom"));
if (lastZoom) {
var newZoom = currentZoom + (e.scale - lastZoom);
//bounds checking for your zoom, min=1 and max=3 here
newZoom = newZoom < 1 ? 1 : (newZoom > 3 ? 3 : newZoom);
$('div.youWantToScale').css("zoom", newZoom);
}
lastZoom = e.scale;
});
hammerTime.on("pinchstart", function (e) {
//Seems clunky, but reset the lastZoom on a new pinch
lastZoom = undefined;
});
感谢上面的@laughinpine,我在Ionic 4中提出了这个解决方案:
<ion-content scrollX scrollY>
<div #map style="background-image: url('/assets/images/map.png');">
</div>
</ion-content>
import * as Hammer from 'hammerjs';
@Component({
...
})
export class MapPage
@ViewChild('map') public map: ElementRef;
private readonly minZoom: number = 0.3;
private readonly maxZoom: number = 2.0;
private readonly zoomVelocity: number = 0.005;
public constructor(private renderer: Renderer2) {}
private addPinchToMap(): void {
const hammerTime = new Hammer.Manager(this.map.nativeElement, { touchAction: 'pan-x pan-y' });
const pinch = new Hammer.Pinch();
let lastZoom: number = 1; // Default original zoom
hammerTime.add(pinch);
hammerTime.on('pinchin', (event: MSGestureEvent) => {
let newZoom = lastZoom - this.zoomVelocity;
newZoom = newZoom < this.minZoom ? this.minZoom : newZoom;
this.renderer.setStyle(this.map.nativeElement, 'zoom', newZoom);
lastZoom = newZoom;
});
hammerTime.on('pinchout', (event: MSGestureEvent) => {
let newZoom = lastZoom + this.zoomVelocity;
newZoom = newZoom > this.maxZoom ? this.maxZoom : newZoom;
this.renderer.setStyle(this.map.nativeElement, 'zoom', newZoom);
lastZoom = newZoom;
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.