뷰포트 및 콘텐츠

  • 아티클

직접 조작은 뷰포트, 콘텐츠 및연락처를 사용하여 UI의 대화형 요소를 설명합니다.

뷰포트는 사용자 상호 작용에서 입력을 수신하고 처리할 수 있는 창 내의 지역입니다. 뷰포트는 지정된 시간에 최종 사용자가 볼 수 있는 콘텐츠의 영역을 나타냅니다(콘텐츠 클립이라고도 함). 뷰포트에는 다음과 같은 몇 가지 함수가 있습니다.

  • 조작 상태를 관리하고(예: 콘텐츠를 조작할 준비가 되면, 콘텐츠가 조작될 때, 콘텐츠가 관성 애니메이션에 있을 때) 입력을 출력 변환에 매핑합니다.
  • 사용자 상호 작용에 대한 응답으로 이동하는 콘텐츠가 포함되어 있습니다. HTML div 요소(스크롤), 이동 가능 목록(Windows 8 시작 화면) 또는 선택 컨트롤에 대한 팝업 메뉴일 수 있습니다.

뷰포트는 CreateViewport를 호출하여 만듭니다. 여러 뷰포트를 단일 창에 만들어 풍부한 UI 환경을 생성할 수 있습니다.

콘텐츠 는 상호 작용에 대한 응답으로 변환되는 요소를 나타냅니다. 즉, 콘텐츠는 사용자가 이동하거나 꼬집을 때 이동하거나 스케일링합니다. 콘텐츠에는 두 가지 유형이 있습니다.

  • 기본 콘텐츠 는 입력 조작 및 관성으로 응답하는 뷰포트 내의 단일 내장 요소입니다. 기본 콘텐츠는 뷰포트와 동시에 생성되며 뷰포트에서 추가하거나 제거할 수 없습니다. 끌기 지점을 사용하여 기본 콘텐츠의 동작을 사용자 지정할 수 있습니다(나중에 설명).
  • 보조 콘텐츠는 기본 콘텐츠 의 동작을 기준으로 이동합니다. 보조 콘텐츠는 뷰포트와 별도로 생성되며 뷰포트에서 추가하거나 제거할 수 있습니다. 모든 보조 콘텐츠 변환은 기본 콘텐츠의 변환을 기반으로 계산됩니다. 특정 규칙을 적용하여 생성 중에 CLSID로 식별되는 요소의 의도된 목적에 따라 변환을 계산하는 방법을 변경할 수 있습니다.

팬 전후를 보여 주는 이 다이어그램에서는 단일 연락처를 사용하여 기본 콘텐츠를 이동했습니다. 사용자가 이동 표시기(보조 콘텐츠)와 직접 상호 작용하지 않더라도 기본 콘텐츠가 이동되면 보조 콘텐츠가 이동합니다. 이렇게 하면 사용자가 얼마나 멀리 이동했는지에 대한 시각적 신호가 제공됩니다.

팬 전후를 보여 주는 다이어그램

뷰포트 구성

뷰포트를 만든 후 상호 작용 구성을 사용하여 동작을 구성합니다. 조작 구성은 이동과 같은 조작이 지원되는지 지정합니다.

이동은 가로 또는 세로 축을 따라 콘텐츠의 위치를 변경하거나 사용자 이동으로 둘 다 변경합니다. 두 축에서 번역을 구성하면 콘텐츠가 어떤 방향으로든 자유롭게 이동합니다.

콘텐츠의 동작을 제한하려면 일반적으로 가로 축과 세로 축 모두에서 레일을 구성합니다. 사용자의 상호 작용이 주로 단일 축(다음 다이어그램의 파란색 영역으로 표시됨)을 따라 있는 경우 팬은 난간 이 되고 콘텐츠는 레일 축을 따라만 이동합니다. 콘텐츠가 관성인 동안 사용자가 이동했으며 현재 레일이 있고 두 번째 팬을 수행하는 경우 새 팬은 계속 레일됩니다.

레일 팬의 뷰포트 내 콘텐츠를 보여 주는 다이어그램

예: 뷰포트는 가로 및 세로 이동에 대해 구성됩니다. 첫 번째 프레임에서 접촉이 내려옵니다. 두 번째에서는 세로 이동이 시작되고 접촉이 세로 레일에 잠깁니다. 마지막으로, 팬을 레일로 연결하면 대각선 팬의 세로 구성 요소만 콘텐츠를 이동하는 데 사용됩니다.

사용자가 레일 검색 영역(흰색 영역)에 없는 방식으로 대각선으로 이동하면 이동이 해제 되고 콘텐츠가 두 축 모두에서 자유롭게 이동합니다.

레일되지 않은 팬에서 이동하는 콘텐츠를 보여 주는 다이어그램

