最初からこの記事におつきあいしていただいてる方は、
もう座標も読めちゃうしハンドルも動かせちゃう。

じゃぁ、本当に自由にベジェ曲線は描けるんでしょうか？


すでにあるイラストを書きかえましょう。


あっ・・・【描画】を「描く」【データ】を「書く」としてます。




先にスタイルを変更した、このバナー。




どん！


どうでしょう？！

自由なベジェ曲線は描けます！

かなり大変だけど！！

ちょー手間がかかるけども！！！


はっきりいって、全部の手順は読む前からお腹いっぱいになっちゃうと思う。

それでもやってみたい！

という方にポイント解説です。 がんばりましょう！！




この記事では、こちらの部分の書きかえポイント。


尾びれの部分です。



大きく書きかえました！


まずは、円弧。

はじめて出てきました。 アルファベット A。

円弧で描いたんじゃないんだけど、円弧に変換されてしまいました。

このあたりは、気まぐれのようです。

何度か書き出してみましたが、
その時々、普通にパスで書き出されたりもします！


Illustrator ではこちらです。




データです。

＜path class="cls-1" d="M
420.11,58 始点

h-8.23 始点から水平（H・h）に -8.23 の第2点

A63.23,63.23,0,0,1, 第2点と第3点を通る 円弧-1

416,79.7, 第3点

63.46,63.46,0,0,1, 第3点と第4点（終点）を通る 円弧-2

420.11,58 終点

Z”/＞


円弧-1 の数値を変えてみます。

見やすく、オブジェクトを消しました。
文章よりも画像で理解してね。




A63.23,63.23,0,0,1, 元の状態。

これでは、どの程度の円の円弧なのかよくわからないので。




A63.23,63.23,0,1,1,

円を反転させます。



A の最初の二つの数値は、円の大きさ。



A63.23,20,0,1,1,

x軸が最初の数字。 y軸を変えてみました。


反転した円を戻してみると・・・。



よれちゃいましたね〜。


楕円にして、最初の 0 に数値を入れると。



A100,63.23,10,1,1,

傾きます。
楕円のどこの円弧を使用するのかということ。


最後の 1 は。



A63.23,63.23,0,1,0,

使用する円弧の反転です！ 最初のは、円そのものの反転。
わかりやすくレイヤーを上にしてます。


ここでは、

＜path class="cls-1" d="M430.11,58h-28.23A63.23,63.23,0,0,1,416,100,63.46,63.46,0,0,1,430.11,58Z”/＞

と書きかえ。

円弧は変えず、第3点を下に、他 2点間を広げました。



次は、尾びれの右側。

Illustrator 。




データ。

＜path class="cls-4" d="M530.44,0c-2.78,5.1,2.78,21.78-26,19.46-24.46-2-70.41,2.78-84.38,38.57H526.76C535.41,44.07,538.67,25.37,530.44,0Z"/＞




始点を大きくのばした形にしたいな。


始点の位置を変えてみましょう！
終点の座標も同じにしてくださいね。

y座標を上方に引き上げました。




＜path class="cls-4" d="M530.44,-30c-2.78,5.1,2.78,21.78-26,19.46-24.46-2-70.41,2.78-84.38,38.57H526.76C535.41,44.07,538.67,25.37,530.44,-30Z"/＞

なんだ？ ダメじゃん。

ではなくて、相対座標を忘れているからです。

どこか 1点を動かす場合、その後に相対座標が続くとき、次の点（アンカー）座標の値も加減させます。


この例では、始点と終点の y を マイナス30 で上に持っていったから
第2点の y は プラス30 でもとに戻します。

厳密に言えば、その前のハンドルもですが、
どうせ全体での調整が必要だから、そのままにしています。




＜path class="cls-4" d="M530.44,-30c-2.78,5.1,2.78,21.78-26,49.46-24.46-2-70.41,2.78-84.38,38.57H526.76C535.41,44.07,538.67,25.37,530.44,-30Z”/＞

できたかな？

あとは、いいぐあいにハンドルを調整します。


では、先ほどのこちらに戻ってみましょう。



＜path class="cls-4" d="M530.44,-30c-2.78,5.1,2.78,21.78-26,19.46-24.46-2-70.41,2.78-84.38,38.57H526.76C535.41,44.07,538.67,25.37,530.44,-30Z"/＞

一つのオブジェクト全体を移動したいときも、まず、始点と終点を移動します。

今度は、相対座標はついてきますが、絶対座標がついてきません。

なので、絶対座標の加減をします。

こっちは、出現する絶対座標すべてです。




＜path class="cls-4" d="M530.44,-30c-2.78,5.1,2.78,21.78-26,19.46-24.46-2-70.41,2.78-84.38,38.57H526.76C535.41,14.07,538.67-4.63,530.44,-30Z”/＞

C の後の y を、それぞれ マイナス30 しました。


あれ？ H も絶対座標なんじゃないの？？


H は、前の点から この座標まで 平行線を引く指示です。

y 方向に垂直移動したので座標は変わりません。
x 方向に水平移動したときは、書きかえが必要です！

ちなみに、V は、垂直線。

L は、ハンドルのないラインです。


・・・大丈夫ですか？


もしかしてもう誰もついてきてなかったりして？？


もうちょっとがまんしてくださいね。



長くなったので、続きます！

関連記事

• Illustrator から svg！vol.06 【アンカーポイントを追加しよう！】
• Illustrator から svg！vol.05 【自由なベジェ曲線は描けるの？】
• Illustrator から svg！vol.04 【ベジェの座標を読んでみる！】