## page was renamed from ペンツールの練習14
== ペンツールの練習 ==

練習用ファイルを用いてペンツール(ペジェ曲線)の練習をします。

書き方のポイント
 * 折れ線はクリック
 * 曲線はドラッグ
 * ボタンを押す場所はいつでも線上
 * クローズパスは最初の点で終わる
 * オープンパスはEnterを押して終わる
----
=== 練習 ===
練習用ファイルのダウンロードは済んでいますか？

練習用ファイルをInkscapeで開き、
次の指示にしたがって、灰色で示された線と同じになるようにペジェ曲線を描く練習をしなさい。
 . 練習の曲線は'''１２個'''あります。
 . それぞれ<<Color(red:１筆で)>>描くこと。
 . 一部に説明用の線が加わっているが、'''灰色の線だけ'''を描けばよい。
----
==== １）折れ線（クローズパス） ====
折れ線を描くにはつながっている順に角を'''クリック'''していきます。

クローズパス（閉じた線）の場合は、１周するように順にクリックします。
 . 右回りでも左回りでも、どの角から始めてもかまいません。
 . 角を順にクリックしていき１周したら、最初にクリックした角を（最後に）もう一度クリックします。
最初にクッリクした点には小さな'''□'''が表示されます、最後はこれに合わせてクリックすればよい。
 . {{attachment:path01.png}}
描き方
 . ABCの順にクリックし、'''最後にもう一度'''、Aの点をクリックします。
----
==== ２）折れ線（オープンパス） ====
オープンパス(輪になっていない端のある線)の場合です。
つながっている順にクリックするのは、１の場合と同じです。

最後に'''Enterキー'''を押して線を終わります。

 . {{attachment:path02.png}}
描き方
 . 5つの点をつながっている順にクリックします。
 . Enterキーを押します。

----
==== ３）曲線（概要） ====
折れ線を描くにはクリックしましたが、
曲線を描くには<<Color(red:ドラッグ)>>します。

 * ドラッグを始める位置は線上
 * ドラッグの方向は接線(進行)方向

ドラッグの向きと量を緑色の矢印で示してあります。
 . {{attachment:path03.png}}
描き方
 1. Aの矢印の根元から先までドラッグします
 1. Bの矢印の根元から先までドラッグします
 1. Cの矢印の根元から先までドラッグします
 1. Dの矢印の根元から先までドラッグします
 1. Eの矢印の根元から先までドラッグします
 1. Enterキーを押します。

----
==== ４）曲線（ドラッグして曲線の形に合わせる） ====
描き始めのドラッグは緑の矢印で示してあります。
終わりの点でのドラッグの量を調整します。
 . {{attachment:path04.png}}
描き方
 1. Aの矢印の根元から先までドラッグします
 1. Bの点から点線の方向にドラッグします
   . 描きたい曲線の形に一致したところでボタンを離す
 1. Enterキーを押します

B点でドラッグを始めるときには、曲線の形は正しくありません。

----
==== ５）曲線（ドラッグ量の練習） ====
途中にもノードがあります。
A点のドラッグは緑の矢印で示してあります。
B点、C点でのドラッグ量を調整します。
 . {{attachment:path05.png}}
描き方
 1. Aの矢印の根元から先までドラッグします
 1. Bの点から点線の方向にドラッグします
   . 描きたい曲線の形に一致したところでボタンを離す
 1. Cの点から点線の方向にドラッグします
   . 描きたい曲線の形に一致したところでボタンを離す
 1. Enterキーを押します

中間のノードでのドラッグ方向が、ノードの前後で共用されます。

----
==== ６）クローズパス（ドラッグ方向とドラッグ量の練習） ====
途中の点でのドラッグ方向は示してありませんが、
接線(進行)方向にドラッグします。

 . {{attachment:path06.png}}
描き方
 1. Aの矢印の根元から先までドラッグします
 1. Bの点から接線(進行)方向にドラッグします
   . 描きたい曲線の形に一致したところでボタンを離す
 1. Cの点から接線(進行)方向にドラッグします
   . 描きたい曲線の形に一致したところでボタンを離す
 1. Aの点から接線(進行)方向にドラッグします
   . 描きたい曲線の形に一致したところでボタンを離す

クローズパスの場合、最後にもういちど最初の点でドラッグします。

----
==== ７）角のあるクローズパス ====
角が１つだけあるクローズパスの場合は、
６と同様に角の点から描き始めるとよい。

途中のノードは３個程度。

 . {{attachment:path07.png}}

----
==== ８）角の無いクローズパス ====
ちょっと複雑な曲線の例です。

角の無いクローズパスでは描きやすい部分から始めます。例えばA点。

カーブのきついBC間は難しいかもしれません。
カーブの入り口と出口にあたるB点とC点付近にノードを置くつもりで描きます。

 . {{attachment:path08.png}}

描き方
 1. A点から進行方向にドラッグします
 1. A点とB点の間の曲線上で進行方向にドラッグします
 1. B点付近で進行方向にドラッグします
 1. C点付近で進行方向にドラッグします
 1. C点とA点の間の曲線上で進行方向にドラッグします
 1. A点から進行方向にドラッグします

C点とA点の間にもうひとつノードを追加しても良い。

 * 曲がり方の変化が大きい部分ではノード間が狭く、
 * 滑らかな部分ではノード間が広くなります。

----
==== ９）途中の角 ====
曲線の途中に角がある例です。
描き方は２通りあります。

 * 描き方(1)は'''shiftキー'''を使って方向を変える方法です。
 * 描き方(2)は角までの曲線を描いたあとで、端から線をのばす方法です。

 . {{attachment:path09.png}}

描き方(1)

 ノードの前後で方向線の向きを変えるときは'''shiftキー'''を使います。
 shiftキーを押すとすでに描いた曲線は変えないで、次のノードの方向線だけを変えることができます。
 押す、離すタイミングに注意してください。

 1. ＡからＢへドラッグ
 1. ＣからＤへドラッグし曲線の形を合わせるが、まだ'''ボタンを離さない'''
 1. shiftキーを押す（これも押したままで）
 1. そのままＥの位置までドラッグ
 1. マウスのボタンを離す
 1. shiftキーを離す
 1. F点からドラッグして曲線の形を合わせる
 1. Enterキーを押す

描き方(2)

AC間の曲線を描いていったん確定した後、C点でつなぐように残りの曲線を描きます。

 1. ＡからＢへドラッグ
 1. ＣからＤへドラッグし曲線の形を合わせる
 1. Enterキーを押す
 1. ＣからＥの位置までドラッグ(Ｃの位置に表示される'''□'''から始めること)
 1. 最後の点からドラッグして曲線の形を合わせる
 1. Enterキーを押す(１つのパスになっていることを確認すること)
----
==== １０〜１２）いろいろな曲線 ====

ノードをどこに置いたらよいかも含めて考え、練習しましょう。

考え方
 * 曲線上の点では必ずドラッグする。
 * ドラッグは進行方向(接線方向)に行う。
 * 次のノードは曲線の形がすこし違っているが、ドラッグで一致させられるところにとる。

最初の点から進行方向にドラッグ
 . {{attachment:path10.png}}
線上にマウスを置いてみて、描かれる曲線を予想する。
ここで右方向にドラッグすると、曲線は左に膨らむので一致できそうだ。
 . {{attachment:path11.png}}
ドラッグ中。
 . {{attachment:path12.png}}
同様に次のノードを考える。
 . {{attachment:path13.png}}