AngularJS imitation WeChat picture gesture zoom code

It is very common that images can be zoomed in and out. This article mainly introduces the relevant information of AngularJS imitating WeChat image gesture zooming examples. I hope you can realize such a function through this article. Friends who need it can refer to it. I hope it can help everyone. .

An example of AngularJS imitating WeChat image gesture scaling

Foreword:

Recently, the company is working on a hybrid application The project involves a picture zoom function, which supports touch events similar to WeChat.

After personal testing, the implementation plan is very good, so I released it and shared it with everyone. I hope someone can use it.

The core idea is to use the transform attribute of CSS3. Without further ado, let’s look at the code:

'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 : &#39;pinch&#39;)
    var originX = 0;
    var originY = 0;

    // start coordinate and amount of movement (mode : &#39;swipe&#39;)
    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({
        &#39;-webkit-transform-origin&#39; : &#39;0 0&#39;,
        &#39;transform-origin&#39;     : &#39;0 0&#39;
      });

      element.on(&#39;touchstart&#39;, touchstartHandler);
      element.on(&#39;touchmove&#39;, touchmoveHandler);
      element.on(&#39;touchend&#39;, 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 === &#39;&#39;) {
        if (touches.length === 1 && scale > 1) {

          mode = &#39;swipe&#39;;

        } else if (touches.length === 2) {

          mode = &#39;pinch&#39;;

          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 === &#39;swipe&#39;) {
        evt.preventDefault();

        moveX = touches[0].clientX - startX;
        moveY = touches[0].clientY - startY;

        positionX = initialPositionX + moveX;
        positionY = initialPositionY + moveY;

        transformElement();

      } else if (mode === &#39;pinch&#39;) {
        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 === &#39;&#39; || 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 = &#39;&#39;;
    }

    /**
     * @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 ? &#39;all cubic-bezier(0,0,.5,1) &#39; + duration + &#39;s&#39; : &#39;&#39;;
      var matrixArray = [scale, 0, 0, scale, positionX, positionY];
      var matrix   = &#39;matrix(&#39; + matrixArray.join(&#39;,&#39;) + &#39;)&#39;;

      element.css({
        &#39;-webkit-transition&#39; : transition,
        transition      : transition,
        &#39;-webkit-transform&#39; : matrix + &#39; translate3d(0,0,0)&#39;,
        transform      : matrix
      });
    }
  }

  return _directive;
};

In the above code, we have created a new directive for convenience Reuse in multiple places.

When we create a directive, how should we use it?

 <img style="width:100%;" src="assets/images/floorplan.jpeg" ng-pinch-zoom>

We only need to set an attribute on the img file. Isn’t it very simple?

Related recommendations:

jQuery implements mouse wheel control of image scaling

Detailed explanation of the solution to the scaling problem of HTML5 mobile page

Detailed explanation of examples of movable-view moving pictures and two-finger zoom in the WeChat applet

The above is the detailed content of AngularJS imitation WeChat picture gesture zoom code. For more information, please follow other related articles on the PHP Chinese website!