====== 직선 (Line) ======

화면에 직선을 그릴 수 있는 도구입니다.

{{ :comfilestudio:draw_shapes:line1.png?nolink |직선 그리기 예시}}

직선을 더블클릭하면 선 굵기와 색상을 자유롭게 변경할 수 있는 속성창이 나타납니다.

{{ :comfilestudio:draw_shapes:hmiline.png?nolink |직선 속성 설정 화면}}

**<데스크탑 화면에서 가져오기>** 기능을 사용하면, 현재 편집 중인 화면 내에 이미 사용된 색상을 스포이드처럼 바로 선택하여 적용할 수 있습니다. 

{{ :comfilestudio:draw_shapes:color.png?nolink |색상 선택 및 스포이드 기능}}

====== 사각형 및 원 (Shape) ======

화면에 사각형이나 원(타원)을 그릴 수 있습니다. 위젯을 배치한 후 더블클릭하여 크기, 테두리, 채우기 색상 등의 속성을 변경합니다.

{{ :comfilestudio:draw_shapes:circlebox.png?nolink |사각형 및 원 위젯 예시}}

====== 채워진 사각형으로 배경 꾸미기 ======

사각형 위젯의 **<내부채움>**과 **<모서리 둥글게>** 옵션을 조합하면 미려한 UI 배경을 만들 수 있습니다.

1. 우선 프로젝트 화면의 배경색을 디자인 콘셉트에 맞게 조정합니다.
{{ :comfilestudio:draw_shapes:completescreen0.png?nolink |기본 배경색 설정}}

2. 화면 위에 사각형(박스)을 그리세요.
{{ :comfilestudio:draw_shapes:completescreen3.png?nolink |사각형 배치}}

3. 박스를 더블클릭하여 **<내부채움>**과 **<모서리 둥글게>**를 체크한 뒤, 배경과 대비되는 적절한 색상을 지정합니다.
{{ :comfilestudio:draw_shapes:fillbox.png?nolink |사각형 속성 변경}}
{{ :comfilestudio:draw_shapes:completescreen2.png?nolink |배경 박스 적용 완료}}

4. 완성된 배경 박스 위에 버튼, 텍스트, 게이지 등의 위젯을 배치하여 세련된 감시 화면을 완성하세요.
{{ :comfilestudio:draw_shapes:completescreen.png?nolink |최종 화면 구성 예시}}

----
keyword: 도형 그리기, 직선, 사각형, 원, 라운드 박스, 배경 디자인, 컴파일 스튜디오 UI

[[comfilestudio:index#액션|상위 페이지로 가기]]