図形の作成

Qt Quick Designerは一般的な描画ツールではなく、UIデザインツールです。したがって、既製のUIコントロールを提供することに重点を置き、必要に応じて変更することができます。コントロールの一部のプロパティの値はスタイリングによって指定されるため、変更することはできません。

ただし、Componentsに含まれるいくつかのコンポーネントを使用することで、矩形などの基本的な図形を描画することができます。さらに Qt Quick Shapes Design Helpersモジュールをインストールすると、2D ビューで楕円、多角形、星形など、より複雑な図形を作成できます。

Components のほとんどのビジュアルコンポーネントはItem コンポーネントをベースにしています。それ自体に視覚的な外観はありませんが（例えばマウ ス領域と同様）、位置、サイズ、可視性など、ビジュアルコンポーネン トに共通するすべてのプロパティを定義しています。詳しくは、基本コンポーネントプロパティの設定を参照してください。

さらに、各コンポーネントには、そのビジュアル外観と動作を指定する一連のプロパティがあります。プロパティの値を変更することで、塗りつぶしやボーダーの色、ストロークの幅、その他の図形の特性を設定できます。

以下のセクションでは、使用可能な図形とそのプロパティの詳細について説明します。プロパティの値は、Properties のビューで変更できます。

矩形

基本的なRectangle コンポーネントは、4 つの辺と角、および実線の境界を持つ図形を描画するために使用されます。

矩形は、Fill color フィールドで設定した塗りつぶし色または直線グラデーションで塗りつぶすことができます。カラー ピッカーで色を選択したり、グラデーション ピッカーで WebGradients の定義済みセットからグラデーションを選択することもできます。

Border color 、Border width フィールドの値を設定することで、矩形に独自の色と太さを持つ無地のボーダーをオプションで追加できます。塗りつぶし色のないボーダーを作成するには、色を透明に設定する ボタンを選択します。

Radius フィールドの値を設定することにより、角が丸い図形を作成することができます。矩形の幅、高さ、半径プロパティの値を適切に組み合わせると、楕円形や円形の図形を作成できます。たとえば、完全な円を描くには、まず4辺がすべて等しい長方形を描き、その半径を辺の長さの半分に設定します。

曲線のエッジを描くときは、Advanced セクションでAntialiasing を有効にすると、形状の外観がよくなります。

矩形シェイプ

長方形の各コーナーを個別に変更したり、破線の境界線を使用する場合は、Components >で利用可能なRectangleShape コンポーネントのインスタンスを作成します。 Qt Quick Shapes Design Helpersで利用できる基本的なRectangle コンポーネントではなく、Default Components >Basic で利用できる コンポーネントのインスタンスを作成します。

Corner Radiuses セ ク シ ョ ンのプ ロ パテ ィ の値を設定す る こ と で、 各隅を独立に描 く こ と がで き ます。半径の値をCorner Bevel セクションの値と組み合わせて使うことで、角をカットした形状を作成することができます。

Fill color フィールドでは、線形グラデーションに加えて、円錐グラデーションと放射状グラデーションを指定できます。

Stroke Details セクションでは、破線と点線のボーダーモード、ラインスタイル、ダッシュパターンを指定できます。

楕円

完全な楕円、円弧、または塗りつぶしたパイスライスを追加するには、Components > で利用可能なEllipseShape コンポーネントのインスタンスを作成します。 Qt Quick Shapes Design Helpers.Start angle とSweep angle を設定して、図形の外観を制御します。

デフォルトでは、このタイプは完全な楕円を描画します。内部はFill color で塗りつぶされ、輪郭はStroke color,Stroke width,Stroke style に従って描画されます。

円弧またはパイスライスを作成するには、Start angle とSweep angle を 0-360 度に設定し、描画する楕円のセグメントを定義します。

単純な円弧（輪郭だけ）を作成するには、Fill color をTransparent に設定します。円弧の線 形はDash pattern とDash offset でカスタマイズできます。

塗りつぶされたパイ・スライス（中心に接続されたセグメント）を作成するには、Fill color を設定します。スライスの輪郭もストロークされます。

ドーナツリング（中空の楕円）を作成するには、Inner arc ratio を 0.0 から 1.0 の間の値に設定します。これは内側の楕円の半径と外側の楕円の半径の比を定義します。

ストロークの内側の領域は、Fill color で設定された塗りつぶし色か、Shape gradient タイプのいずれかを使用して定義され、Fill gradient で設定されたグラデーションのいずれかを使用して描かれます。色とグラデーションの両方を設定した場合は、グラデーションが使用されます。

独自の色と太さを持つ任意の枠線を追加するには、Stroke color とStroke width を設定します。塗りつぶし色のない枠線を作成するには、色を透明に設定します。

角を丸めた楕円を描くには、Corner radius を設定します。

正多角形

通常の多角形は、単なる2D多角形のストローク、塗りつぶし、または塗りつぶし付きのストロークにすることができます。アウトラインの外観を変更するにはStroke Details を設定します。

ストロークの内側の領域は、ベタの塗りつぶし色かグラデーションを使用して描かれます。色とグラデーションの両方を設定した場合は、グラデーションが使用されます。

ストロークのある多角形を作成するには、Side count を 3 から 100 の間、Stroke width を 0 より大きく設定します。

角が丸い多角形を描くには、Corner radius を設定します。

星形

星形は、星形のストローク、フィリング、またはフィリング付きのストロークにすることができます。アウトラインの外観を変更するにはStroke Details を設定します。

星の点の数を指定するには、Point count を 3 から 60 の間で設定します。比率を 0.1 から 1 の間で設定して、星の内側の点の中心からの距離を指定します。

ストロークの内側の領域は、ベタの塗りつぶし色かグラデーションを使用して描かれます。色とグラデーションの両方を設定した場合は、グラデーションが使用されます。

ストロークのある星を作成するには、Side count を 3 から 100 の間、Stroke width を 0 より大きく設定します。

角を丸めた星を描くには、Corner radius を設定します。

図形コンポーネントのまとめ

次の表は、図形の描画に使用できるコンポーネントの一覧です。位置の列は、Components におけるコンポーネントの位置を示しています。MCU サポートの列は、どのコンポーネントが MCU でサポートされているかを示しています。

アイコン	名称	場所	MCUサポート	目的
	楕円	楕円、円弧、パイスライスをレンダリングできるシェイプコンポーネント。	なし
	矩形	デフォルトコンポーネント - 基本	あり	塗りつぶし色または線形グラデーションで描かれ、オプションで境界線を持つ矩形。半径プロパティを使用して円を描くことができます。
	矩形シェイプ	Qt Quick 図形デザインヘルパー	なし	塗りつぶし色または直線、円錐、放射状のグラデーションで描かれ、互いに独立した形状にできる角がある拡張矩形。
	正多角形シェイプ	Qt Quick 形状デザインヘルパー	なし	塗りつぶされた正多角形で、境界線は任意です。
	星形	Qt Quick 図形デザインヘルパー	なし	塗りつぶされた星形の多角形で、任意の境界線があります。