図形の作成

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

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

「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 図形デザインヘルパー	いいえ	塗りつぶされた星形の多角形で、境界線は任意です。