Qt Quick 예제 - 포인터 핸들러

Qt Quick Controls 이 문서에는 다양한 종류의 사용자 인터페이스에 충분히 활용 가능한 미리 구축된 컴포넌트가 포함되어 있지만, 때로는 이러한 컴포넌트를 “처음부터” 직접 작성해야 할 필요가 있을 수 있습니다. 이 경우 포인터 핸들러를 폭넓게 활용해야 합니다. 이 문서는 일반적인 상호작용 패턴과 다소 생소한 상호작용 패턴을 구현하는 방법을 보여주는 간단한 예제 모음입니다.

이 예제를 실행 파일로 빌드하면 최상위 ListView 에서 페이지를 선택할 수 있습니다. TouchpointFeedbackSprite 및 MouseFeedbackSprite 컴포넌트는 PointHandler 를 사용하여 사용자가 포인팅 장치로 수행하는 작업에 대한 피드백을 제공하는 방법을 보여줍니다. 이 컴포넌트들은 예제 전체에 걸쳐 항상 표시되며, 다른 곳의 상호 작용을 방해하지 않습니다. 사용자 인터페이스에 대한 동영상이나 실시간 시연을 해야 할 때, 이 컴포넌트들을 재사용하면 매우 유용합니다.

또는, 특정 종류의 컴포넌트가 어떻게 구축되는지 빠르게 확인하기 위해 일부 개별 QML 파일을 qml 도구를 사용하여 명령줄에서 실행할 수도 있습니다.

TapHandler

"tap" 페이지는 터치스크린의 탭, 길게 누르기 및 다양한 버튼을 사용한 마우스 클릭을 감지하는 방법을 보여줍니다. 또한 다양한 gesturePolicy 값을 시험해 볼 수도 있습니다.

다중 탭 버튼

이 페이지에는 서로 다른 ` gesturePolicy ` 값을 가진 세 개의 사용자 정의 ` Button ` 컴포넌트가 있습니다. 한 버튼은 누르는 순간부터 손을 떼는 순간까지 손가락이나 마우스를 버튼 안에 계속 두어야 합니다. 다른 하나는 버튼 밖으로 드래그했다가 손을 떼기 전에 다시 안으로 드래그해도 실행됩니다. 마지막 하나는 ` system-wide drag threshold`를 조금 넘어서 드래그하면 누른 상태에서 해제됩니다. 터치스크린에서 이 예제를 실행해 보면, 서로 다른 손가락을 사용하여 세 개의 버튼을 동시에 조작할 수 있을 것입니다.

파이 메뉴

이 페이지에서는 길게 누르면 애니메이션과 함께 표시되는, 터치스크린에 최적화된 파이 메뉴를 작성하는 방법을 보여줍니다. 중앙 위치에서 섹터 중 하나로 드래그한 후 손을 떼면 메뉴 항목을 선택할 수 있습니다. 메뉴 밖으로 드래그하거나 메뉴 중앙에서 손을 떼면 아무것도 선택되지 않습니다. 회색 뷰포트 밖으로 드래그하면 메뉴가 취소됩니다.

PointHandler

"단일 포인트 핸들러" 페이지( PointHandler )에서는 SinglePointHandler::point 및 handlerPoint::device 에서 확인할 수 있는 일부 속성에 대한 피드백을 제공합니다. 예제를 실행 파일로 빌드했다면, 메인 pointerhandlers.qml 파일의 PointHandlers에서 제공하는 피드백과 동시에 이 피드백을 확인할 수 있습니다.

"tablet canvas" 페이지는 PointHandler 를 사용하여 서로 다른 types of pointing devices 를 고유하게 감지하므로, 컴퓨터에 드로잉 태블릿이 연결되어 있다면 펜, 에어브러시, 마커 등 다양한 유형의 스타일러스로 Canvas 항목에 그림을 그릴 수 있습니다. 스타일러스 지우개를 사용하여 획을 "지울" 수 있습니다(여기서는 배경색으로 그 위에 그려서 지우는 방식으로 구현됨). 여러 개의 HoverHandlers 가 어떤 유형의 스타일러스나 지우개가 감지되었는지에 대한 피드백을 제공합니다.

HoverHandler

