캔버스 뷰

캔버스는 애플리케이션의 그래픽 요소를 개발할 때 사용되는 뷰로서, 실행 시 보여지는 인터페이스를 이미지로 보여줍니다. 여기서는 애니메이션이나 시스템 요소 간 상호작용과 같은 동적 요소에 대한 설명을 제공합니다.

TouchGFX Designer의 캔버스 뷰

왼쪽 도구 모음

왼쪽 도구 모음에는 Screens와 Custom Containers 사이에서 이동할 수 있는 탭 컨트롤이 포함되어 있습니다.

Screens 및 Custom Containers

Screens 탭과 Custom Containers 탭에는 각 스크린과 커스텀 컨테이너에 속하는 위젯에 대한 개요 트리가 포함되어 있습니다. 또한 트리 내 각 위젯마다 다른 위젯도 포함될 수 있는데, 위젯 이름 옆의 V자 기호를 클릭하면 항목을 접을 수 있습니다.

스크린, 커스텀 컨테이너 그리고 위젯의 순서는 다른 스크린, 커스텀 컨테이너 그리고 위젯의 위 또는 아래로 드래그하여 변경할 수 있습니다. 또는 위젯 순서 컨트롤을 사용해 변경하는 방법도 있습니다. 위젯 순서를 변경하면 다른 위젯 위에 렌더링되는 위젯이 결정됩니다.

컨테이너 유형의 위젯에는 하위 위젯을 추가할 수 있는데, 트리 뷰에서 다른 위젯을 여기로 드래그하면 됩니다. 그 밖에 위젯을 한 스크린에서 다른 스크린으로 드래그하는 것도 가능합니다.

CTRL을 누른 상태에서 위젯을 클릭하면 여러 개의 위젯을 선택할 수 있습니다.

"+" 버튼을 클릭하면 스크린과 커스텀 컨테이너를 프로젝트에 추가할 수 있습니다. 위젯 메뉴에서 커스텀 컨테이너를 스크린과 다른 커스텀 컨테이너에 추가할 수 있습니다. 커스텀 컨테이너는 'Custom Containers' 카테고리에서 찾을 수 있습니다.

스크린, 커스텀 컨테이너 그리고 위젯에서 마우스 오른쪽 버튼을 클릭하면 다음과 같은 메뉴가 표시됩니다.

Rename	F2
Delete Widget	DEL
Copy	CTRL + C
Paste	CTRL + V
Move Up	CTRL + F
Move Down	CTRL + B
Edit Source Files*

*스크린과 커스텀 컨테이너에서만 사용 가능합니다.

왼쪽 바의 스크린 트리

캔버스

캔버스 뷰 상단에는 위젯 메뉴가 있는데, 사용 가능한 위젯이 여기에 모두 포함되어 있습니다.

뷰 중앙에는 캔버스가 있으며, 여기에 현재 선택된 스크린 또는 커스텀 컨테이너 뷰가 표시됩니다.

뷰 하단에는 확대/축소 컨트롤과 콘텐츠 자르기 컨트롤이 있습니다.

캔버스 뷰의 캔버스

위젯 메뉴

위젯 메뉴에서 All 위젯 그룹 탭을 클릭하거나, 단축키 A를 누르면 사용 가능한 모든 위젯이 카테고리별로 분류되어 있는 목록이 열립니다. 특정 위젯 그룹 탭을 클릭하면 해당 카테고리에 속한 위젯의 목록이 열립니다.

위젯을 클릭하면 현재 선택되어 표시된 스크린 또는 커스텀 컨테이너의 캔버스에 해당 위젯이 추가됩니다.

All 위젯 그룹에도 검색 필드가 있지만 여기서는 퍼지 검색 기능을 지원하기 때문에 검색어와 가장 일치하는 위젯을 찾는 데 유용합니다. 가장 일치하는 결과가 강조 표시됩니다. 퍼지 검색 기능이 있기 때문에, 약어가 요인에 포함되는 경우 "bwl"을 입력하면 "Button With Label"이 결과로 표시됩니다. 검색 필드에 검색어를 입력하고 Enter를 누르면 강조 표시된 위젯이 캔버스에 삽입되고 위젯 메뉴가 닫힙니다.

캔버스 뷰의 위젯 메뉴

위젯 선택

