처리시 절대 마우스 위치

StackOverflow https://stackoverflow.com/questions/454271

  •  19-08-2019
  •  | 
  •  

문제

이것은 프로세싱 포럼 (지금까지 답을 얻지 못한 곳)에서 만든 게시물의 복사 페이스트입니다. 여기서 시도 할 수도 있다고 생각했습니다.

처리는 특히 웹 페이지를 위해 물건을 그리는 매우 멋진 방법입니다. 참조로 http://processing.org

이봐, 나는 처리를 처음 접했고, 플래시가없는 웹 사이트를 만들기 위해 그것을 사용하고 있기 때문에 나는 캔버스를 거의 그리고있다.

나는 마우스 위치에 문제가 있지만 좌표는 그리기시 좌표가 왼쪽 상단 코너를 0,0으로 고려합니다. 실제 마우스 좌표는 0,0을 브라우저 창의 왼쪽 상단으로 간주합니다.

따라서 내 문제는 이것입니다. 캔버스는 브라우저가 크기를 변경할 때마다 캔버스 내 마우스의 좌표도 변경 될 때마다 중앙 웹 페이지에서 작동하고 있습니다.

캔버스에 비해 마우스의 좌표를 만드는 방법이 있습니까? 내 브라우저 창의 크기를 변경할 수 있고 마우스 좌표의 경우 왼쪽 상단 코너가 항상 0,0입니까?

그래서 그게 문제입니다. 나는 여기에 stackoverflow에서 얼마나 많은 ppl을 경험했는지를 모르겠지만, 누군가가 나를 도울 수 있기를 바랍니다 :)

스택 오버플로 커뮤니티 덕분에 미리 감사드립니다.

도움이 되었습니까?

해결책

처리에 익숙하지 않지만 브라우저 창의 왼쪽 상단 코너와 캔버스의 왼쪽 상단 모서리의 차이를 계산할 수 없습니까?
IE (jQuery 사용)

$(window).onresize = function() {
 //offset return position realive to the document.
 var offset = $('#canvas').offset();
 window.canvasLeft = offset.left;
 window.canvasTop = offset.top;
}

그런 다음 다음과 같은 작업을 수행 할 수 있습니다.

 relativeMouseLeftPosition = mouseLeftPosition() - window.canvasLeft;

#CANVAS를 CANVAS 영역의 CSS 선택기로 교체해야합니다.

또한 Window는 글로벌 객체이며 가능한 범위 문제를 처리하기 위해 여기에서 사용합니다.

다른 팁

프로세싱은 실제로 웹 페이지를 만들기위한 것이 아닙니다. 더 나쁜 사이트 용 플래시보다 (가공 스케치는 Java 애플릿입니다 - Java는 덜 일반적이며 훨씬 더 많은 리소스 집약적이며로드가 느려집니다 ..)

즉, 거기에 있습니다 Processing.js, JavaScript 처리 포트.

그만큼 뱀 예 마우스에 접근합니다. JavaScript이기 때문에 캔버스는 div, 좌표는 Java (자체 VM 세계에 사는)보다 조금 더 세인해야하지만, 나는 틀릴 수 있습니다 ..

사용하기 전에 사용자에게 시스템을 보정하도록 요청할 수 있습니다. 그것은 질문에 대한 완전한 답이 아니라 문제에 대한 실설입니다.

화면 중앙에 빨간 점을, 왼쪽 상단 및 오른쪽 오른쪽을 그립니다. 사용자에게 클릭하고 좌표를 검색하도록 요청하십시오. 그런 다음 화면의 모서리가 어디에 있는지 알 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top