"호버 사이드바" 페이지는 마우스가 버튼 컴포넌트와 그 컨테이너 위에 동시에 호버될 때 이를 감지하는 방법을 보여줍니다. ` HoverHandler::blocking ` 속성을 설정하여 전파를 비활성화할 수 있습니다. 여기에서 ` HoverHandler `와 ` MouseArea `의 모든 조합을 직접 시도해 보며, 호버 감지 처리 방식을 비교해 볼 수 있습니다. 또한, ` HoverHandler ` 하나를 사용하여 장면 좌표계에서 현재 마우스 위치를 표시합니다.

또한, 애니메이션이 적용된 “플랫폼”의 HoverHandler 가 마우스 커서 아래로 미끄러질 때마다 호버 상태가 되는지 확인할 수 있습니다.

DragHandler

"조이스틱" 페이지에는 단순히 DragHandler 가 Image 를 드래그하는 모습이 있습니다. AnchorChanges 가 포함된 State 는 드래그가 가능하도록 앵커를 잠금 해제하며, AnchorAnimation 는 노브를 놓았을 때 중앙 위치로 돌아가는 애니메이션을 처리합니다.

"플링 애니메이션(fling animation)" 페이지는 DragHandler::centroid::velocity 속성의 사용 예 중 하나를 보여줍니다. 이 속성은 단순히 QEventPoint::velocity()에서 반환되는 값을 QML에서 사용할 수 있게 해줍니다. 이 예제에서 사용된 MomentumAnimation 컴포넌트는 복잡한 솔루션을 사용하지 않고도 물리 현상(운동량 및 마찰)을 시뮬레이션하는 한 가지 방법을 보여줍니다.

PinchHandler

"핀치(pinch)" 페이지는 여러 개의 PinchHandler를 시연합니다. 일부는 두 손가락을, 일부는 세 손가락을 필요로 하며, 일반적인 크기 조정, 회전 및 이동을 수행하고, 제약 조건은 PinchHandler 의 axis min 및 max 속성을 통해 관리됩니다. PinchHandler 인스턴스 중 하나는 위치, 크기 및 회전 대신 다양한 Rectangle 속성을 조작하는 데 사용됩니다. 다양한 PinchHandler 속성이 여러 가지 방식으로 바인딩되어 있습니다. 각 인스턴스를 개별적으로 조작할 수 있어야 합니다. 일부 항목에는 DragHandler 및 TapHandler도 있습니다.

상호 운용성

슬라이더

"믹서" 페이지는 ListView 델리게이트 내에서 여러 핸들러를 사용하는 방법을 보여줍니다. 여러 Slider 컴포넌트와 동시에 상호 작용할 수 있으며, ListView 을 옆으로 휙 밀 수 있습니다.

• DragHandler 를 사용하면 슬라이더 노브가 이동할 수 있는 “트랙”의 어느 곳에서나 드래그를 시작할 수 있습니다. 기본 snapMode 가 DragHandler.SnapAuto 이므로, system-wide drag threshold 를 지나 드래그한 후에는 노브가 마우스나 터치 지점의 중앙 위치로 스냅됩니다.
• WheelHandler 는 노브의 y 속성( Image)을 직접 조정합니다.
• BoundaryRule 는 DragHandler 또는 WheelHandler 에 의해 노브가 너무 멀리 끌려가는 것을 방지합니다.
• TapHandler 는 일반적인 Slider 컴포넌트보다 한 가지 제스처를 더 제공합니다. 바로 노브를 탭할 수 있다는 점입니다.

지도

"map" 페이지는 SVG Image 의 드래그, 변환 및 크기 조정을 보여줍니다. 지도상의 특정 위치를 확대할 수 있으며, 확대/축소 수준이 크게 변경되면 Image::sourceSize 가 변경되어 SVG가 다른 해상도로 다시 렌더링되도록 요청합니다. 두 손가락으로 수직으로 드래그하면 DragHandler 가 활성화되어 Rotation 변환을 조작하여 지도를 기울입니다.

가짜 Flickable

"가짜 Flickable" 페이지는 개별 포인터 핸들러와 애니메이션을 사용하여 Flickable 의 기능 대부분을 재현하려는 시도를 담고 있습니다. Flickable은 복잡한 컴포넌트이지만, 여기에서는 복잡성 없이 기능의 일부만 활용하고자 할 경우, Flickable이 제공하는 개별 동작을 분리하는 한 가지 방법을 확인할 수 있습니다.

또한 포인터 핸들러로 구동되는 몇 가지 추가 컨트롤을 포함하는 슬라이드 아웃 방식의 “드로어” 컴포넌트도 있습니다.

코드 예제 프로젝트 @ code.qt.io