グラデーションの選択

グラデーションを設定するには、「Properties 」ビューの色選択ツールのグラデーションバー（6）を使用します。色選択ツールを開くには、例えば「Fill color 」または「Border color 」プロパティの色フィールドをクリックします。

グラデーションバーを表示するには、カラーピッカーのドロップダウンメニュー (5) からグラデーションの種類を選択します。

グラデーションは、2色以上の色がシームレスに混ざり合うことで定義されます。色はグラデーションストップのセットとして指定され、各ストップはグラデーションバー上の0.0から1.0までの位置と色を定義します。グラデーションバー上でグラデーションストップをドラッグして、その値を設定します。 グラデーションストップの下にある矢印を選択すると、その値が数値として表示されます。

グラデーションストップを追加するには、カーソルをグラデーションバーの上に移動させ、指の形をしたカーソルでその位置を指し示します。グラデーションストップを削除するには、グラデーションラインから引き離します。

グラデーションの方向を設定するには、カラーピッカーの「Gradient Controls 」セクションで「Horizontal 」または「Vertical 」を選択します。

グラデーションの計算は、単色塗りや画像の使用に比べて処理負荷が高くなる場合があります。UI内の静的なコンポーネントにのみグラデーションを使用することを検討してください。

グラデーションのプロパティの設定

塗りつぶしの種類として、「Linear 」（1）、「Radial 」（2）、または「Conical 」（3）を選択できます。いずれかのグラデーションの種類を選択した後、カラーピッカーの「Gradient Controls 」セクションで、その種類をサポートするコンポーネントのグラデーションプロパティを定義できます。

線形グラデーション

線形グラデーションは、開始点と終了点の間で色を補間します。これらの点の外側では、スプレッドタイプに応じて、グラデーションがパディング、反転、または繰り返し処理されます。水平および垂直方向の補間における開始点と終了点は、X1 、X2 、Y1 、およびY2 フィールドで設定します。

放射状グラデーション

放射状グラデーションは、焦点円と中心円の間で色を補間します。これら2つの円で定義される円錐の外側の点は透明になります。端点の外側では、スプレッドの種類に応じて、グラデーションがパディング、反転、または繰り返し処理されます。

中心半径と焦点半径は、Center radius およびFocal radius フィールドで設定できます。単純な放射状グラデーションの場合は、Focal radius を0に設定してください。

「CenterX 」、「CenterY 」、「FocalX 」、および「FocalY 」フィールドで、中心と焦点位置を設定できます。単純な放射状グラデーションを指定するには、「FocalX 」と「FocalY 」を、それぞれ「CenterX 」と「CenterY 」の値に設定します。

円錐グラデーション

円錐グラデーションは、中心点を基準に反時計回りに色を補間します。グラデーションの水平および垂直方向の中心点は、CenterX およびCenterY フィールドで設定し、開始角度はAngle フィールドで設定します。

Webグラデーションの選択

「Gradient Picker 」を使用すると、QGradient をサポートするコンポーネントに対してWebGradientsを指定できます。

コンポーネントにWebグラデーションを適用するには：

1. 「Navigator 」または「2D 」ビューでコンポーネントを選択します。
2. 「Properties 」ビューで、カラープロパティを選択してカラーピッカーを開きます。
3. 「Gradient Picker Dialog 」アイコン（4）を選択します。

   

4. リストからグラデーションを選択し、[Apply] を選択します。

「User Presets 」タブでグラデーションを保存するには、「Save 」を選択します。

デフォルトでは線形グラデーションが使用されますが、カラーピッカーのドロップダウンメニュー (5) から、サポートされている他のグラデーションタイプを選択することもできます。