東京オリンピックのエンブレム（ロゴ）を 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 でやってます。
実行結果
（2015.8.7 追記： 実物を見たら色が全然違ったので修正しました！）
for watchOS
ちなみに UIBezierPath は watchOS 2 でも使えるので、Apple Watch 上でも東京五輪ロゴを楽しめます。ただし UIView は使えず、直接 WKInterfaceObject に描画できないので、いったん UIImage として書き出す、ということをやります。詳細は以前書いたこちらの記事とスライドをご参照ください。
ソースコードのダウンロード
GitHub に置いてあります。Swift的にいけてない部分のご指摘、パラリンピックサポート等、プルリク大歓迎です！
（2015.8.6 追記： 記事をアップして1時間もしないうちにパラリンピックサポートのプルリクいただきました！詳細はコメント欄にて。）