这篇文章主要介绍了AngularJS 仿微信图片手势缩放的实例的相关资料,希望大家通过本文实现这样的功能，需要的朋友可以参考下
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) { 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.preventDefaul<em style="color:transparent">来源gao.dai.ma.com搞@代*码网</em>t(); 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 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 0) { positionY = 0; } else if (positionY </div><p>上面代码中我们新建了一个directive，方便多个地方重用。</p><p>当我们建立好directive时候，该如何使用呢？</p><div class="gaodaimacode"><pre class="prettyprint linenums">
我们只需要在img文件上设定一个属性即可，是不是很简单呢？
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
以上就是AngularJS 仿微信图片手势缩放的实例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：AngularJS 仿微信图片手势缩放的实例
转载请注明原文链接：AngularJS 仿微信图片手势缩放的实例
