グラデーションのピック

グラデーションを設定するには、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 フィールドに設定します。

ウェブグラデーションの選択

Gradient Picker では、QGradient をサポートするコンポーネントにウェブグラデーションを指定できます。

ウェブグラデーションをコンポーネントに適用するには、次の手順に従います：

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

   

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

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

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