角度图像缩放始终在中心 [英] Angular image zoom always in center

问题描述

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

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>

推荐答案

将 img 包裹在画布中，并使用 transform:scale 放大/缩小.

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>

这篇关于角度图像缩放始终在中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！