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

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

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

今回は楕円、円弧を見てみましょう。

楕円と円弧と言いましたが、円を描く時も同様に適用します。

厳密に言えば完全な円ではありません。しかし、一般的なモニターで見たときほとんど区別がつかないので、円とします​​。 

前回の投稿でご紹介したGraphicPathの属性は、実際はSVGの仕様に基づいて作られました。

http://www.w3.org/TR/SVG/paths.html

内容を見ると、ほぼ似ていると思ってもよいでしょう。

SVGソースをそのまま持ってくれば同じように実装されますが、若干の違いがあったりします。

A（elliptical arg）のargumentは次の通りです。

nRx nRy nAngle bLargearcflag bSweepflag nX nY

まず、nRx、nRyはX軸半径、Y軸半径に対応しています。

nRxとnRyの値が同じであれば、楕円ではなく円になります。

nAngleは回転角度です。nAngleを変化させると、その角度に応じて楕円の方向が変わります。

下の図は、M 300.0 350.0 A 150 150 0 1 1 50 50に設定した状態です。

X、Y軸半径が同じであるため円形です。

円弧の終点を開始点に近づけたければ、円弧の終点を表すargumentであるnX nYを0に近づけてください。

ただし0にするとだめで、2以上の値を指定して、最後にpathを終えるzを追加すれば、円弧の開始点と終点の間の小さな穴を埋めることができます。

次は、M 300.0 350.0 A 100 150 0 1 1 50 50に設定した状態です。

X軸半径がY軸半径よりも小さいので、Y軸方向にとがった卵形が作成されました。

次の図は、M 300.0 350.0 A 100 150 45 1 1 50 50に設定した状態です。

回転角度を45度に設定したため、図のような形になりました。

動的に応用すれば、アニメーション効果も出せるでしょう。

しかし、アニメーションは別のコンポーネントを提供するので、あえて使用する必要はありません。

bLargearcflagとbSweepflagは言葉で説明するとややこしいですが、W3C仕様に記載されている下図を見るとわかりやすいです。

楕円はここまでして、次の時間には、カーブについて説明します。

UXStudioで編集するときに、スクリプトやインライン属性に挿入することができ、下の図のように編集ダイアログボックスで項目を追加することもできます。