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

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

Clock Icon2016.09.24

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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

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

IMG_0002

IMG_0003

Swift Playgroundsとは?

こちらをご覧ください。

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

Shapesとは

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

IMG_0036
IMG_0035
1acoc5
1acofj

Shapes解説

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

Canvas

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

IMG_0036

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

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

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

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

Create

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

IMG_0035

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

1. Create a circle

Circle

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

2. Create a Rectangle

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

// 線を描画するための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

// 文字を描画するための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

// 画像を描画するための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

Pattern

// 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による描画などに置き換わりますが基本は同じなので応用させることでより良い表現ができるようになりそうです。:)

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.