는 spazz 밖으로 여기

Question

좌표입니다 내가 그것을 사용하기위한 프로젝트 AngularJS와 배운 전에 JQuery와에 몇 시간 전에 지어진 JSFiddle of the function.

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) 

    } 
    }]) 

는, 좌표는 조금 마우스를 이동하는 경우는 관찰 할 수있는, 매우 빠르게 한 자리와 두 개 또는 세 자리 숫자 사이를 이동 숫자를 몇 번 확인하십시오. 내가 믿는 바는 그런 식으로 정신을 차리게하는 것입니다.

이상하게도 $ scope.position 변수가있을 때만 발생합니다. 따라서 해당 비트를 주석으로 처리하면 Post X와 Post Y 번호가 꾸준히 변경되어 div에서 마우스를 움직이면됩니다.

무엇이 여기에 있습니까? 스타일이 적용될 때 좌표 계산이 갑자기 잘못되었지만 사실 일 수는 없습니다. 좀 더 이상해지기 위해서, div의 어떤 sedctions에서 숫자는 꾸준히 그리고 정확하게 바뀌고 있습니다. 예를 들어, Plunker에서이 굵게 표시된 단어 아래에 "마우스 X 위치 div" 안에 AngularJS가 내부적으로 작동한다면 , 어떤 해결책이 있습니까?

그뿐만 아니라, 어떻게 든 당신의 수학이 꺼져 마우스가

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) 

} 
}])