도형 만들기

Qt Quick 디자이너는 일반적인 그리기 도구가 아닌 UI 디자인 도구이므로 필요에 따라 수정할 수 있는 미리 만들어진 UI 컨트롤을 제공하는 데 중점을 둡니다. 컨트롤의 일부 속성 값은 스타일링을 사용하여 지정되므로 변경할 수 없습니다.

그러나 컴포넌트의 일부 컴포넌트를 사용하여 직사각형과 같은 기본 모양을 그릴 수 있습니다. 또한 Qt Quick Shapes Design Helpers 모듈을 설치하여 2D 보기에서 타원, 다각형, 별과 같은 더 복잡한 모양을 만들 수도 있습니다.

Components 의 대부분의 시각적 컴포넌트는 Item 컴포넌트를 기반으로 합니다. 예를 들어 마우스 영역과 같이 시각적 모양 자체는 없지만 위치, 크기, 표시 여부 등 시각적 컴포넌트 전반에 걸쳐 공통적으로 적용되는 모든 속성을 정의합니다. 자세한 내용은 기본 컴포넌트 속성 설정을 참조하세요.

또한 각 컴포넌트에는 시각적 모양과 동작을 지정하는 속성 세트가 있습니다. 속성 값을 수정하여 채우기 및 테두리 색상, 획 너비 및 도형의 기타 특성을 설정할 수 있습니다.

다음 섹션에서는 사용 가능한 도형과 해당 속성에 대해 자세히 설명합니다. Properties 보기에서 속성 값을 수정할 수 있습니다.

직사각형

기본 Rectangle 구성 요소는 네 면과 모서리, 단단한 테두리가 있는 도형을 그리는 데 사용됩니다.

직사각형은 단색 채우기 색상 또는 Fill color 필드에서 설정한 선형 그라데이션으로 채울 수 있습니다. 색상 선택기를 사용하여 색상을 선택하고 그라데이션 선택기를 사용하여 미리 정의된 웹 그라데이션 세트에서 그라데이션을 선택할 수도 있습니다.

Border color 및 Border width 필드의 값을 설정하여 직사각형에 고유한 색상과 두께를 가진 단색 테두리(선택 사항)를 추가할 수 있습니다. 채우기 색상이 없는 테두리를 만들려면 색상을 투명으로 설정하는 버튼을 선택합니다.

Radius 필드의 값을 설정하면 모서리가 둥근 모양을 만들 수 있습니다. 직사각형 너비, 높이, 반지름 속성의 값을 적절히 조합하여 타원형 및 원형 모양을 만들 수 있습니다. 예를 들어 완전한 원을 그리려면 먼저 네 변의 길이가 모두 같은 직사각형을 그린 다음 반지름을 변 길이의 절반으로 설정합니다.

곡선 모서리를 그릴 때는 Advanced 섹션에서 Antialiasing 을 활성화하여 도형의 모양을 개선하는 것이 좋습니다.

직사각형 모양

직사각형의 각 모서리를 독립적으로 수정하거나 파선 테두리를 사용하려면 Components >에서 제공되는 RectangleShape 구성 요소의 인스턴스를 만듭니다. Qt Quick Shapes Design Helpers 에서 제공되는 기본 Rectangle 컴포넌트 대신 Default Components > Basic 에서 제공되는 컴포넌트의 인스턴스를 만듭니다.

Corner Radiuses 섹션에서 속성 값을 설정하면 각 모서리를 독립적으로 그릴 수 있습니다. 반경 값을 Corner Bevel 섹션의 값과 함께 사용하면 모서리가 잘린 모양을 만들 수 있습니다.

선형 그라데이션 외에도 Fill color 필드에서 원뿔형 및 방사형 그라데이션을 지정할 수 있습니다.

Stroke Details 섹션에서 파선 및 점선의 테두리 모드, 선 스타일 및 대시 패턴을 지정할 수 있습니다.

타원 모양

전체 타원, 호 또는 채워진 파이 슬라이스를 추가하려면 Components > >에서 EllipseShape 구성 요소의 인스턴스를 만듭니다. Qt Quick Shapes Design Helpers. Start angle 및 Sweep angle 을 설정하여 도형의 모양을 제어합니다.

기본적으로 이 유형은 전체 타원을 렌더링합니다. 내부는 Fill color 로 채워지고 Stroke color, Stroke width, Stroke style 에 따라 윤곽선이 그려집니다.