확대/축소는 사용자가 꼬집거나 늘어나면 콘텐츠의 배율 인수를 변경합니다. 콘텐츠 크기가 조정되는 지점(확대/축소 센터라고 함)은 연락처의 가운데에 있습니다. 가로 또는 세로 맞춤을 설정한 경우 확대/축소 중심이 변경되어 맞춤이 유지됩니다.

맞춤이 지정된 콘텐츠의 확대/축소를 보여 주는 다이어그램

연락처 가운데에 확대/축소 센터를 설정하는 잠금 해제 센터를 지정하여 이 동작을 재정의할 수 있습니다.

확대/축소 센터가 잠금 해제된 콘텐츠의 확대/축소를 보여 주는 다이어그램

관성은 모든 접촉이 해제된 후(터치의 경우) 또는 키보드/마우스 입력 후(예: 스크롤 막대 클릭 또는 화살표 키 누르기) 조작의 점진적 감속입니다. 사용자가 콘텐츠를 조작하면 연락처가 해제된 후 조작이 즉시 중지되지 않습니다. 대신 콘텐츠는 현재 방향과 속도로 계속되어 서서히 멈추게 됩니다.

점 및 경계 맞춤

관성 애니메이션은 터치의 경우 화면에서 손가락을 떼거나 키보드/마우스 동작(예: 화살표 키, 페이지 위/아래로, 마우스 휠 스크롤 등)의 결과로 조작이 종료된 후에 발생합니다.

관성 애니메이션을 정의하는 두 가지 정보가 있습니다.

  • 애니메이션의 나머지 지점 - 특정 변환 구성 요소의 마지막 끝 위치입니다.
  • 애니메이션 지속 시간, 곡선, 속도 – 나머지 점의 유형에 따라 결정됩니다.

관성 애니메이션은 끌기 지점 및 경계의 영향을 받습니다. 경계는 콘텐츠의 최대 및 최소 휴지점을 지정합니다. 관성 중에 콘텐츠가 경계에 도달하면 경계 애니메이션이 적용됩니다. 끌기 지점은 기본 콘텐츠에 정의되어 나머지 점을 수정하고 관성 애니메이션 곡선 자체를 수정합니다.

콘텐츠의 간격이 정기적으로 지정되거나 콘텐츠 간격이 고르지 않은 경우 SetSnapPoints를 사용하여 SetSnapInterval을 사용하여 끌기 지점을 정의합니다. 다음은 끌기 지점의 예입니다.

콘텐츠에 설정된 끌기 지점이 이동에 미치는 영향을 보여 주는 다이어그램

다이어그램에는 일련의 하위 콘텐츠 블록(뉴스 판독기 형식 앱의 뉴스 항목 또는 그리드 보기의 항목)이 포함된 콘텐츠 조각이 있습니다. 관성은 종료된 후 항목의 왼쪽 가장자리를 뷰포트의 왼쪽 가장자리에 맞추기 위한 것입니다.

끌기 지점 유형에는 두 가지 그룹이 있습니다.

  • 선택 사항 및 필수: 선택적 스냅 포인트는 관성 휴지점이 끌기 지점 근처에 있는 경우에만 관성 애니메이션을 스냅합니다. 필수 끌기 지점은 항상 관성 애니메이션을 지정된 끌기 지점에 스냅합니다.
  • 단일 및 다중: 여러 맞춤 지점 유형을 사용하면 콘텐츠가 자연 휴지점 가까이에 있는 끌기 지점에서 휴식을 취하기 전에 많은 끌기 지점을 지나 이동할 수 있습니다. 단일 끌기 지점 유형은 관성 애니메이션의 나머지 지점으로 다음으로 가장 가까운 끌기 지점을 선택합니다.

다음 다이어그램에서는 끌기 지점 형식이 관성 애니메이션의 나머지 위치를 수정하는 방법을 보여 줍니다.

관성과 끌기 지점이 상호 작용하는 방법을 보여 주는 다이어그램

이 다이어그램에서 관성 시작점은 '시작'으로 레이블이 지정되고 끌기 지점이 없는 경우 자연 관성 끝 위치는 'End'로 지정됩니다. 세로 선은 다양한 맞춤 지점을 표시합니다. 이 표에서는 각 스냅 포인트 유형이 애니메이션의 끝 위치에 미치는 영향에 대해 설명합니다.

점 유형 설명
필수 단일 끌기 지점 P1은 관성 방향의 첫 번째 끌기 지점이므로 선택됩니다.
필수 다중 끌기 지점 P2는 관성 방향으로 끝점에 가장 가깝기 때문에 선택됩니다.
선택적 단일 끌기 지점 P1은 관성 중에 발생한 첫 번째 스냅 포인트이기 때문에 선택됩니다.
선택적 다중 맞춤 지점 P2는 자연 끝점 근처에 있기 때문에 선택됩니다.

