パラメータを指定して円を描く

　円のオブジェクトを作成する際に、あらかじめ属性を指定するという今回のアプローチに入る前に、前回試したプログラムを思い出しておきましょう。

　このようにして、いったんデフォルトの状態で作成した円オブジェクトcircleの属性を変更しました。実は円の場合、これらの属性のうち、最初に指定できるのは半径だけです。これはちょっと残念な気がしますが、Shapesテンプレートに含まれるCircleの仕様は、そうなっています。この仕様を拡張して、円オブジェクトの作成時にほかの属性を設定できるようにする方法もあるのですが、ちょっと高度な内容になります。今のところは、そのまま使うことにしましょう。

　とりあえず、半径を指定して円オブジェクトを作成するには、Circle()の()の中に、「radius:」というパラメータのラベルと、それに続けて半径の値を指定します。

　半径は浮動小数点のDouble型で指定することになっているので、「10.0」としています。これは、半径（の長さ）が10の円を描きます。IntからDoubleなら、自動的に変換されるので「10」と書いても同じことです。半径以外の属性はすべてデフォルトのままなので、色は青で位置は画面の中央になります。

円を描く際には、radiusというラベルのパラメータを指定することで、最初から半径を指定することができます。半径以外の属性はデフォルトのままです

　これだけではなにも面白くないので、半径を変えながらいくつかの円を描いてみましょう。同じ場所に半径だけ異なる円を描いても、いちばん大きな円だけしか見えなくなるので、少しずつ位置をずらすことにします。そのために、描くたびに円オブジェクトのcenter属性のy座標に異なる値を設定しています。これにより、少しずつ位置を上にずらしながら、半径の異なる3つの円を描きます。

　ここでは、あえて1つの変数circleに、異なる円のオブジェクトを順に代入しています。そのため、circleは定数のletではなく、変数のvarを使って定義しています。念のために結果を見ておきましょう。

半径を2.0、5.0、12.0と変化させながら3つの円を描いています。その際、2番めと3番めの円の中心のy座標を、それぞれ5.0と15.0に設定しています

　このようにすると、最初に作成したのとは異なる円オブジェクトを変数circleに代入した時点で、元の円オブジェクトにはアクセスできなくなってしまう点に注意してください。つまり古い円のことは忘れて、新しい円の属性だけを変更することになります。

　しかし、このようにいったん作成したオブジェクトにアクセスできなくなり、そのオブジェクトが宙ぶらりんの状態になってしまうのは、あまりよいことではありません。これについては今は詳しくは説明しませんが、新しい円オブジェクトは、そのために用意した新しい変数に代入すべきです。上の例を書き直すとしたら、以下のようにすればいいでしょう。

　画面に表示される結果としては、前の例と変わりません。

直線に設定可能な属性を試してみる

　次に、コンピューターグラフィックの中で、最も基本的な図形と言える直線を描いてみましょう。Shapesの環境では、Lineクラスとして描くことができます。直線にとって最も基本的な属性は、どこから直線を描き始めてどこで終わるのかを示す始点と終点の座標です。一般的なグラフィック環境では、少なくともその2つの座標を指定しないと直線は描けません。しかし円の例でも見たように、Shapesのグラフィック機能には、パラメータを何も指定しなくてもとりあえず描けるという特徴があります。直線でも試してみましょう。

　これだけで、やはりデフォルトの直線が描けました。面の中央に青い水平の直線が表示されたはずです。Shapesに含まれるソースコードを見てみると、デフォルトの直線の太さは0.5、始点と終点のx, y座標は、それぞれ(-10, 0)、(10, 0)となっています。これで、長さが20の水平線が描けるのです。

Shapesが提供するグラフィック環境では、何の属性も指定せずにデフォルトの直線を描くことができます。その結果は、短めの青い水平線となります

　直線に対して設定可能な属性のうち、直線そのものの外観に関するものを挙げてみましょう。始点を表すstart、終点のend、太さのthickness、塗りつぶしの色のcolor、縁の幅のborderWidth、縁の色を表すborderColor、といったものがあります。

　ここではいったんデフォルトで描いた直線の属性を変更する手法で、少しカラフルな直線を描いてみましょう。塗りつぶしや縁の色の指定には、Swift Playgroundsならではの直感的な方法を使っています。色の設定方法は前回を参照してください。

まずデフォルトのまま直線を描き、あとから始点のx座標、終点のy座標、太さ、色、縁の幅、縁の色の属性を順に設定しています

　ここで、円のところでは説明しなかった縁の色や幅の属性が登場しています。実は、これらは円でも設定可能なものでした。例は示しませんが、余裕のある人は試してみてください。

始点と終点をPointで指定して直線を描く

　さて今回の本題は、オブジェクトを作成する際に、デフォルトのままではなく、パラメータを指定して、最初から属性を設定して描くことでした。直線の場合には、ふたとおりの指定方法が用意されています。1つは始点と終点だけを指定するもの、もう1つは始点、終点に加えて太さを指定するものです。それぞれ、以下のような形になっています。

　ここでPointという新しい型が出てきました。これは、このShapesで定義されている座標点を表すクラスです。Pointにはx座標とy座標という2つの属性があります。クラスを作成する際の基本的な形は以下のようになっています。

　さすがに何も指定しないデフォルトのPointというものはありません。Pointオブジェクトを作成する際には、必ずx座標とy座標を指定する必要があります。直線を作成する際には、いったん始点と終点の座標点オブジェクトを作成してから、それらを代入した変数を指定してもいいのですが、1つの式でまとめて指定してもかまいません。その方式で適当な直線を描いてみましょう。

直線の場合、最初に描く際に始点と終点の座標、太さをパラメータとして指定することができます。始点と終点は座標を表すPointというオブジェクトで指定します

　式はちょっと煩雑になりますが、これで、直線の始点、終点、太さを同時に指定しています。もちろん、あとから必要に応じて色や、縁の太さ、縁の色も指定できます。

次回の予定

　次回は円、直線以外の図形も描いていきましょう。それと同時に、ループ機能を使って複数の図形を少しずつ変化させながら描く方法も示します。それでこそ、プログラムを使ってグラフィックを描く意味があるというものでしょう。