我在 ionic 框架的“ion-scroll”标签中加载图片。当我尝试放大时,图片变得模糊,字母也无法辨认。这种情况在我的浏览器和 Android 上都会发生。
我的模板的代码:
<ion-view view-title="{{map.name}}" ng-controller="MapsCtrl">
<ion-scroll zooming="true"
direction="xy"
delegate-handle="zoom-pane"
min-zoom="1"
max-zoom="20"
scrollbar-x="false"
scrollbar-y="false"
overflow-scroll="false">
<img style="width:100%; heigth:100%" ng-src="{{map.img}}"/>
</ion-scroll>
我使用的图片是 4642 x 4642 像素,因此放大时图像应该清晰。
浏览器这样做是为了性能优化,在渲染页面时无需保留图像的高分辨率版本。
我能够通过加载全尺寸图像然后使用来解决这个问题$ionicScrollDelegate
手柄以显示正确的缩放。它不是很优雅,但可以在 iOS 和 Android 中运行。
Template
<ion-scroll
id="imgContainer"
max-zoom="10.0" min-zoom="0.10"
zooming="true" direction="xy"
style="max-width:100%; height:100vh; width:100vh;"
overflow-scroll="false"
delegate-handle="imgContainer">
<img ng-src="{{imageUrl}}" />
</ion-scroll>
控制器
.controller('imageCtrl', function ($ionicPlatform, $ionicScrollDelegate, $scope, $state, $http, $stateParams)
{
//Create DOM img element
var tmpImg = document.createElement('img');
tmpImg.src = 'assets/images/hi_res_image.svg';
//Ensure image loads
var imgLoadPoll = setInterval(function () {
if (tmpImg.naturalWidth) {
clearInterval(imgLoadPoll);
//Full img dimensions can be used in scope
$scope.imageWidth = tmpImg.naturalWidth;
$scope.imageHeight = tmpImg.naturalHeight;
//Calculate Zoom Ratio
var imgContainerWidth = document.getElementById('imgContainer').clientWidth;
var zoomRatio = ( (imgContainerWidth) / tmpImg.naturalWidth);
//Load Image & Animate Zoom
console.log('Loaded: image (' + tmpImg.naturalWidth + 'px wide) into container (' + imgContainerWidth + 'px wide) requiring zoom: ' + zoomRatio);
$scope.imageUrl = 'assets/images/hi_res_image.svg';
$ionicScrollDelegate.$getByHandle('imgContainer').zoomTo(zoomRatio,1,0,0); //Set 1->0 to disable animation
}
}, 10);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)