Angular image zoom always in center

问题

I have the directive. There is zoom on scroll image and also you can drag image. I need, that image by default always be on the center (div or screen) and image also should be on center when you zoommed of your mouse wheel. Generally, center of image always should be on a center of screen (and you can drag image as before).

var app = angular.module('app', []);
app.directive('myDraggable', ['$document', '$timeout', function($document,  $timeout) {
  return function(scope, element, attr) {
    var startX = 0, startY = 0, x = 0, y = 0;
    scope.updateX = 0;
    scope.updatesize = 50;
   // scope.topsize = 1;
   
    function zoomController (zoomtype, updatesize) {
      var default_scale = 50;
      var zoomtype = zoomtype;
      var updatesize = updatesize;
      if (zoomtype == 1 && updatesize > 150) {
          return updatesize;
      } else if (zoomtype == 1 && updatesize < 150){
          return updatesize = updatesize * 1.02;
      } else if (zoomtype == 0 && updatesize > 20){
          return updatesize = updatesize / 1.02;
      } else {
          return updatesize;
      }
      
    }

    /* mouse wheel */
var doScroll = function (e) {
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    $timeout(function() {
         if (delta == 1) {
            scope.updatesize = zoomController(1, scope.updatesize);
          } else {
            scope.updatesize = zoomController(0, scope.updatesize);
            
          }
    }, 30);
    e.preventDefault();
};

if (window.addEventListener) {
    window.addEventListener("mousewheel", doScroll, false);
    window.addEventListener("DOMMouseScroll", doScroll, false);
} else {
    window.attachEvent("onmousewheel", doScroll);
}
 /* mouse wheel */
     scope.zoomInImage = function () {
      scope.updatesize = zoomController(1, scope.updatesize);
     }
     scope.zoomOutImage = function () {
      scope.updatesize = zoomController(0, scope.updatesize);
     }

    element.on('mousedown', function(event) {
      // Prevent default dragging of selected content
      event.preventDefault();
      startX = event.pageX - x;
      startY = event.pageY - y;
      $document.on('mousemove', mousemove);
      $document.on('mouseup', mouseup);
    });

    function mousemove(event) {
      y = event.pageY - startY;
      x = event.pageX - startX;

      scope.updateX = x;
      scope.updateY = y;

      scope.$apply();

      element.css({
        top: y + 'px',
        left:  x + 'px'
      });
    }

    function mouseup() {
      $document.off('mousemove', mousemove);
      $document.off('mouseup', mouseup);
    }
  };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    
   <img my-draggable src="http://www.singhsatya.com/wp-content/uploads/2014/06/hello_world.png" style="width:{{updatesize}}%; top:{{updateY}}px; left:{{updateX}}px; position:relative; cursor:pointer;"> 
    
    
</div>

回答1:

Wrap the img in a canvas and use transform: scale to zoom in/out.

/* jshint -W117 */
var app = angular.module('app', []);

function zoomController(zoomtype, updatesize) {
  if (zoomtype == 1 && updatesize > 550) {
    return updatesize;
  } else if (zoomtype === 1 && updatesize < 550) {
    return updatesize * 1.09;
  } else if (zoomtype === 0 && updatesize > 20) {
    return updatesize / 1.09;
  } else {
    return updatesize;
  }
}

app.directive('myDraggable', ['$document', '$timeout', function ($document, $timeout) {
  return function (scope, element) {
    var startX = 0,
      startY = 0,
      x = 0,
      y = 0;
    scope.updateX = 0;
    scope.updatesize = 100;
    /* mouse wheel */
    var doScroll = function (e) {
      e = window.event || e;
      var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
      $timeout(function () {
        if (delta == 1) {
          scope.updatesize = zoomController(1, scope.updatesize);
        } else {
          scope.updatesize = zoomController(0, scope.updatesize);

        }
      }, 30);
      e.preventDefault();
    };

    if (window.addEventListener) {
      window.addEventListener("mousewheel", doScroll, false);
      window.addEventListener("DOMMouseScroll", doScroll, false);
    } else {
      window.attachEvent("onmousewheel", doScroll);
    }
    /* mouse wheel */
    scope.zoomInImage = function () {
      scope.updatesize = zoomController(1, scope.updatesize);
    };
    scope.zoomOutImage = function () {
      scope.updatesize = zoomController(0, scope.updatesize);
    };

    element.on('mousedown', function (event) {
      // Prevent default dragging of selected content
      event.preventDefault();
      startX = event.pageX - x;
      startY = event.pageY - y;
      $document.on('mousemove', mousemove);
      $document.on('mouseup', mouseup);
    });

    function mousemove(event) {
      y = event.pageY - startY;
      x = event.pageX - startX;

      scope.updateX = x;
      scope.updateY = y;

      scope.$apply();

      element.css({
        top: y + 'px',
        left: x + 'px'
      });
    }

    function mouseup() {
      $document.off('mousemove', mousemove);
      $document.off('mouseup', mouseup);
    }
  };
}]);

.my-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.my-canvas > img {
  position:relative; 
  cursor:pointer;
  transition: 0.25s transform;
}

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div ng-app="app">
    <div class="my-canvas">
      
        <img my-draggable 
        src="http://www.singhsatya.com/wp-content/uploads/2014/06/hello_world.png"
        style="transform: scale({{updatesize / 100}}); top:{{updateY}}px; left:{{updateX}}px;">  
      
    </div>

  </div>
</body>

</html>

来源：https://stackoverflow.com/questions/29322572/angular-image-zoom-always-in-center