그라데이션 선택

그라데이션을 설정하려면 ‘ Properties ’ 뷰의 색상 선택기(6)에 있는 그라데이션 막대를 사용하십시오. 색상 선택기를 열려면, 예를 들어 ‘ Fill color ’ 또는 ‘ Border color ’ 속성의 색상 필드를 클릭하십시오.

그라데이션 막대를 표시하려면 색상 선택기의 드롭다운 메뉴(5)에서 그라데이션 유형을 선택하십시오.

그라데이션은 두 가지 이상의 색상이 매끄럽게 혼합되어 정의됩니다. 색상은 그라데이션 스톱(gradient stop) 집합으로 지정되며, 각 스톱은 0.0에서 1.0 사이의 그라데이션 막대 상의 위치와 색상을 정의합니다. 그라데이션 막대를 따라 그라데이션 스톱을 드래그하여 값을 설정하십시오. 그라디언트 스톱 아래의 화살표를 선택하면 해당 값을 숫자로 확인할 수 있습니다.

그라디언트 스톱을 추가하려면 커서를 그라디언트 바 위로 이동시킨 후 손가락 모양의 커서로 해당 지점을 가리키세요. 그라디언트 스톱을 제거하려면 그라디언트 라인에서 멀리 끌어내세요.

색상 선택기의 ‘ Gradient Controls ’ 섹션에서 ‘ Horizontal ’ 또는 ‘ Vertical ’를 선택하여 그라데이션 방향을 설정합니다.

그라디언트 계산은 단색 채우기나 이미지 사용에 비해 계산 부하가 클 수 있습니다. UI 내의 정적 구성 요소에만 그라디언트를 사용하는 것을 고려하십시오.

그라데이션 속성 설정

색상 채우기 유형으로 ‘ Linear ’(1), ‘ Radial ’(2) 또는 ‘ Conical ’(3) 중 하나를 선택할 수 있습니다. 그라디언트 유형 중 하나를 선택한 후, 색상 선택기의 ‘ Gradient Controls ’ 섹션에서 해당 유형을 지원하는 컴포넌트에 대한 그라디언트 속성을 정의할 수 있습니다.

선형 그라데이션

선형 그라디언트는 시작점과 끝점 사이의 색상을 보간합니다. 이 두 점 밖에서는 확산 유형에 따라 그라디언트가 패딩, 반사 또는 반복 처리됩니다. ‘ X1 ’, ‘ X2 ’, ‘ Y1 ’ 및 ‘ Y2 ’ 필드에서 수평 및 수직 보간을 위한 시작점과 끝점을 설정하십시오.

방사형 그라데이션

방사형 그라디언트는 초점 원과 중심 원 사이에서 색상을 보간합니다. 두 원으로 정의된 원뿔 영역 바깥쪽의 점은 투명하게 표시됩니다. 끝점 바깥쪽에서는 스프레드 유형에 따라 그라디언트가 패딩, 반사 또는 반복됩니다.

Center radius 및 Focal radius 필드에서 중심 반경과 초점 반경을 설정할 수 있습니다. 간단한 방사형 그라데이션을 만들려면 Focal radius 을 0으로 설정하십시오.

CenterX, CenterY, FocalX 및 FocalY 필드에서 중심점과 초점점을 설정할 수 있습니다. 간단한 방사형 그라데이션을 지정하려면 FocalX 과 FocalY 을 각각 CenterX 과 CenterY 의 값으로 설정하십시오.

원뿔형 그라데이션

원뿔형 그라디언트는 중심점을 기준으로 시계 반대 방향으로 색상을 보간합니다. ‘ CenterX ’ 및 ‘ CenterY ’ 필드에서 그라디언트의 수평 및 수직 중심점을 설정하고, ‘ Angle ’ 필드에서 시작 각도를 설정합니다.

웹 그라디언트 선택

Gradient Picker 를 사용하면 QGradient 를 지원하는 컴포넌트에 WebGradients를 지정할 수 있습니다.

컴포넌트에 웹 그라데이션을 적용하려면:

1. Navigator 또는 2D 보기에서 컴포넌트를 선택합니다.
2. Properties 보기에서 색상 속성을 선택하여 색상 선택기를 엽니다.
3. Gradient Picker Dialog 아이콘(4)을 선택합니다.

   

4. 목록에서 그라데이션을 선택한 다음, ‘ Apply ’을 선택합니다.

' User Presets ' 탭에서 그라데이션을 저장하려면 ' Save'을 선택하십시오.

기본적으로 선형 그라디언트가 사용되지만, 색상 선택기의 드롭다운 메뉴(5)에서 지원되는 다른 그라디언트 유형을 선택할 수 있습니다.