Vectornator、線のスタイルを指定 〜 スタイルタブその②。

基本パネル。

一、カラープレビュー

二、スポイト

三、hex(16進数)コード

四、スワップ（塗りと線の色を反転)

五、ON/OFF

基本パネルについては塗りつぶしのものと同じように見えますが、少し挙動が変わってくる部分もあります。その辺を中心に紹介していきたいと思います。

「塗りつぶし」に関する記事はこちら⬇︎。

• Vectornator、塗りつぶし設定 〜 スタイルタブその①。
  

  2020.04.10
  〽️ 基本の「塗り」をマスターしよう。

現在ピックしている色が表示されます。カラープレビューの部分をタップすると、「塗りつぶし」の場合と同様、カラーピッカーが開きます。

またまたリンク。カラーピッカーの詳しい使い方についてはこちら⬇︎で紹介しているので気になる方はご参考ください。

• Vectornator、カラーピッカーで色を指定。
  

  2020.03.12
  〽️ 色指定その１。

ただし「線」のカラーピッカーでは、グラデーションを選択することはできません。 オブジェクトをアウトライン化させて強引に行う方法もありますが・・それはまた次の機会に。

「塗りつぶし」のスポイト機能は他のオブジェクトからの「色」だけを吸い上げるものでした。しかし「線」のスポイトは色をはじめ後述するストロークの幅、破線の状態など全てのプロパティを吸い上げることができます。

上のオブジェクトは全くのノーマルな線、下はさまざまなプロパティを指定したド派手なものです。

上の素朴なオブジェクトを選択、スポイトアイコンをタップしてONにします。

この状態で下のオブジェクトをタップすると全てのプロパティが移植され、素朴だった線が見る影もなくなってしまいました。

これは「塗り」の場合と同じですね。
hex（16進数）での色指定はカラーピッカーを開かなくてもここから行うことができます。
タップするとキーボードが表示されるので、値を入力して「↩︎」で決定。

このスワップ機能も「塗りつぶし」の記事にて紹介したように、「塗り」と「線」の色を反転させることができます。

「線」の表示/非表示を切り替えます。

ストロークの幅。

線幅を指定します。

スライダーをタップするとテンキー入力も可能に成増。

ところでスライダーを使っての指定範囲は0.1〜300ptとなっていますが、テンキー入力で行うとそれ以上の値も指定することができました。 ただしそんな大きな値を指定すると上の画像のようにとんでもないことになってしまいます。

先端形状。

「線」の端部を矢印などの形に変えることのできる機能です。タップしてみましょう。

先端形状の一覧が表示されました。
左側が始点、右側が終点のものですね。1番上の形が「ノーマル」と成増。好きなものを選んでタップすると形状を指定することができます。

一覧タブのヘッダ部分にある「Swap」をタップすると、始点と終点に指定した形状が入れ替わります。

「先端形状」はストロークの幅に比例して拡大/縮小します。
極端に線幅を大きくすると「先端形状」がオブジェクトを飲み込んでしまう事になるためか、無効になってしまいます。

破線。

破線とは、線に一定間隔の隙間を配置したものです。
厳密なことを言うと、「点」の集まりである点線とは区別されます。

破線自体の長さと、隙間の長さをローテーションコントローラー（命名：ふ）で指定します。破線の指定はON/OFFスイッチがあるわけではなく、「隙間を0以上の値にする」事でオブジェクトに適用されます。

このローテーションコントローラー（命名：ふ）、見慣れないUI部品ですね。ダイヤルのようにPencilの先でグリグリしてみたのですが、あまりいうことを聞いてくれません‥何かコツがあるのでしょうか。

ここは素直にコントローラーをタップしてテンキー入力。

角丸長方形に破線30pt、隙間20ptで指定してみました。
破線がちゃんとパスに沿って曲がってくれていますね。

破線が２つ？

もうお気づきだと思いますが、「破線」と「隙間」のコントローラーはそれぞれ２つずつ存在していて、Vectornatorの線指定では、破線が2段階で設定できます。

これはどういうことなのでしょう。

2つのdash（破線）を組みあわせて、１点鎖線のような表現もできるということです。

値を入力して調べてみたのですが、描画の順序としては、

↑これが繰り返されるみたいですね。

線の端部と角の形状。

線端の状態と、線が結合したときの角の状態を指定します。

先程の「先端形状」とは別物です。

Vectornator英語版では「Line Cap」と表現されていますが、言葉通り線の端部に「ふた」をするかどうかを指定する機能ですね。

タイプはバット（キャップなし）、ベベル（丸型キャップ）、プロジェクティング（角ばったキャップ）の3通りから指定することができます。

「先端形状」が線の端部を変形させたのに対し、Line Capは現状の線端に「ふた」を被せるので、見た目の長さはもとのオブジェクトよりも大きく成増。「ふた」のサイズはストローク幅の1/2です。

試しに線幅20ptのセグメントにベベルcapをつけました。 つける前とあとでは、少し全長が大きくなったのがわかります。

さらにベベルキャップを被せた方の線分をアレンジタブで「width : 0」にしても、capの部分は消えません。線幅と同じ直径２０ptの「点」になりましたね。

ところで。

この「点」を前章の「破線」の部品として使ってみます。

破線の長さを「0」にする事で、完全な「点線」を描画することができました。
小ワザとして覚えておいてもいいかもです。

「角の形状」とは、線同士が結合してできる「角」の処理をどうするかを指定します。

タイプはマイター（鋭角）、ラウンド（丸型）、ベベル（斜面）の３つがあります。

アウトライン化したテキストを使ってそれぞれを比較してみます。
まづはマイター（鋭角）結合。ちょっとトゲトゲしいですね 💧

ラウンド（丸型）結合。やわらかな雰囲気になりました。

ベベル（斜面）結合にすると、うーん‥　板チョコと言うか、彫刻のように成増ね。

「線」だけでお腹いっぱい。

Vectornator 使い方。今回は「線」のカスタマイズについて紹介しました。
前回の記事で「１ページ内に多くの内容を詰め込みすぎないようにする」と言っておきながら、長々とした記事になってしまってすいません。

改めてVectarnatorの機能の豊富さに気付かされた「ふ」なのでした。