사진을 확대하거나 축소할 수 있는 것은 매우 흔한 일입니다. 이 글에서는 WeChat의 사진 제스처 확대/축소를 모방한 AngularJS 관련 정보를 주로 소개합니다. 필요한 친구들은 이 글을 통해 참고하시기 바랍니다. . 모두에게 도움이 되기를 바랍니다.
WeChat 그림 동작 확대/축소를 모방한 AngularJS의 예
서문:
최근 회사에서는 WeChat과 유사한 터치 이벤트를 지원하는 그림 확대/축소 기능이 포함된 하이브리드 애플리케이션 프로젝트를 진행하고 있습니다.
제가 직접 테스트해본 결과 구현 계획이 매우 좋은 것으로 확인되어 공개하고 모든 분들에게 공유해 드렸으면 좋겠습니다.
핵심 아이디어는 CSS3의 변환 속성을 사용하는 것입니다. 더 이상 고민하지 않고 코드를 살펴보겠습니다.
'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; };
위 코드에서는 여러 위치에서 쉽게 재사용할 수 있도록 새로운 지시문을 만들었습니다.
디렉티브를 생성할 때 어떻게 사용해야 하나요?
<img style="width:100%;" src="assets/images/floorplan.jpeg" ng-pinch-zoom>
img 파일에 속성만 설정하면 됩니다. 매우 간단하지 않나요?
관련 권장 사항:
jQuery는 이미지 확대/축소의 마우스 휠 제어를 구현합니다.
HTML5 모바일 페이지의 확대/축소 문제에 대한 솔루션에 대한 자세한 설명
이동 보기 모바일 사진과 두 가지 예시에 대한 자세한 설명 -WeChat 애플릿을 손가락으로 확대하세요
위 내용은 AngularJS 모방 WeChat 사진 제스처 확대/축소 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!