うるおいらんど

アプリ開発やサイト制作のメモとか。

【Swift3】UIBezierPathで卵型を書こう【CAShapeLayer】

魚ライン
魚ライン

どもも。CAShapeLayerで図形を描こうという記事です。

以前、【Swift 3】CALayerを用いて図形を移動・拡大縮小してみた【CALayer】という記事を書いたのですが、その時は直線と丸と四角といった図形の書き方をちょろっと紹介しました。

 

今回はCAShapeLayerにUIBezierPathを用いて卵型を描いていこうと思います。

曲線を扱うのは初めてだったので、なかなか手こずりました。

CALayerとCAShapeLayerのお話は以前の記事を読んでくださいな〜。

 

卵型を書こう!

まずは卵型を描く部分の全体を見せてから部分の説明をしていこうと思います。

 

実行結果



 

view上にCAShapeLayerをのせて卵を描いています。

線の太さが1.0だと黄色の輪郭線が全然見えないですね(´・ω・`)

 

addCurveとaddQuadCurve

今回の肝はこの2つ。

実際に卵を書いている部分はこの部分

 

全部で5つの座標を使っているのですが、実際にはposAとposBを2回に分けて結んでるだけです。



面倒なのがコントロールポイントというやつです。

addCurveとaddQuadCurveの違いは見てわかるようにコントロールポイントが1つか2つかです。

 

addCurve

①のaddCurveはコントロールポイントが2つあります。



始点は1つ前の終点で、今回はposAが始点になります。

始点側のcontrolPointがcontrolPoint1

終点側(to)のcontrolPointがcontrolPoint2

となります。

今回はつなぎ目が滑らかになるようにそれぞれ外側に配置し、controlAとcontrolBは卵の真ん中を軸とした線対称の位置にしました。

 

addQuadCurve

addQuadCurveはコントロールポイントが1つになります。



 

こちらも始点は1つ前の終点になります。今回はposBが始点になります。

to:が行き先のposA

controlPointが卵の中心のy軸上の少し離れたところにしています。

y座標を変更すれば卵の頭のカーブのきつさが変更されます。

 

最後にline.close()で線を閉じておきます。

コントロールポイントの位置がなかなか難しくて思った形にするのが大変です。

 

別の方法

addQuadCurveだけで乗り切ろうとしたらこんな感じになりました。

 

実行結果はこんな感じ



 

ちょっとごちゃごちゃして見づらいですが、3点で結んでいます。

 

作りたい形に合わせて上手いこと使い分けたいですね。

UIImageで画像を用意するよりCALayerを用いるほうが処理が軽くなる(はず)なので簡単な図形は作れるようになりたいです。

 

画質がちょっと悪くて申し訳ないです(´・ω・`)

それではでは

 

参考記事

Drawing Images With UIBezierPath

CorelDRAW基础教程:贝塞尔工具应用详解

 

流石に中国語は読めないです。画像を参考にさせていただきました。(google画像検索より)

魚ライン
モッピー!お金がたまるポイントサイト
魚ライン

Swiftの記事一覧を見る

コメント

コメントは認証制です。詳しくは下記の注意をお読みください。

コメントを残す

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。

魚ライン 魚ライン