처리 중 사용자 상호 작용

Question

일반적인 질문이 있습니다. (문제가있는 특정 코드를 제시해야하지만, 제 경우에는 문제가 좀 더 일반적입니다). 이제

ellipse(30, 30, 10, 10); 

이 타원 캔버스에있는 픽셀을 얻을 수있는 방법이있다 :

처리에

이의 내가 타원을 가정 해 봅시다? 그 이유는 마우스와의 사용자 상호 작용을 만드는 방법을 갖는 것입니다 (예를 들어). 누군가 타원 위로 마우스를 클릭하면 어떤 일이 발생합니다.

모든 것을 객체로 바꾸고 모양의 위치를 ​​저장하는 데 생성자를 사용하는 방법을 생각했지만, 특히 복잡한 모양의 경우보다 쉽게 ​​수행 할 수 있습니다. 이것이 제가 관심을 가지고있는 것입니다. 타원의 위치를 ​​계산하는 것이 중요하지만 더 복잡한 모양은 무엇입니까? 도서관이 있습니까?

Answer 1

geomerative 라이브러리를 확인하십시오. 마우스가 SVG 모양 안에 있는지 확인하는 방법이 있습니다. 나는 내 머리의 상단을 기억할 수 있지만 모양 만들처럼 뭔가를 작동합니다

myShape = RG.loadShape("shape.svg"); 

과 점 (

RPoint p = new RPoint(mouseX, mouseY); 

을하고 부울 기능이 포함되어있는 경우 당신에게 말할 것이다) 포인트는 도형 안에 있습니다.

myShape.contains(p); 

Answer 2

마우스 위치를 픽셀 단위로 검사하는 것보다 수학 공식을 사용하는 것이 좋습니다 (훨씬 빠르고 코드가 적음).

완벽한 원의 경우 Pythagoras의 정리를 사용하여 유클리드 거리를 계산할 수 있습니다. 서클의 중심이 (circleX, circleY)이고 반경 (직경이 아님)이 circleR 인 것으로 가정합니다. 마우스가이 같은 원 이상 있는지 확인할 수 있습니다

는

if(sq(mouseX-circleX)+sq(mouseY-circleY) <= sq(circleR)) { 
    // mouse is over circle 
} else { 
    // mouse is not over circle 
} 

이 방법은 기본적으로 빗변 (가장 긴 쪽) 마우스 위치에 원의 중심에서 실행되는 직각 삼각형을 상상. 피타고라스의 정리를 사용하여 빗변 길이를 계산합니다. 원의 반경보다 작 으면 마우스가 원 안에 들어갑니다. (약간의 최적화가 포함됩니다 - 제곱근을 비교하는 것은 제곱근을 피하기 위해 비교적 느릴 수 있으므로

Answer 3

원래의 수학적 대답에 대한 대안이 나에게도 발생했습니다. 모든 UI 요소를 두 번 그리는 메모리와 처리 능력이 있다면 2 차 버퍼를 사용하여 좋은 결과를 얻을 수 있습니다.

원칙은 오프 스크린 그래픽 버퍼 (예 : PGraphics 사용)가 필요합니다. 주 디스플레이와 정확히 동일한 크기 여야하며 앤티 앨리어싱을 비활성화해야합니다. 모든 대화 형 UI 요소 (버튼 등)를이 버퍼에 그립니다. 그러나 일반적인 방법으로 그리는 대신 채우기 및 획 (텍스트 또는 이미지를 추가하지 말고 단색 만 사용)에 각각 고유 한 색상을 지정하십시오. 예를 들어, 하나의 버튼은 완전히 빨간색이고 다른 하나는 완전히 녹색 일 수 있습니다. 각 항목마다 고유 한 색이있는 한 다른 모든 RGB 값이 적용됩니다. 배경이 고유 한 색상인지 확인하십시오.

사용자는 버퍼를 보지 않으므로 디버깅 중이 지 않는 한 화면에 그려서는 안됩니다.마우스가 끝났을 때 어떤 항목을 찾고 싶을 때 마우스 포인터를 화면에 보이지 않는 버퍼에서 찾으십시오. 해당 위치에서 픽셀 색상을 가져 와서 UI 요소와 일치시킵니다.

모든 작업을 마친 후에는 정상적으로 모든 것을 메인 디스플레이에 그립니다.

UI 요소가 절대로 이동하지 않는 경우이 방법의 처리 시간을 크게 줄일 수 있다는 점은 주목할 가치가 있습니다. 무언가가 나타나거나 사라지거나 움직이거나 크기/위치가 변경 될 때 보조 버퍼를 다시 그리기 만하면됩니다.