위의 애니메이션과 같이, 캔버스에서 클릭만 해도 위젯을 선택할 수 있습니다. 복수 선택도 가능한데, 키보드에서 Ctrl을 누른 채 여러 개의 위젯을 클릭하면 됩니다.

위젯 위치 조정

위의 애니메이션과 같이, 가장자리를 드래그하면 위젯의 위치를 변경하거나 크기를 조정할 수 있습니다.

또한 화살표 키를 사용하여 선택한 위젯을 픽셀 단위로 옮기는 것도 가능합니다. 키보드에서 Ctrl을 누른 채 화살표 키를 사용하면 선택한 위젯이 10픽셀씩 이동합니다.

위젯 순서 컨트롤

앞으로 보내기와 뒤로 보내기 단축키를 사용하여 위젯 순서를 조정할 수 있습니다. 또한 스크린이나 커스텀 컨테이너 트리에서도 위젯 순서를 바꿀 수 있습니다.

앞으로 보내기를 실행하는 단축키는 CTRL + F입니다.

뒤로 보내기를 실행하는 단축키는 CTRL + B입니다.

내용 자르기 컨트롤

캔버스에서 스크린과 커스텀 컨테이너, 그리고 컨테이너형 위젯의 하위 위젯의 경계를 벗어나는 위젯은 잘립니다. 내용 자르기 컨트롤은 위젯 전체 자르기와 부분 표시하기 사이에서 전환됩니다.

캔버스 뷰에서 잘린 내용 표시하기/숨기기 컨트롤

아래 이미지를 보면 Box 절반이 스크린 경계를 벗어나 있습니다. 이때 내용 자르기 컨트롤이 잘린 위젯을 표시하도록 설정되어 있으면 Box가 완전하게 표시되지 않고 경계를 벗어난 부분이 흐릿하게 표시됩니다.

잘린 내용을 표시하거나 숨길 때 각각 보여지는 Box 위젯의 모습

변경 이력 컨트롤

이전에 캔버스에서 실행한 변경 내용들은 파일 메뉴에서 Edit을 통해 실행을 취소하거나 재실행할 수 있습니다.
스크린과 커스텀 컨테이너마다 각각 변경 이력을 보유하고 있으므로 특정 스크린에서 수행한 변경 작업을 실행 취소하거나 재실행하려면 해당 스크린이 캔버스에 표시되어야 합니다.

변경 이력 컨트롤을 실행하는 단축키는 CTRL + Z 와 CTRL + Y.

확대/축소 컨트롤

캔버스의 확대/축소 비율은 캔버스 하단에 있는 확대/축소 컨트롤을 사용해 조절할 수 있습니다.

캔버스를 중앙으로 조정하여 100% 비율로 돌아가려면 Reset Canvas 버튼을 누릅니다.

캔버스 뷰의 확대/축소 컨트롤

다음과 같은 단축키로도 확대/축소 비율을 조정할 수 있습니다.

확대/축소 25%	CTRL + 1	CTRL + NUMPAD 1
확대/축소 50%	CTRL + 2	Ctrl을 + 2
확대/축소 75%	CTRL + 3	CTRL + NUMPAD 3
확대/축소 100%	CTRL + 4	CTRL + NUMPAD 4
확대	CTRL + Mouse wheel up	CTRL + '+'
축소	CTRL + Mouse wheel down	CTRL + '-'
확대/축소 리셋	CTRL + 0	CTRL + NUMPAD 0

오른쪽 도구 모음

오른쪽 도구 모음에는 현재 선택된 위젯의 Properties와 현재 캔버스에 보이는 스크린 또는 커스텀 컨테이너의 Interactions로 이동할 수 있는 탭 컨트롤이 있습니다.

Properties

Properties 탭에는 현재 선택된 위젯/스크린/커스텀 컨테이너의 속성이 표시됩니다. 속성 목록 상단에는 선택된 구성요소의 이름이 표시됩니다. 이름 왼쪽에는 아이콘이 있습니다. 이 아이콘에 마우스 커서를 갖다 대면 설명 문구가 표시되고, 아이콘을 클릭하면 구성요소 문서로 연결됩니다.

Box의 속성

Interactions

Interactions 탭에는 현재 캔버스에 표시된 스크린 또는 커스텀 컨테이너의 상호작용이 표시됩니다.

상호작용은 "+" 버튼을 클릭해 추가할 수 있습니다.

상호작용 추가하기

Further reading

Interactions