[Swift Playgrounds] – 図形を描画しよう – Shapes編

おばんです、Facebookの二年前の投稿を見せてくる機能で歳をとったなあとか色々と考えてしまってちょっとテンションの下がる田中です。

今回はSwift Playgroundsの中の『Shapes』というコンテンツの紹介です。

Swift Playgroundsとは？

こちらをご覧ください。

[Swift Playgrounds] - Swift Playgroundsことはじめ - 全体紹介編](https://dev.classmethod.jp/etc/swift-playgrounds-introduction/)

Shapesとは

ShapesとはSwift Playgroundsに入っているコンテンツの一つで、図形の描画・タッチ・アニメーションに関するサンプルが紹介されているものです。

Shapes解説

Shapesの描画に関して説明している最初の二つのお題を解説していきます。

Canvas

ここでは基本となる図形の描画をします。
取り扱う図形はCircle(円)とRectangle(矩形)です。

すでに記載済みのコードがあるので、Run My Codeボタンで実行するとこのプログラムの動きを確認することができます。
描画された図形はドラッグすることができるので、自由に動かしてみてください。

内容をコードにコメントアウトをつけて解説します。

// circle定数を定義し、それにCircleクラスのインスタンスを初期化して代入
let circle = Circle()
// circle定数のdraggableプロパティにtrueをセットし、ドラッグ可能な図形とする
circle.draggable = true

Rectangleに関しても同様の説明となります。

Create

ここでは前章のCanvasで取り扱った図形描画の発展的な内容を説明します。
取り扱うクラスにどんな設定をできるかについてもわかるはずです。
内容についてはコードにコメントアウトをつけて解説します。

すでに記載済みのコードがあるので、Run My Codeボタンで実行するとこのプログラムの動きを確認することができます。

1. Create a circle

// 円を描画するためのCircleクラスに半径を設定して初期化
let circle = Circle(radius: 3)
// circleの中心y座標を設定
// 一枚のCanvasに複数の図形を描画するため、重ならないようにずらす
circle.center.y += 28

2. Create a Rectangle

// 矩形を描画するためのRectangleクラスに横幅10、高さ5、角丸半径0.75を設定して初期化
let rectangle = Rectangle(width: 10, height: 5, cornerRadius: 0.75)
// rectangleの色を紫に設定
rectangle.color = .purple
// rectangleの中心y座標を設定
// 一枚のCanvasに複数の図形を描画するため、重ならないようにずらす
rectangle.center.y += 18

3. Create a line

// 線を描画するためのLineクラスの始点、終点、太さを設定して初期化
let line = Line(start: Point(x: -10, y: 9)), end: Point(x: 10, y: 9), thickness: 0.5)
// lineの中心y座標を設定
// 一枚のCanvasに複数の図形を描画するため、重ならないようにずらす
line.center.y -= 2
// lineに回転を設定
line.rotation = 170 * (3.14159/180)
// lineの色を黄色に設定
line.color = .yellow

4. Create text

// 文字を描画するためのTextクラスの表示する文字列、フォントサイズ、フォント、色を設定して初期化
let text = Text(string: "Hello world!", fontSize: 32.0, fontName: "Future", color: .red)
// textの中心y座標を設定
// 一枚のCanvasに複数の図形を描画するため、重ならないようにずらす
text.center.y -= 2

5. Create an image

// 画像を描画するためのImageクラスの表示する画像、色を設定して初期化
let image = Image(name: "SwiftBird", tint: .green)
// imageの幅と高さを半分のサイズに指定
image.size.width *= 0.5
image.size.height *= 0.5
// imageの中心y座標を設定
// 一枚のCanvasに複数の図形を描画するため、重ならないようにずらす
image.center.y -= 11

6. Create a pattern with rectangles

// Rectangleの数
let numRectangles = 4
// パターン描画のためのx軸の移動差分
var xOffset = Double((numRectangles/2) * (-1))
// パターン描画のためのy軸の移動差分
var yOffset = -26.0
// パターン描画のための彩度の差分値
let saturationEnd = 0.911
let saturationStart = 0.1
let saturationStride = (saturationEnd - saturationStart)/Double(numRectangles)

// numRectanglesの数だけ矩形を描画するための繰り返し処理
for i in 1...numRectangles {
    // 矩形を描画するためのRectangleクラスに横幅10、高さ5、角丸半径0.75を設定して初期化
    let rectangle = Rectangle(width: 10, height: 5, cornerRadius: 0.75)

    // 色の設定
    // set the color.
    // 彩度の値を計算
    let saturation = saturationEnd - (Double(numRectangles - i) * saturationStride)
    // rectangleの色を設定。Colorには色相、彩度、輝度を設定
    rectangle.color = Color(hue: 0.079, saturation: saturation, brightness: 0.934)

    // Offsetを計算
    // calculate the offset.
    // パターン描画のためにrectangleの中心をずらす設定
    rectangle.center = Point(xOffset, yOffset)
    xOffset += 1
    yOffset += 1
}

まとめ

計算と計算結果を保持させておく変数の持ち方、for-inによる繰り返し処理で複数の図形に差分を加えて描画するなど、描画に関して必要な考え方についてまとまっている良い学習資料だと思います。
iOS開発においてはCircleやRectangleにあたる部分がUIView, CALayerによる描画などに置き換わりますが基本は同じなので応用させることでより良い表現ができるようになりそうです。:)