Vectornator、アレンジタブについて①。

サマリー。

こんにちは、「ふ」です。
Vectornator使い方、アレンジタブの内容を紹介していきます。
アレンジタブには、オブジェクトの移動などを含む「変形」に関する機能がまとめられています。早速見てみましょう。

アレンジタブを表示させるには、作業画面右上のインスペクターバーの左から２つ目をクリックしてください。

タブ内には次のような機能が用意されています。

① 移動

② 位置

③ 回転

④ サイズ

⑤ グループ

⑥ 反転

⑦ 順番

⑧ アラインメント

⑨ 分散

⑩ Transform

◼︎ 選択すると使える。

オブジェクトを選択していない状態だと、全てのボタンが半透明の状態で使えません。

オブジェクトを選択すると、利用できる機能のUIが色濃く表示されます。

アレンジタブを非表示にするには、右上のインスペクタータブのアレンジアイコンをもう一度タップするか、タブのヘッダ部分を画面右外側にスワイプします。

今回を含め何記事かに渡って、各機能について詳しく見ていきましょう。

移動。

「移動」は選択したオブジェクトをポイント/ピクセル単位で移動させることができます。

UIはカーソル状になっていて、押した方向にオブジェクトを移動させることができます。
角度は垂直/水平方向に加え、45°方向にも動かすことができます。

オブジェクトを大きく移動させる時は直接ドラッグするのが手っ取り早いのですが、正確に微調整したい時などにはこの機能が重宝されますね。

位置。

「位置」はオブジェクトの現在のx及びy方向の位置を表示/変更することができる機能です。

オブジェクトを移動・変形させると、数値もそれにしたがって表示されます。

◼︎ 単位の変更。

表示単位は変更することが可能です。メイン操作バー（←命名：「ふ」）の設定アイコンを押し、作業面（canvas）タブを表示。 その中にある「単位」のところに現在適用されているものが表示されているので、そこをタップしてください。

そうすると「サイズ」タブが開きます。この中から適用したい単位を選んでタップすると、アレンジタブの「位置」にも反映させることができます。

◼︎ 「位置」の基準。

「位置」はオブジェクトのどの部分を指しているのでしょうか。
基準となるのは「バウンディングボックス」の左上端です。

「位置」の原点（0,0）は、アートボードの左上端です。
そこから右に移動するにつれx値は増加し、下に移動するにつれy値が増加します。

特にy軸については、数学の授業に出てくるグラフとは方向が逆なので注意してください。

例えばオブジェクトをその場で回転させた時も「バウンディングボックスの左上端」は移動してしまうので、位置表示もそれに伴って変化します。

◼︎ 操作。

また「位置」の表示されている部分をタップするとテンキーが出現するので、直接数値を入力してオブジェクトを移動させることもできます。

数値を入力して「↩︎」で実行。キャンバス上で選択しているオブジェクトもそれに応じて移動しました。

テンキーを非表示にしたい時には画面上のそれ以外の場所をタップしてください。
これはテンキー入力のできる機能に共通する操作です。覚えておいてくださいね。

「位置」にはマイナスの値を入力することもできますが、その場合はアートボードからはみ出すことに成増ね。またプラスの値でもアートボードより大きな値を入力すると、やはり外側にはみ出してしまいます。

回転。

「回転」のUIはローテーションコントローラ（命名：ふ）になっています。

これをグリグリするとオブジェクトを回転させることができます。
いちど「つまみ（●）」をキャッチすれば、指先やペン先がUIの外側にはみ出してしまってもそのまま回せます。

オブジェクトを回転させると、回転前の状態を0°とした現在の角度が数値で表示されます。

◼︎ 数値入力。

またローテーションコントローラ（命名：ふ）をタップすると、テンキーが出現、数値入力も可能です。

90°や45°単位での回転であれば、シフト効果とバウンディングボックスを使ってキャンバス上で行うことも可能です。
しかしそれ意外の60°、72°などの角度を正確に取りたいこともあるでしょう。
その時にはこの数値入力が活躍します。

「回転」においてもマイナスの値を入力することができます。例えば-90°と入力して実行すると反時計方向に回転します。

この時のUIの角度表示は事実上の値、-90°なのでつまり、270°と表示されます。

あれ？

バウンディングボックスを使って回転させた場合、UIの角度表示はすぐには連動しません。あれ？

一度選択解除し、再度オブジェクトを選択すると反映されていました。2020.5月現在の状況です。
「不具合」というレベルでもないので、まあいいか。

サイズ。

「サイズ」はバウンディングボックスの大きさを表示/変更する機能です。

例えば同じ大きさの楕円形でも、角度をつけるとバウンディングボックスの形状も変わるので、サイズに表示される値も変化。

複数のオブジェクトを選択すると、選択したもの全てを囲むバウンディングボックスの大きさが表示されます。

単位は「位置」の時の手順と同様に選択することができます。ただしイラストファイル内での一括指定となるので、「位置」と「サイズ」の単位は統一されてしまいます。

◼︎ 数値入力。

幅w、高さhの部分をタップしてテンキーを表示させ、数値入力でオブジェクトのサイズを変更することができます。

UIの右上に鍵マークがありますね。これをタップすることで縦横比の固定/解除を切り替えます。

縦横比固定で高さか幅の一方を変化させると、もう一方の値も比率を保つべく変化します。

解除の状態にすると、幅と高さを独立してのサイズ指定が可能です。

◼︎ マイナス値入力。

「サイズ」にマイナスの値を入力すると、オブジェクトが反転します。
縦横比ロックの状態では、バウンディングボックスの原点（左上）に対して反転。

ロック解除の状態であれば、x/y軸それぞれに対して反転します。

ノードツールでアンカーポイントを操作。

ここまで紹介してきた機能は、ノードツールを使って個別のアンカーポイントに対して操作することも可能です。パスの微調整をする際には有効ですね。

ただし試してみた結果、UIの数値表示がうまく連動しないこともありました。「オブジェクト全体に対する数値」と「アンカーポイントごとの数値」が混同してしまうからなのかもしれません。

今回から始まった「アレンジタブ」機能についての記事ですが、このあと２〜３記事くらいにまたがりそうです。

続きは調査完了次第またアップしていきたいと思います。またお会いしましょう ♫