【Swift】UIBezierPathで点線が描けるsetLineDashで遊んでみた

UIBezierPathで点線を引くことができるsetLineDashで遊んでみました。

まずはどのようにコードを書くかですが

// var bezierPath = UIBezierPathを用意しておく
let dashes:[CGFloat] = [50,20]
bezierPath.setLineDash(dashes, count: dashes.count, phase: 0)

これだけでOKです

線を描くところはこちらで(→【Swift】簡易ペイントを作成してみた。)

 

まず適当にCGFloatの配列を用意します。この中身をいじることで簡単に色々な点線を書けます。

countには配列の個数を入れてください。(配列より大きい数や小さい数でもエラーはでませんが、配列より大きいと画面がチカチカして、小さい数だと配列のその数までを繰り返します。)

phaseは点線の開始位置ですが、変えても変化がよくわからないです。。。

 

なのでとりあえず配列の中をいじってみました。

 

dashes = [50,20]のとき

IMG_6888

まずは基本的なやつ。

線50 空白20を繰り返します。

 

dashes = [50,20,30,10]のとき

IMG_6886

 

線50 空白20 線30 空白10を繰り返します

 

dashes = [50,20,30]のとき

次に奇数の時です

IMG_6887

 

線50  空白20 線30 (空白50 線20 空白30) を繰り返していきます

 

奇数の時は線と空白が反対になるというところがポイント。

 

lineCapStyleもあわせて変えるとまた違った印象に

 

bezierPath.lineCapStyle = .Round

 

IMG_6889

 

ドットで書くにはlineCapStyleを.Roundにしてから

dashesを[0,10]とかにしましょう。線の部分を0にしてください。

IMG_6890

 

実際のコードでは線の太さにあわせて間隔を決めなければ点線にならないので注意です。

var strokeWidth = 5.0 //可変
bezierPath.lineCapStyle = .Round
let dashes:[CGFloat] = [strokeWidth * 0,strokeWidth * 2]
bezierPath.setLineDash(dashes, count: dashes.count, phase: 0)

 

 

お絵描き画面が一応完成したのでひと段落です。後はサイトとの連携とメモリ管理・・・。とりあえず一息ついてサイトとの連携を明日までにしたいです。頑張ります。

 

Comments...

2018/05/23 03:05

とても参考なりました。
tabelViewのcellにこちらの線を取り入れたいのですがtableViewにどう結びつければ分からないのでもしよろしければ教えて頂けないでしょうか?

アバター
from.西川 PC 継延
    2018/05/23 06:05

    こんにちは。コメントありがとうございます。

    是非とも今すぐ実証して回答したいところなのですが、つい先ほどMacを水没させてしまいすぐに実証することが出来ません。申し訳ございません。

    方法としては、おそらく

    ・CAShapeLayerを用意する

    ・CAShapeLayerのpathに点線にしたBezierPathを設定する

    ・tableViewのコンテンツビュー(もしくはその上の新規UIView等)のレイヤーにCAShapeLayerをaddSublayerする。

    といった方法になるのではと思います。

    以下のリンクにCAShapeLayerで図形を描く方法をいくつか描いているのですが、例えば横線ならば、リンク先の②横線を描くの「line」にsetLineDashを適用すれば点線の横線を引いて設置することができると思います。

    https://uruly.xyz/【swift-3】calayerを用いて図形を移動・拡大縮小してみた/

    実証できないのが本当に申し訳ないのですが参考になれば幸いです。

    アバター
    from.Reo(管理人)
コメントは認証制です。詳しくは下記の注意をお読みください。お気軽にコメントお願いします!

Write a Comment

コメント時の注意

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

Related Memo...

記事を書くほどでもないけれどメモっておきたいこと

テスト投稿。

例えばiphone7 の画面サイズ

750 × 1334
半分375 × 667

iOS
more