JavaScript에서 마우스 움직임 데이터를 저장하는 가장 효율적인 처리 방법은 무엇입니까?

Question

마우스가 웹 페이지 (픽셀)로 이동하는 위치를 정확하게 기록하려고합니다. 다음 코드가 있지만 결과 데이터에 간격이 있습니다.

var mouse = new Array(); 
$("html").mousemove(function(e){ 
    mouse.push(e.pageX + "," + e.pageY); 
}); 

그러나 기록 된 데이터를 보면 이것이 내가 본 것의 예입니다. 픽셀 마우스 이동 데이터에 의해 픽셀을 저장하는 더 좋은 방법이

76,2 //start x,y 
77,3 //missing 
78,4 //missing 
78,5 //moved right two pixels, down three pixels 
78,6 //missing 
78,7 //missing 
78,8 //moved down three pixels 

있습니까 :

76,2 //start x,y 
78,5 //moved right two pixels, down three pixels 
78,8 //moved down three pixels 

이 바람직하게는 같을 것이다? 웹 페이지에서 내 목표가 너무 비현실적입니까?

Answer 1

마우스를 움직이면 모든 픽셀에 마우스가 존재하지 않습니다. 업데이트주기 동안 실제로 점프 지점에서 점프하는 방식으로 매끄러운 방식으로 눈에 그것은 사이의 모든 지점을 쳐다 본다.

마우스 이동 이벤트가 등록 된 지점을 저장하는 것이 좋습니다. 두 점 사이의 각 간격은 필요한 모든 것에 사용할 수있는 선을 만듭니다.

하고, 지금까지 처리 효율 간다 ...

처리 효율은 다수의 인자에 의존 할 것이다. 어떤 브라우저가 사용되고 있는지, 컴퓨터의 메모리 용량, 데이터 구조에 맞게 코드가 얼마나 잘 최적화되어 있는지 등

중간에 최적화하지 말고 프로그램을 작성한 다음 느린 부분을 벤치마킹하여 병목 현상이 있습니다.

아마 프로토 타입에 기능의 무리와 함께 사용자 정의 Point 객체를 생성하고 너무 많이 내려 습지 경우가 나는 x과 y와 객체 리터럴을 사용하도록 전환 할 것,

을 수행하는 방법을 볼 수있을

세트.
1. 이이라면 나는 x과 하나는 y이고 두 개의 배열은 항상 x와 y 값을 함께 설정해야합니다.
2. 이이라면 나는 새로운 것을 시도 할 것입니다. 그것은 당신에게 주어진 것 같은
3. 고토 4

Answer 2

당신은 빠른 속도로 정보를 저장할 수 있습니다. mousemove 이벤트는 브라우저에서 결정되는 속도로 시작됩니다. 일반적으로 60hz를 초과합니다. 포인터가 60px/초보다 빠르게 움직일 수 있기 때문에 보간을하지 않는 한 공백을 채울 수 없습니다.

나에게 좋은 생각인데, 화면의 반대편으로 마우스를 움직이면 1920 mousemove 이벤트가 동시에 발생하는 번거 로움 (그리고 성능 드래그)을 상상해보십시오. 나는 생각조차하지 않습니다. 마우스 자체만으로도 충분히 빠른 속도로 폴링합니다. 게임용 마우스는 1000hz 이상으로 이동하지 않습니다.보간에 http://jsbin.com/ucevar/

, 당신이 누락 된 점을 발견하는 데 사용할 수있는 Bresenham's line algorithm 구현하는 this question를 참조하십시오

여기에 라이브 프레임 속도 테스트를 참조하십시오. 이것은 어려운 문제이며, iPad 용 PenUltimate app은 선 그림을 자연스럽고 유동적으로 보이게하는 놀라운 보간법을 구현하지만 웹에 대해서는 아무 것도 없습니다.

데이터를 저장하는 데는 문자열 대신 [x,y]의 배열을 푸시하십시오. 느린 이벤트 핸들러 함수는 이벤트가 남을 때 삭제되므로 새로 고침 빈도를 늦 춥니 다.

Answer 3

픽셀 마우스 움직임 데이터로 픽셀을 저장하는 더 좋은 방법이 있습니까?

"더 나은"기준은 무엇입니까?

내 목표가 너무 비현실적인 웹 페이지입니까?

커서가 새로운 픽셀을 입력 할 때마다 새 포인트를 저장하는 것이 목표라면 그렇습니다. 또한 브라우저 픽셀은 스크린 픽셀에 반드시 1 : 1을 매핑하지 않아도됩니다. 특히 CRT 모니터의 경우에는 그렇지 않습니다.