絵を書いてみましょう - GraphicPath (3)

※本記事は以下のサイトから転載し、翻訳をしたものになります(一部加筆修正しています)。

http://cafe.naver.com/xplatform101/32

 

これで最後のステップです。

GraphicPathを使用すると、ベクトルグラフィックスの利点である拡大と縮小が可能になります。

企業用のアプリケーションを作りながら、一見絵を描くツールは必要なさそうですが、意外に多くの部分でこれが必要となります。

組織図やダイアグラムを描くときなど、描画ツールなしで描こうとすると大変だとおもいます。

 

カーブは3次ベジェ曲線(Cubic Bezier Curve)形式に従います。

ベジェ曲線は不規則な曲線を表現するために、フランスの数学者、ベジェ(Bezier P.)が数学的に作成した曲線だそうです。

 

言葉であれこれ説明するよりも、この絵を見るのがわかりやすいでしょう。

 

f:id:xplatform:20130308154424p:plain http://www.itk.ilstu.edu/faculty/javila/svg/svg_drawing1/cubic_curve.htm

 

各点とその点のコントロールポイントが同じになれば、コントロールできるポイントがありません。

例えば、M 100 100 c 0 0 0 0 100 100のようにデータが定義されている場合

100,100座標点で200,200座標点間に直線が引かれます。

データが定義されてなければ、各コントロールポイントを活用して、描きたい曲線を描くことができます。

 

GraphicPathの各属性は、dataプロパティを直接指定することもできますが、UXStudioで編集も可能です(しかし、直接編集するのは少し難しいでしょう)。

 

設定されたGraphicPath領域内で右クリックすると、GraphicPath Editの項目が表示されますが、指定された値をGUI環境で変更できる編集状態になります。

 

f:id:xplatform:20130308154449p:plain

 

f:id:xplatform:20130308154529p:plain

 

コントロールポイントの位置に応じて、必要な曲線を作成することができます。

塗りつぶしと同時に動作させると立体的な面を作成することもできます。

作業を終えると、右クリックして、End Editを選択します。

 

f:id:xplatform:20130308154548p:plain

 

 

ちなみにGraphicPathは、ツールバー上ではその他のアイコンで表示されています。

変更したい場合は、プロジェクトエクスプローラでTypeDefinitionをダブルクリックすれば編集可能ダイアログボックスが表示されます。

そこでGraphicPathを選択してImageカラムの値を変更します。

 

f:id:xplatform:20130308154604p:plain

 

よく使う機能ではありませんが、このように変更が可能です。

他のアイコンも気に入らない場合は自由に変えることができます。

ただし初期化機能などはありませんのでご注意くださいね。