호 또는 파이 슬라이스를 만들려면 Start angle 및 Sweep angle 을 0~360도로 설정하여 그릴 타원의 세그먼트를 정의합니다.

간단한 호(윤곽선만)를 만들려면 Fill color 을 Transparent 으로 설정합니다. 호의 선 스타일은 Dash pattern 및 Dash offset 을 사용하여 사용자 지정할 수 있습니다.

채워진 파이 슬라이스(중앙에 연결된 세그먼트)를 만들려면 Fill color 을 설정합니다. 슬라이스의 윤곽선도 스트로크됩니다.

도넛 링(속이 빈 타원)을 만들려면 Inner arc ratio 을 0.0에서 1.0 사이의 값으로 설정합니다. 이 값은 안쪽 타원의 반지름과 바깥쪽 타원의 반지름의 비율을 정의합니다.

획 안쪽 영역은 Fill color 에 설정된 단색 채우기 색상 또는 Shape gradient 유형 중 하나를 사용하여 정의하고 Fill gradient 에 설정한 그라데이션을 사용하여 페인트됩니다. 색상과 그라데이션을 모두 설정한 경우 그라데이션이 사용됩니다.

고유한 색상과 두께를 가진 선택적 테두리를 추가하려면 Stroke color 및 Stroke width 을 설정합니다. 채우기 색상이 없는 테두리를 만들려면 색상을 투명으로 설정합니다.

모서리가 둥근 타원을 그리려면 Corner radius 을 설정합니다.

RegularPolygonShape

일반 다각형은 2D 다각형 모양의 획, 채우기 또는 채우기가 있는 획일 수 있습니다. Stroke Details 을 설정하여 윤곽선의 모양을 변경합니다.

획 안쪽 영역은 단색 채우기 색상 또는 그라데이션을 사용하여 페인트됩니다. 색상과 그라데이션을 모두 설정한 경우 그라데이션이 사용됩니다.

획이 있는 다각형을 만들려면 Side count 을 3~100 사이로, Stroke width 을 0보다 크게 설정합니다.

모서리가 둥근 다각형을 그리려면 Corner radius 을 설정합니다.

별 모양

별은 별 모양의 획, 채우기 또는 채우기가 있는 획이 될 수 있습니다. Stroke Details 을 설정하여 윤곽선의 모양을 변경합니다.

Point count 을 3~60 사이로 설정하여 별의 점 수를 지정합니다. 비율을 0.1에서 1 사이로 설정하여 중심으로부터 별 안쪽 점의 거리를 지정합니다.

획 안쪽 영역은 단색 채우기 색상 또는 그라데이션을 사용하여 페인트됩니다. 색상과 그라데이션을 모두 설정한 경우 그라데이션이 사용됩니다.

획이 있는 별을 만들려면 Side count 을 3~100 사이로 설정하고 Stroke width 을 0보다 크게 설정합니다.

모서리가 둥근 별을 그리려면 Corner radius 을 설정합니다.

도형 구성 요소 요약

다음 표에는 도형을 그리는 데 사용할 수 있는 구성 요소가 나열되어 있습니다. 위치 열은 Components 에서 구성 요소의 위치를 나타냅니다. MCU 지원 열은 MCU에서 지원되는 컴포넌트를 나타냅니다.

아이콘	이름	위치	MCU 지원	목적
	타원형	타원, 호 또는 파이 슬라이스를 렌더링할 수 있는 도형 컴포넌트입니다.	No
	직사각형	기본 컴포넌트 - 기본	Yes	단색 채우기 색상 또는 선형 그라데이션과 선택적 테두리로 칠해진 직사각형입니다. 반지름 속성을 사용하여 원을 그릴 수 있습니다.
	직사각형 모양	Qt Quick 도형 디자인 도우미	No	단색 채우기 색상 또는 선형, 원뿔 또는 방사형 그라데이션으로 칠해진 확장된 직사각형으로, 모서리는 서로 독립적으로 모양을 지정할 수 있습니다.
	정규 다각형 도형	Qt Quick 도형 디자인 도우미	No	테두리(선택 사항)가 있는 채워진 정다각형입니다.
	스타 모양	Qt Quick 도형 디자인 도우미	아니요	테두리(선택 사항)가 있는 채워진 별 모양 다각형입니다.