Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
33
Help us understand the problem. What is going on with this article?
@shu223

東京五輪エンブレム for iOS

More than 5 years have passed since last update.

東京オリンピックのエンブレム(ロゴ)を Processing や JS で実装してオープンソースに、という記事を見かけて、

確かに、このデザインはコードで再現しやすいし、円・矩形・弧・塗りつぶしといったパス描画の基本要素が揃っていて、描画APIの練習には最適な題材だなーと。

そんなわけで、iOS 用に Swift で描いてみました。

コード

TOEView.swift
class TOEView: UIView {

    var l: CGFloat!
    var r: CGFloat!

    override func awakeFromNib() {
        super.awakeFromNib()

        l = frame.size.width / 3
        r = sqrt(1.5 * 1.5 + 0.5 * 0.5) * l
    }

    override func drawRect(rect: CGRect) {

        self.drawYellowArc()
        self.drawBlackRect()
        self.drawRedOval()
        self.drawGreyArc()
    }

    private func drawYellowArc() {
        let path = UIBezierPath(
            arcCenter: CGPointMake(l * 1.5, l * 1.5),
            radius: r,
            startAngle: CGFloat(-M_PI_2),
            endAngle: CGFloat(-M_PI),
            clockwise: false)
        path.addLineToPoint(CGPointZero)

        UIColor(red: 1.0, green: 0.84, blue: 0.0, alpha: 1.0).setFill()
        path.fill()
    }

    private func drawBlackRect() {

        let rect = CGRectMake(l, 0, l, l * 3)
        let path = UIBezierPath(rect: rect)

        UIColor.blackColor().setFill()
        path.fill()
    }

    private func drawRedOval() {

        let rect = CGRectMake(l * 2, 0, l, l)
        let path = UIBezierPath(ovalInRect: rect)

        UIColor.redColor().setFill()
        path.fill()
    }

    private func drawGreyArc() {

        let path = UIBezierPath(
            arcCenter: CGPointMake(l * 1.5, l * 1.5),
            radius: r,
            startAngle: 0,
            endAngle: CGFloat(M_PI_2),
            clockwise: true)
        path.addLineToPoint(CGPointMake(l * 3, l * 3))

        UIColor(white: 0.5, alpha: 1.0).setFill()
        path.fill()
    }
}

解説

パッと見、長いですが、

  • 黄色い円弧を描画
  • 黒い長方形を描画
  • 赤い円を描画
  • グレーの円弧を描画

の4ステップで、各ステップも

  • パス(UIBezierPath)生成
  • 色をセット setFill()
  • 塗りつぶし fill()

をやってるだけなので、とてもシンプルです。

元の Processing のコードでは「黄色い部分とグレーの部分を長方形として描画して、真ん中に白い円を描く」というロジックでしたが、こっちの方が直感的かなーという理由で各色オブジェクトを描画していくようにしました。

あと、正方形しばりは IB 上で Auto Layout でやってます。

実行結果

tokyo-olympic.png

(2015.8.7 追記: 実物を見たら色が全然違ったので修正しました!)

for watchOS

ちなみに UIBezierPath は watchOS 2 でも使えるので、Apple Watch 上でも東京五輪ロゴを楽しめます。ただし UIView は使えず、直接 WKInterfaceObject に描画できないので、いったん UIImage として書き出す、ということをやります。詳細は以前書いたこちらの記事とスライドをご参照ください。

ソースコードのダウンロード

GitHub に置いてあります。Swift的にいけてない部分のご指摘、パラリンピックサポート等、プルリク大歓迎です!

(2015.8.6 追記: 記事をアップして1時間もしないうちにパラリンピックサポートのプルリクいただきました!詳細はコメント欄にて。)

33
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
shu223
フリーランスiOSエンジニア 著書:『iOS×BLE Core Bluetooth プログラミング』『Metal入門』『実践ARKit』『Depth in Depth』『iOSアプリ開発 達人のレシピ100』他 GitHubの累計スター数24,000超
engineerlife
技術力をベースに人生を謳歌する人たちのコミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
33
Help us understand the problem. What is going on with this article?