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);
}

}
};
});

});

指令的代码这部分很常见，都可以百度到，不多做解释....

angular仿微信图片放大功能相关推荐

图片无限放大，不模糊，图片移动，仿微信图片放大
写此程序背景看到微信的图片浏览的强大功能,于是自己写了一个.原则上可以无限放大,但是放大部分像素必须有原图片的1个像素,最小也不能小于1*1像素. 思路: 功能解剖: 缩放:微信的缩放能缩 ...
java 如何放大动画图,Android仿微信图片放大动画
#今年三月份直接上手做的android,代码写的不规范,有问题希望指出,谢谢(app数英) 类似于微信图片浏览的效果,我的做法是在两个activity A\B之间传递图片的位置信息思路:在acti ...
android点击加号,Android仿微信图片上传带加号且超过最大数隐藏功能
1.仿照微信空间上传图片,显示图片数量以及超过最大,上传按钮隐藏功能 2.上效果图 3.上代码,主要是Adapter类 /** * Created by zhangyinlei on 2018/3/2 ...
Android 使用GridView+仿微信图片上传功能(附源代码)
由于工作要求最近在使用GridView完成图片的批量上传功能,我的例子当中包含仿微信图片上传.拍照.本地选择.相片裁剪等功能,如果有需要的朋友可以看一下,希望我的实际经验能对您有所帮助. 直接上图,下 ...
android开发百度地图坐标偏差,利用百度地图Android sdk高仿微信发送位置功能及遇到的问题...
接触了百度地图开发平台半个月了,这2天试着模仿了微信给好友发送位置功能,对百度地图的操作能力又上了一个台阶我在实现这个功能的时候,遇到一些困难,可能也是别人将会遇到的困难,特在此列出 1.在微信发送 ...
Android开发之使用GridView+仿微信图片上传功能(附源代码)
前言:如果转载文章请声明转载自:https://i.cnblogs.com/EditPosts.aspx?postid=7419021 .另外针对有些网站转载本人的文章结果源码链接不对的问题,本人在 ...
Kotlin 实战翻译 —— 仿微信图片选择开源库ImagePicker
2017.10.27补充在用Kotlin写项目的时候由于不能使用生成成员变量的快捷键,导致我写findViewById浪费了好多时间,后来才发现Kotlin对Android有更好的支持,可以完全不用 ...
Android仿微信图片上传，可以选择多张图片，缩放预览，拍照上传
仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 如果不知道如何上传 ...
java实现仿微信app聊天功能_Android仿微信语音聊天功能
本文实例讲述了Android仿微信语音聊天功能代码.分享给大家供大家参考.具体如下: 项目效果如下: 具体代码如下: AudioManager.java package com.xuliugen.we ...

angular仿微信图片放大功能

angular仿微信图片放大功能相关推荐

最新文章

热门文章