AngularJS 위 챗 사진 제스처 크기 조정 인 스 턴 스
선언:
최근 에 회 사 는 그림 크기 조정 기능 과 관련 된 혼합 응용 프로그램 을 만 들 었 는데 위 챗 처럼 touch 사건 을 지원 합 니 다.
친 측,실현 방안 이 좋 으 니 풀 어 주 고 여러분 과 공유 해 보 세 요.누 군가 사용 할 수 있 기 를 바 랍 니 다.
핵심 사상 은 바로 CSS 3 의 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 파일 에 속성 만 설정 하면 됩 니 다.간단 하지 않 습 니까?궁금 한 점 이 있 으 시 면 메 시 지 를 남기 거나 본 사이트 의 커 뮤 니 티 에 가서 토론 을 교류 하 세 요.읽 어 주 셔 서 감사합니다. 도움 이 되 셨 으 면 좋 겠 습 니 다.본 사이트 에 대한 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
AngularJS의 ng-options best practise쓸데없는 말은 하지 말고 바로 코드를 찍어라. 리소스를api에 직접 전달하지 말고 문자열이나 정형(예를 들어 귀속된ng-model="selected")을 권장합니다 angular에서 생성된 의value가 무엇인지, ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.