선, 직사각형과 원

텍스트만 있으면 단조롭습니다. GFX 라이브러리는 도형도 그리므로 데이터를 둘러싸고, 측정기를 만들고, 실제로 쓸 수 있는 작은 인터페이스를 설계할 수 있습니다. 🎨

모든 도형은 좌표 격자 위에 놓입니다. (0,0)은 왼쪽 위 지점이고, x는 오른쪽으로, y는 아래쪽으로 증가합니다. 이미 사용한 텍스트 커서와 같습니다.

가장 작은 표시 단위는 점 하나입니다. drawPixel은 x, y, 색상을 받아 화면의 정확히 한 지점만 밝힙니다.

drawLine은 두 지점을 연결합니다. 시작 x와 y, 끝 x와 y, 색상을 지정하면 두 지점 사이에 직선을 그립니다.

drawRect에는 왼쪽 위의 x와 y, 그리고 너비와 높이가 필요합니다. 테두리만 그리므로 값이나 영역을 둘러싸기에 좋습니다.

같은 인수를 사용해 fillRect로 바꾸면 상자 전체가 단색으로 채워집니다. 채워진 막대는 측정기와 진행률 표시의 핵심입니다.

drawCircle은 중심의 x와 y, 그리고 반지름을 받습니다. 고리 모양을 그리므로 다이얼, 상태 표시 점, 둥근 아이콘에 유용합니다.

단색 원판을 만들려면 fillCircle을 사용합니다. 작게 채운 원은 켜짐/꺼짐 상태를 한눈에 알아보기 쉬운 표시로 만들어 줍니다.

더 부드러운 모양을 원한다면 drawRoundRect에 너비와 높이 다음으로 모서리 반지름을 지정합니다. 둥근 상자는 버튼과 카드에 더 친근한 느낌을 줍니다.

그리는 순서가 중요합니다. 나중에 그린 도형이 위에 놓입니다. 먼저 채워진 상자를 그린 다음 그 위에 텍스트를 출력하면 레이블이 있는 배지처럼 보입니다.

항상 그렇듯 모든 그리기 작업은 버퍼에 저장됩니다. 도형 작업을 마친 뒤 display.display()를 호출하면 완성된 이미지 전체가 한 번에 나타납니다.

이제 픽셀, 선, 사각형, 원을 그리고 도형을 텍스트와 겹쳐 표시할 수 있습니다. 실제 UI를 구성하는 데 필요한 기본 요소는 이것으로 충분합니다.