끌기 지점 오프셋 및 RTL 시나리오

rtl 끌기 지점 사용을 보여 주는 다이어그램

SetSnapCoordinate API를 사용하여 맞춤 지점 오프셋 및 좌표계를 적용합니다. 이 API는 지정된 오프셋/좌표계를 사용하여 모든 스냅 포인트 또는 스냅 간격을 오프셋합니다.

좌표계는 콘텐츠의 왼쪽 가장자리에서 반대 방향으로 끌기 지점을 설명하려는 RTL 시나리오에서 매우 유용합니다. 이전 다이어그램에서 SetSnapCoordinate 는 DIRECTMANIPULATION_MOTION_TRANSLATEX 및 DIRECTMANIPULATION_COORDINATE_MIRRORED 플래그와 함께 사용되며, 이는 콘텐츠의 왼쪽 가장자리에서 맞춤 지점을 자동으로 오프셋하고 오른쪽에서 왼쪽 순서로 제공합니다. S1은 0px, S2는 50px(등)입니다. SetSnapCoordinate를 사용하는 모든 오프셋 집합은 올바른 배율 인수를 포함하여 콘텐츠의 이 왼쪽 가장자리에서 추가로 오프셋됩니다.

콘텐츠 영역 외부에서 끌기 지점을 설정하지 않도록 원본 매개 변수가 설정된 SetSnapCoordinate를 거의 항상 사용합니다.

예를 들어 뷰포트가 200x200이고 콘텐츠가 1000x200이고 인터페이스가 RTL인 경우 뷰포트가 처음 표시될 때 뷰포트의 왼쪽 가장자리는 x=800입니다. SetSnapCoordinate 를 SetSnapCoordinate(DIRECTMANIPULATION_MOTION_TRANSLATEX, DIRECTMANIPULATION_COORDINATE_MIRRORED, 1000.0) 호출하여 콘텐츠의 오른쪽 가장자리에서 시작하여 맞춤 지점을 오른쪽에서 왼쪽으로 계산하도록 지정합니다.

동작

동작은 직접 조작이 뷰포트의 기본 또는 보조 콘텐츠의 출력 변환을 처리하는 방법을 수정하기 위해 뷰포트에 연결할 수 있는 개체입니다. 동작 개체는 입력 처리 방법 또는 관성 애니메이션이 적용되는 방식과 같은 조작의 하나 이상의 측면에 영향을 줄 수 있습니다. 예를 들어 자동 스크롤 동작은 기본 콘텐츠의 한쪽 끝을 향해 스크롤 애니메이션을 수행하여 관성 애니메이션에 영향을 줍니다. 슬라이드 간 구성 동작은 교차 슬라이드 동작이 수행되는 시기를 감지하는 직접 조작 입력 처리에 영향을 줍니다.

동작 개체는 CreateBehavior를 호출하여 만들어지고 뷰포트에 추가된 다음 해당 동작이 비동기적으로 구성됩니다. 뷰포트에서 동작을 제거하면 해당 효과가 제거됩니다.

좌표계

직접 조작에서 사용하는 세 가지 기본 좌표계가 있습니다.

  • 클라이언트 좌표계 - 클라이언트 창의 사각형을 설명합니다. 단위는 픽셀 단위입니다.
  • 뷰포트 좌표계 - 입력을 처리할 수 있는 클라이언트 내 영역의 사각형을 설명합니다. 단위는 애플리케이션 정의( SetViewportRect 사용)입니다.
  • 콘텐츠 좌표계 - 기본 콘텐츠의 사각형 또는 크기를 설명합니다. 단위는 애플리케이션 정의( SetContentRect 사용)입니다.

세 시스템 모두에 대해 좌표는 각 왼쪽 위 원점과 비교하여 정의되며 오른쪽과 아래쪽으로 양수 증가합니다. 이러한 좌표계는 다음 다이어그램에 나와 있습니다. 뷰포트 사각형 내의 콘텐츠 섹션만 최종 사용자가 보거나 조작할 수 있습니다.

콘텐츠, 클라이언트 및 뷰포트 좌표가 상호 작용하는 방법을 보여 주는 다이어그램

변형

