うるおいらんど

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

【Swift】簡易ペイントを作成してみた。

魚ライン
魚ライン

とりあえず絵が描けるようになったので、コードをメモしておきます。結構時間かかってしまいました。

 

キャンバスを作成する

まずは絵を描くキャンバスを作成します。

このUIImageViewの上に絵を描いていきます。

 

タッチイベントを作成する

画面がタッチされたときのアクションをかいていきます。

まずは指が触れたときに呼び出されるメソッドから。

Swift2.0ではtouchesがSet<UITouch>になっています。

3行目でタッチ時のイベントを取得します。

4行目で現在の座標を取得します。

bezierPathは曲線を扱うためのやつなんだとか。

線の太さを設定して、始点を現在の位置に設定しています。

 

次にドラッグ中のイベントです

 

最初にもしもタッチ開始時にパスを初期化していない場合は処理を終了します。

そのあと現在の座標を取得して、線を引いていきます。 drawLineメソッドは後述します。

 

そして指を離したときのイベントです。

途中までは先ほどと同じです。

最後にlastDrawImageにこれまで描いた絵を保存します。

これまで描いた絵を保存しておかないと黒い点がついてくるというよくわからないアプリに・・・

 

最後に描画時の処理です。

 

まずUIGraphicsBeginImageContextで非表示の描画領域を生成します。ここに描画してから画面に表示させます。

これまでに描いた絵があれば描画します。

線の色を決めて、線を描きます。

そしてUIImageViewのcanvasに画像を写します。

最後に描画を終了する文をかいて終わりです。

 

ひっかかったところ

タッチした座標を取得するときに、let touch = touches.anyObject() as UITouchとかいてもエラーが出るし、let touch = UITouch()とかいても取得できない。後者は当たり前なんですけども。。。

touchesはanyObjectじゃないよーということですね。バージョンの違いでエラーが出てしまいました。

touches.first!で座標を取得することができました。

ここまでたどり着くのにそこそこかかってしまった・・・

 

ちなみに.lineCapStyle = kCGLineCapRoundでエラーが出る原因もわからずとりあえず放置しています。バージョンが違うのかと思いきやそうでもなさそう。原因不明です。

 

あくまでも簡易・・・

undoボタンやredoボタンもなしで削除もできないという状態です。なのでただ線が描ける!というだけです。

これから様々な機能をつけていこうと思います。

今回は全体コードは割愛させていただきます。

 

参考サイト

[iOSアプリ開発] タッチでお絵かきしてみる をSwift化

[iOSアプリ開発] タッチでお絵かきしてみる

[Swift] 画像をドラッグさせる

 

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

Swiftの記事一覧を見る

コメント

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

コメントを残す

コメント時の注意

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

魚ライン 魚ライン