AngularJS 仿微信图片手势缩放的实例
前言：
最近，公司做一个混合应用项目，涉及到一个图片缩放功能，类似微信那样支持touch事件。
亲测，实现方案很不错，所以放出来，和大家分享一下，希望有人能用得到。
核心思想就是用到了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 "htmlcode">
<img style="width:100%;" src="/UploadFiles/2021-04-02/floorplan.jpeg">
我们只需要在img文件上设定一个属性即可，是不是很简单呢？
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！