AngularJS imitiert den WeChat-Zoomcode für Bildgesten

Es kommt häufig vor, dass Bilder vergrößert und verkleinert werden können. In diesem Artikel werden hauptsächlich die relevanten Informationen zum Imitieren von WeChat-Bildgesten-Zoomfunktionen vorgestellt Ich hoffe, es kann allen helfen.

Ein Beispiel für die Nachahmung der WeChat-Bildgestenskalierung durch AngularJS

Vorwort:

Vor Kurzem hat das Unternehmen dies getan Eine Hybridanwendung Das Projekt beinhaltet eine Bildzoomfunktion, die Berührungsereignisse ähnlich wie WeChat unterstützt.

Ich habe es persönlich getestet und festgestellt, dass der Implementierungsplan sehr gut ist. Deshalb habe ich ihn veröffentlicht und mit allen geteilt. Ich hoffe, jemand kann ihn verwenden.

Die Kernidee besteht darin, das Transformationsattribut von CSS3 zu verwenden. Schauen wir uns ohne weiteres den Code an:

'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;
};

Im obigen Code Wir haben eine neue Direktive erstellt, die sich bequem an mehreren Stellen wiederverwenden lässt.

Wenn wir eine Richtlinie erstellen, wie sollten wir sie verwenden?

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

Wir müssen nur ein Attribut für die IMG-Datei festlegen.

Verwandte Empfehlungen:

jQuery implementiert die Mausradsteuerung der Bildskalierung

Detaillierte Lösung für das Skalierungsproblem von HTML5 Mobile Seite

Detaillierte Erläuterung von Beispielen für bewegte Bilder mit beweglicher Ansicht und Zwei-Finger-Zoom im WeChat-Miniprogramm

Das obige ist der detaillierte Inhalt vonAngularJS imitiert den WeChat-Zoomcode für Bildgesten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!