Angular 图片缩放始终在中心

Question

我有指令。滚动图像有缩放功能，您也可以拖动图像。我需要，默认情况下该图像始终位于中心（div 或屏幕），并且当您缩放鼠标滚轮时图像也应位于中心。通常，图像的中心总是应该在屏幕的中心（并且您可以像以前一样拖动图像）。

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>

Answer 1

将 img 包裹在 canvas 中，然后使用 transform: scale 缩放 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>

Angular 图片缩放始终在中心

Angular image zoom always in center

angularjs

image

scroll

zooming