うるおいらんど

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

【Swift 3】CALayerを用いて図形を移動・拡大縮小してみた【CALayer】

魚ライン
魚ライン

どんも。Reoです。

CALayerを使って丸や四角などの図形を生成し、移動・拡大縮小するコードをSwiftで書いたので紹介していきます。

これまでUIViewを作成してどうやらこうやらしていたのですが、その代わりにCALayerを使ってみると、とにかく便利で使えるやつだということに気がつきました。メモリ的にもありがたい・・・

 

CALayerを用いて図形を描こう

まずはCALayerを使って図形を描いてみます。

線を引いたり、丸を描いたり、四角を描いたりは簡単にできます。

図形を描く場合は、CAShapeLayerというCALayerを用います。

①丸を描く

 

②横線を描く

この線はaddLineで追加していけば好きな図形を自由に描くことができます。

上記のような線を引く場合は、始点・終点のみを結びますが、もう1つaddLineでポイントを作ると、3つの点を結んだ塗りの部分が発生します。(三角形になる)

③四角を描く

 

これらを実行すると以下のようになっているはずです。



ボタンをタップすると図形が生成されるようにするため、ボタンを設置しておきます。

 

ボタンを押したら図形を描く処理はとりあえず置いておきます。

 

タッチしたCALayerを取得して、そのCALayerを移動させよう

作成された図形レイヤーを移動できるようにしていきます。

まずはタッチイベントのコードを書いていきます。

先に選択したCALayerをいれておく箱と、直前にタッチされた場所を入れて置く変数を用意しておきます。

 

タッチをした時

タッチをした場所にあるレイヤーを取得するhitLayer(touch:)を作成します。

座標を変換してレイヤーを返却しています。

returnのhitTest部分で座標上にあるレイヤーを取得しています。

 

選択されたレイヤーをselectLayerに入れている部分は

タッチした座標に、view上でのせているレイヤーがない場合はselectLayerにnilをいれ、CALayerがあった場合にはそのレイヤーをそのレイヤーを格納しています。

 

タッチが動いた時

 

タッチが終わった時・キャンセルされた時

 

タッチが終わった時とキャンセルされた時は選択時に表示されていた枠線を消す処理をしています。

 

ここまででとりあえずCALayerを動かすことができるようになります。

しかしどうやらhitTestで取得できるのはCALayerのみで、CAShapeLayerは取得できない(なんか処理を追加しないとだめっぽい)ので、とりあえずCALayerの上にさらにCAShapeLayerをのせて表示させるようにしました。

 

CALayerのサブクラスを作ろう

なんか適当にサブクラス作って扱いやすくしておきます。

File > New > Fileより



Source > Cocoa Touch Class



 

Subclass of をCALayerにして、適当に名前をつけて作成



 

この中に先ほどの図形を描く処理を関数で作っておきます。

 

CALayerの上に、そのCALayerのサイズと同じサイズのCAShapeLayerをのせています。

 

ボタンをタップされたときの処理を追加しよう

先ほど作成したボタンのアクション内に、丸と四角がそれぞれ書かれたレイヤーをviewのレイヤーに追加する処理を書きます。

 

ボタンを押したら図形が生成されるようになりました。

ここで生成されたものは自由に動かせるはずです。



これだけでもめちゃくちゃ使い道ありそうです。

 

図形を拡大縮小しよう

拡大縮小ができるようにしていきます。

まずはUIGestureRecognizerDelegateを書いておきます

 

ピンチイン・ピンチアウトを取得するジェスチャーを作成します。

これで2本指でキュッキュするとイベントがとれます。

ピンチインアウトをした際のアクションを追加します。

 

現在のスケールとピンチ後のスケールをいれておく変数を用意しておきます。

 

effectiveScaleの初期値は0にしておきます

 

ピンチが始まった時に、現在のスケールをbeginGestureScaleにいれておきます

この判定はおそらくピンチとスワイプとなんやらと色々ある中でどのジェスチャーかを判定するもの、であってると思います。(ちょっと自信ない)

 

先ほどのピンチインアウトした時に呼ばれるアクションの中にレイヤーを変形するコードをかきます。

 

選択されているやつだけを拡大縮小しています。

これで拡大縮小ができるようになります。



 

とりあえずレイヤーを拡大しているだけなので、拡大しても線の太さを変えないだとかをしようと思ったらもう少し考えないとダメですね。

 

それでは最後に全体コードのっけて終わりにします。

 

全体コード

ViewController.swift

 

MyShapeLayer.swift

 

 

ようやっと画面キャプチャでgifを作成すると良いことに気づきました。

やっぱり動きがあるといいですなぁ。

それではでは。

 

参考記事

[iOS]図形のドラッグ – nackpan Blog
ピンチインアウトで縮小拡大する

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

Swiftの記事一覧を見る

コメント

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

コメントを残す

コメント時の注意

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

魚ライン 魚ライン