図形の作成

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

ただし、「コンポーネント」にある一部のコンポーネントを使用すれば、長方形などの基本的な図形を描くことができます。さらに、 Qt Quick Shapes Design Helpers モジュールをインストールすることで、「2D 」ビュー内で楕円、多角形、星形などのより複雑な図形を作成できます。

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

さらに、各コンポーネントには、その外観や動作を指定する一連のプロパティがあります。プロパティの値を変更することで、塗りつぶし色や枠線色、線の太さ、および図形のその他の特性を設定できます。

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

長方形

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

長方形は、Fill color フィールドで設定した単色の塗りつぶし色、または線形グラデーションで塗りつぶすことができます。また、カラーピッカーを使用して色を選択したり、グラデーションピッカーを使用して、あらかじめ定義されたWebGradients のセットからグラデーションを選択したりすることもできます。

「Border color 」および「Border width 」フィールドの値を設定することで、独自の色と太さを持つ実線の枠線を長方形に追加できます。塗りつぶし色のない枠線を作成するには、「 」ボタンを選択して色を透明に設定します。

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

曲線を描画する際は、「Advanced 」セクションの「Antialiasing 」を有効にすることで、図形の見た目を改善できます。

RectangleShape

RectangleShape 長方形の各角を個別に変更したり、破線の枠線を使用したりしたい場合は、「Components 」> Qt Quick Shapes Design Helpers にある「Rectangle 」コンポーネントの代わりに、Default Components >Basic にある「 」コンポーネントのインスタンスを作成してください。

「Corner Radiuses 」セクションのプロパティの値を設定することで、各角を個別に描画できます。「Corner Bevel 」セクションの値と半径の値を組み合わせて使用することで、角が切り取られた形状を作成できます。

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

「Stroke Details 」セクションでは、境界線のモード、線のスタイル、および破線や点線のダッシュパターンを指定できます。

EllipseShape

EllipseShape 完全な楕円、円弧、または塗りつぶされた円グラフのスライスを追加するには、Components > 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 を設定します。

RegularPolygonShape

正多角形は、2D 多角形のストローク、塗りつぶし、またはストロークと塗りつぶしの組み合わせとして表現できます。Stroke Details を設定して、輪郭の外観を変更します。

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

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

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

StarShape

星形は、星形のストローク、塗りつぶし、またはストロークと塗りつぶしの組み合わせにすることができます。Stroke Details を設定して、輪郭の外観を変更します。

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

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

ストローク付きの星を作成するには、「Side count 」を3～100の間で設定し、「Stroke width 」を0より大きい値に設定します。

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

図形コンポーネントの概要

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

アイコン	名前	場所	MCU 対応状況	用途
	EllipseShape	楕円、円弧、または円グラフのスライスを描画できるシェイプコンポーネントです。	いいえ
	Rectangle	デフォルトのコンポーネント - 基本	はい	単色または線形グラデーションで塗りつぶされ、オプションで境界線を持つ長方形です。radius プロパティを使用すると、円を描くことができます。
	RectangleShape	Qt Quick 図形のデザインヘルパー	いいえ	単色または線形、円錐形、放射状のグラデーションで塗りつぶされ、各角を個別に形状設定できる拡張矩形です。
	RegularPolygonShape	Qt Quick 図形デザインヘルパー	いいえ	塗りつぶされた正多角形で、オプションで枠線を設定できます。
	StarShape	Qt Quick 図形デザインヘルパー	いいえ	塗りつぶされた星形の多角形で、オプションで枠線を付けることができます。