angular仿微信图片放大功能
近期要写一个移动端两个手指图片放大的功能，由于我们项目是angular框架。一时间没有思路只能百度找一些angualr的文档，果然一下就出来了，而且非常实用。我用根据自己的需求改动了一下，最后完成的效果是图片自适应屏幕大小，图片超过一屏的时候图片是出现滚动的效果。没有超过一屏图片会居中显示。上下留有黑色背景。下面看代码
上面用了ng-zoom 和ng-pinch 的指令，我的方法是根据指令判断图片大小，超过一屏修改div的大小和图片高度一致。图片高度没有超过一屏div大小为屏幕大小。然后css居中显示就可以了。下面是css的代码
css规定了图片宽度大小，高度自适应。下面是指令的代码
define([ 'app' ], function(app) {
/*图片大小指令*/
app.directive('ngZoom',function(){
return {
restrict:'A',
controller: ['$scope','RPCService','globalContants','$rootScope','$document','$element',
function($scope,RPCService,globalContants,$rootScope,$document,$element) {
this.changeHeight = function(elHeight){
console.info("进入父"+elHeight);
console.info($element);
// angular.element(document.querySelector('#haha'))
$element.css({
height: elHeight + 'px'
});
}
}],
}
});
//图片指令
app.directive('ngPinch', function(){
// Runs during compile
return {
restrict:'A',
require:'?^ngZoom',
link: function($scope, element, attrs, controller) {
console.info(controller)
var elWidth, elHeight;
// mode : 'pinch' or 'swipe'
var mode = '';
// distance between two touche points (mode : 'pinch')
var distance = 0;
var initialDistance = 0;
// image scaling
var scale = 1;
var relativeScale = 1;
var initialScale = 1;
var maxScale = parseInt(attrs.maxScale, 10);
if (isNaN(maxScale) || maxScale <= 1) {
maxScale = 3;
}
// position of the upper left corner of the element
var positionX = 0;
var positionY = 0;
var initialPositionX = 0;
var initialPositionY = 0;
// central origin (mode : 'pinch')
var originX = 0;
var originY = 0;
// start coordinate and amount of movement (mode : 'swipe')
var startX = 0;
var startY = 0;
var moveX = 0;
var moveY = 0;
var image = new Image();
image.onload = function() {
elWidth = element[0].clientWidth;
elHeight = element[0].clientHeight;
//判断父级div高度
var windowHeight = innerHeight;//获取屏幕高度
if(elHeight>=windowHeight){
controller.changeHeight(elHeight);
}else{
controller.changeHeight(windowHeight);
}
element.css({
'-webkit-transform-origin' : '0 0',
'transform-origin' : '0 0'
});
element.on('touchstart', touchstartHandler);
element.on('touchmove', touchmoveHandler);
element.on('touchend', touchendHandler);
};
if (attrs.ngSrc) {
image.src = attrs.ngSrc;
} else {
image.src = attrs.src;
}
/**
* @param {object} evt
*/
function touchstartHandler(evt) {
console.info("进入第一个方法")
var touches = evt.originalEvent ? evt.originalEvent.touches : evt.touches;
startX = touches[0].clientX;
startY = touches[0].clientY;
initialPositionX = positionX;
initialPositionY = positionY;
moveX = 0;
moveY = 0;
}
/**
* @param {object} evt
*/
function touchmoveHandler(evt) {
console.info("进入第二个方法")
var touches = evt.originalEvent ? evt.originalEvent.touches : evt.touches;
if (mode === '') {
console.info(touches)
if (touches.length === 1 && scale > 1) {
mode = 'swipe';
} else if (touches.length === 2) {
mode = 'pinch';
initialScale = scale;
initialDistance = getDistance(touches);
console.info("赋值mode")
originX = touches[0].clientX -
parseInt((touches[0].clientX - touches[1].clientX) / 2, 10) -
element[0].offsetLeft - initialPositionX;
originY = touches[0].clientY -
parseInt((touches[0].clientY - touches[1].clientY) / 2, 10) -
element[0].offsetTop - initialPositionY;
}
}
if (mode === 'swipe') {
evt.preventDefault();
moveX = touches[0].clientX - startX;
moveY = touches[0].clientY - startY;
positionX = initialPositionX + moveX;
positionY = initialPositionY + moveY;
transformElement();
} else if (mode === 'pinch') {
console.info("进入pinch")
evt.preventDefault();
distance = getDistance(touches);
console.info("进入pinch2")
relativeScale = distance / initialDistance;
scale = relativeScale * initialScale;
positionX = originX * (1 - relativeScale) + initialPositionX + moveX;
positionY = originY * (1 - relativeScale) + initialPositionY + moveY;
transformElement();
console.info("进入pinch3")
}
}
/**
* @param {object} evt
*/
function touchendHandler(evt) {
var touches = evt.originalEvent ? evt.originalEvent.touches : evt.touches;
if (mode === '' || touches.length > 0) {
return;
}
if (scale < 1) {
scale = 1;
positionX = 0;
positionY = 0;
} else if (scale > maxScale) {
scale = maxScale;
relativeScale = scale / initialScale;
positionX = originX * (1 - relativeScale) + initialPositionX + moveX;
positionY = originY * (1 - relativeScale) + initialPositionY + moveY;
} else {
if (positionX > 0) {
positionX = 0;
} else if (positionX < elWidth * (1 - scale)) {
positionX = elWidth * (1 - scale);
}
if (positionY > 0) {
positionY = 0;
} else if (positionY < elHeight * (1 - scale)) {
positionY = elHeight * (1 - scale);
}
}
transformElement(0.1);
mode = '';
}
function transformElement(duration) {
var transition = duration ? 'all cubic-bezier(0,0,.5,1) ' + duration + 's' : '';
var matrixArray = [scale, 0, 0, scale, positionX, positionY];
var matrix = 'matrix(' + matrixArray.join(',') + ')';
element.css({
'-webkit-transition' : transition,
transition : transition,
'-webkit-transform' : matrix + ' translate3d(0,0,0)',
transform : matrix
});
}
/**
* @param {Array} touches
* @return {number}
*/
function getDistance(touches) {
var d = Math.sqrt(Math.pow(touches[0].clientX - touches[1].clientX, 2) +
Math.pow(touches[0].clientY - touches[1].clientY, 2));
return parseInt(d, 10);
}
}
};
});
});
指令的代码这部分很常见，都可以百度到，不多做解释....