javascript - 将基于鼠标移动设置 div 样式的函数从 jQuery 转换为 Angular 会使坐标变得困惑

Question

这是一个JSFiddle of the function在为我打算使用它的项目学习 AngularJS 之前，我不久前使用 JQuery 进行了构建。

var numberOfPosts = 1; // To calculate the absolute/starting position of each post
var post = $('#post'); // Need to track multiple posts, ideally by array of getElementsByClass
var postOffset = post.offset(); // Relative to the document
var postPosition = post.position(); // Relative to the parent
var radiansBetweenPosts = (90 / numberOfPosts) * Math.PI / 180;

$('#wrapper').mousemove(function(event) {
  // Mouse horizontal percentage position inside the wrapper (double to make full circle)
  mouseX = (event.pageX - postOffset.left) / post.parent().width() * 2;
  x = (Math.cos(Math.PI * mouseX + radiansBetweenPosts)) * 50 + 50; // Multiply by % size of a quadrant,
  y = (Math.sin(Math.PI * mouseX + radiansBetweenPosts)) * 50 + 50; // add a % offset to the centre of the circle
  post.css({
    'left': x + '%',
    'top': y + '%'
  });
  // Mouse horizontal % coordinates from the centre of the circle
  $('p').html(Math.round(mouseX * 100));
});

和here is a Plunker我将同样的想法翻译成 AngularJS，这就是它目前在我的项目中的表现。

  angular.module('mouseMovement', [])
  .controller('MouseMovementController', ['$scope', '$element', function MouseMovementController($scope, $element) {
    $scope.msg = "Mouse X position inside the div"

    numberOfPosts = 1
    radiansBetweenPosts = (90 / numberOfPosts) * Math.PI / 180

    $scope.mousePosition = function(event) {

      postOffsetLeft = event.target.querySelector('.postDiv').offsetLeft
      frameWidth = event.target.offsetWidth
      mouseXpercent = (event.pageX - postOffsetLeft) / frameWidth * 2

      x = (Math.cos(Math.PI * mouseXpercent + radiansBetweenPosts)) * 50 + 50
      y = (Math.sin(Math.PI * mouseXpercent + radiansBetweenPosts)) * 50 + 50

      $scope.position = {
        left: x + '%',
        top: y + '%'
      }

      $scope.mouseX = Math.round(mouseXpercent * 100)
      $scope.postX = Math.round(x)
      $scope.postY = Math.round(y)

    }
  }])

在我看来，当鼠标在div上移动时，坐标会在一位数字和两位或三位数字之间快速跳转，如果您稍微移动鼠标并检查数字，您可以观察到这一点几次。我相信这就是导致这个职位如此引人注目的原因。

奇怪的是，只有当 $scope.position 变量存在时才会发生这种情况，因此如果您注释掉该位，那么当您将鼠标移过 div 时，Post X 和 Post Y 数字都会稳步变化。

我在这里缺少什么？应用样式时，坐标计算似乎突然出错，但事实并非如此。更奇怪的是，在 div 的某些部分，数字正在稳定且正确地变化，例如 Plunker 上的粗体字“Mouse X position inside the div”下的垂直位置 如果这是 AngularJS 内部工作方式的问题，有哪些解决方案？

除此之外，即使鼠标出现在顶部，我也需要以某种方式继续跟踪鼠标在灰色 div 上的移动

Answer 1

你的数学不合格。试试this 。我的数学并不准确，但它更接近您正在寻找的内容

angular.module('mouseMovement', [])
  .controller('MouseMovementController', ['$scope', '$element',     function MouseMovementController($scope, $element) {
$scope.msg = "Mouse X position inside the div"

numberOfPosts = 1
radiansBetweenPosts = (2 / numberOfPosts) * Math.PI

$scope.mousePosition = function(event) {

  postOffsetLeft = event.target.querySelector('.postDiv').offsetLeft
  frameWidth = event.target.offsetWidth
  mouseXpercent = (event.pageX) / frameWidth 

  x = Math.PI * (Math.cos(mouseXpercent * radiansBetweenPosts)) * 10 + 40
  y = Math.PI * (Math.sin(mouseXpercent * radiansBetweenPosts)) * 10 + 20

  $scope.position = {
    left: x + '%',
    top: y + '%'
  }

  $scope.mouseX = Math.round(mouseXpercent * 100)
  $scope.postX = Math.round(x)
  $scope.postY = Math.round(y)

}
}])