AngularJS 仿微信圖片手勢縮放的實例
更新時間：2017年09月28日 09:11:00 作者：天外野草
這篇文章主要介紹了AngularJS 仿微信圖片手勢縮放的實例的相關(guān)資料,希望大家通過本文實現(xiàn)這樣的功能，需要的朋友可以參考下
AngularJS 仿微信圖片手勢縮放的實例
前言：
最近，公司做一個混合應(yīng)用項目，涉及到一個圖片縮放功能，類似微信那樣支持touch事件。
親測，實現(xiàn)方案很不錯，所以放出來，和大家分享一下，希望有人能用得到。
核心思想就是用到了CSS3的transform屬性， 不多說，我們看代碼：
'use strict';
/**
* @ngInject
*/
module.exports = function () {
var _directive = {
restrict : 'A',
scope : false,
link : _link
};
function _link(scope, element, attrs) {
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;
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) {
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) {
var touches = evt.originalEvent ? evt.originalEvent.touches : evt.touches;
if (mode === '') {
if (touches.length === 1 && scale > 1) {
mode = 'swipe';
} else if (touches.length === 2) {
mode = 'pinch';
initialScale = scale;
initialDistance = getDistance(touches);
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') {
evt.preventDefault();
distance = getDistance(touches);
relativeScale = distance / initialDistance;
scale = relativeScale * initialScale;
positionX = originX * (1 - relativeScale) + initialPositionX + moveX;
positionY = originY * (1 - relativeScale) + initialPositionY + moveY;
transformElement();
}
}
/**
* @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 = '';
}
/**
* @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);
}
/**
* @param {number} [duration]
*/
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
});
}
}
return _directive;
};
上面代碼中我們新建了一個directive，方便多個地方重用。
當我們建立好directive時候，該如何使用呢？
<img style="width:100%;" src="assets/images/floorplan.jpeg" ng-pinch-zoom>
我們只需要在img文件上設(shè)定一個屬性即可，是不是很簡單呢？
如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
對于一個Sass用戶,只需要理解Sass擴展部分如何工作的,就能完全理解SCSS,下面這篇文章主要給大家介紹了關(guān)于Angular中SASS樣式的詳細使用教程,需要的朋友可以參考下2022-05-05
本文給大家分享的是使用angularjs路由框架實現(xiàn)的一個簡單頁面跳轉(zhuǎn)功能，非常的實用，也很詳細，有需要的小伙伴可以參考下2017-02-02
AngularJS2中一種button切換效果的實現(xiàn)方法（二）
這篇文章主要介紹了AngularJS2中一種button切換效果的實現(xiàn)方法（二）,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
本文主要給大家匯總了一下angular.element的方法，十分的詳細，這里推薦給大家 參考下。2015-01-01
AngularJS ng-repeat數(shù)組有重復(fù)值的解決方法
不知道大家是否遇到過這個問題，在當Angular.JS ng-repeat數(shù)組中有重復(fù)項時，系統(tǒng)就會拋出異常，這是該怎么做？本文通過示例代碼介紹了詳細的解決方法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-10-10
本篇文章主要介紹了詳解angularJS+Ionic移動端圖片上傳的解決辦法 ，具有一定的參考價值，有需要的可以了解一下2017-09-09
下面小編就為大家?guī)硪黄褂胕onic播放輪詢廣告的實現(xiàn)方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
Agularjs妙用雙向數(shù)據(jù)綁定實現(xiàn)手風(fēng)琴效果
最近在工作總遇到需要實現(xiàn)類似手風(fēng)琴效果的需求,下面小編通過本文給大家分享angularjs巧用雙向數(shù)據(jù)綁定實現(xiàn)手風(fēng)琴效果,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了Angular2 路由問題修復(fù)詳解的相關(guān)資料,并建了一個測試工程，把詳細的過程分享給大家，需要的朋友可以參考下2017-03-03
Angular4學(xué)習(xí)筆記之準備和環(huán)境搭建項目
這篇文章主要介紹了Angular4學(xué)習(xí)筆記之準備和環(huán)境搭建項目，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08