직접 조작 은 전체 표시된 출력에 영향을 주는 여러 변환을 유지 관리합니다.

  • 콘텐츠 변환 – 조작 또는 관성 기반 직접 조작 에 의해 계산된 초기 변환입니다. 끌기 지점, 난간, 기본 오버팬(조작), 기본 오버본스(관성) 및 ZoomToRect 애니메이션의 효과를 캡처합니다.
  • 출력 변환 - 최종 시각적 개체 또는 출력 변환입니다. 동기화 변환뿐만 아니라 콘텐츠의 조합입니다.
  • 동기화 변환 – SyncContentTransform을 호출할 때 계산됩니다. 직접 조작은 기존 출력 변환을 유지하면서 애플리케이션에서 제공하는 새 콘텐츠 변환을 적용하는 데 도움이 됩니다.
  • 디스플레이 변환 – 사후 처리의 일부로 애플리케이션에 의해 적용됩니다. 자세한 내용은 SyncDisplayTransform 을 참조하세요.

출력 변환은 화면에서 표면을 시각적으로 오프셋하기 위한 것이므로 직접 조작 은 출력 변환 구성 요소에서 필요한 반올림을 수행하여 텍스트 및 기타 콘텐츠가 항상 정수 픽셀 경계에서 렌더링/합성되도록 합니다. 반올림 메커니즘은 동작 속도 및 원격 데스크톱의 존재를 포함하여 여러 요인에 따라 달라집니다. 보조 콘텐츠에 대한 반올림 메커니즘은 두 콘텐츠 간의 동작 차이를 고려하면서 기본 콘텐츠의 반올림 메커니즘과 일치합니다. GetOutputTransform의 클라이언트는 다양한 요인이 영향을 주기 때문에 출력 변환의 정확한 반올림 메커니즘에 의존해서는 안 됩니다.

참고

즉, 콘텐츠 변환의 구성 요소는 정수가 아니고 하위 픽셀 오프셋을 포함할 수 있습니다. 직접 조작을 사용하는 클라이언트는 GetOutputTransform을 사용하여 수동 업데이트 모드를 사용할 때 콘텐츠에 적용할 올바른 시각적 변환을 계산하는 것이 좋습니다. 기본 제공 작성기를 사용하여 자동 업데이트 모드를 사용하는 경우 직접 조작은 클라이언트를 대신하여 이 변환을 자동으로 적용합니다. 이 변환은 시각적 출력을 작성할 때 시각적으로 만족스러운 결과를 보장하기 위해 직접 조작에 의해 생성됩니다.

뷰포트 상태

입력이 처리될 때 뷰포트는 출력 변환에 대한 입력의 상호 작용 상태 및 매핑을 관리합니다. GetStatus를 호출하여 뷰포트의 상호 작용 상태를 확인합니다.

directmanipulation 상호 작용 상태를 보여 주는 다이어그램

  • 빌드 – 뷰포트가 생성되고 있으며 아직 입력을 처리할 수 없습니다. 입력을 처리하려면 IDirectManipulationViewport::Enable을 호출합니다. Enable이 호출되지 않으면 뷰포트는 사용 안 함 상태로 이동합니다.

    참고

    이는 상호 작용의 초기 상태입니다.

  • 사용 – 뷰포트가 입력을 처리할 준비가 된 것입니다. 연락처가 다운되고(SetContact 가 호출됨) 조작이 감지되면 뷰포트가 실행 중으로 전환됩니다.

  • 실행 중 – 뷰포트가 현재 입력을 처리하고 콘텐츠를 업데이트하고 있습니다. 접촉이 해제되면 뷰포트가 구성된 경우 관성으로 전환됩니다.

  • 관성 – 콘텐츠가 관성 애니메이션에서 이동됩니다. 관성은 완료되면 뷰포트가 준비로 전환됩니다. 뷰포트에서 자동 사용 안 함으로 설정된 경우 관성에서 준비로 전환된 다음 사용 안 함으로 전환됩니다.

  • 준비 – 뷰포트가 입력을 처리할 준비가 된 것입니다. 연락처가 다운되고(SetContact 가 호출됨) 조작이 감지되면 뷰포트가 실행 중으로 전환됩니다.

  • 일시 중단됨 – 해당 입력이 SetContact 체인의 부모로 승격되면 뷰포트가 일시 중단될 수 있습니다. 여러 뷰포트: 적중 테스트 및 뷰포트 계층 구조에서 자세히 설명합니다.

  • 사용 안 함 – 뷰포트는 입력을 처리하거나 콜백을 수행하지 않습니다. IDirectManipulationViewport::D isable을 호출하여 다양한 상태에서 뷰포트를 사용하지 않도록 설정할 수 있습니다. 뷰포트에서 자동 사용 안 함으로 설정된 경우 조작이 처리된 후 자동으로 사용 안 함으로 전환됩니다. 비활성화된 뷰포트를 다시 사용하도록 설정하려면 IDirectManipulationViewport::Enable을 호출합니다.

여러 뷰포트: 적중 테스트 및 뷰포트 계층 구조, ActivateConfiguration, GetOutputTransform, SyncDisplayTransform