HMDT - Special Issue / Sketch BP / ベジエ曲線ツールの仕様

■ ベジエ曲線ツールの仕様を考える

ついに、ベジエ曲線ツールまで来たよ！この、Project Sketch BP の目標であった、ベジエ曲線だ。やっとここまで来たよー。

ベジエ曲線ツールの使い方は、ポリゴンツールとそんなに変わらないものでいいと思う。つまり、作成するときは、ぽん、ぽん、と点を置いていって形を作る。ただし、ポリゴンと違うのは、クリックしたあと、ドラッグすると、コントロールポイントを引き出すことができるようにすることだ。

あと、編集のときだけど、これもポリゴンと似ている。ダブルクリックすると編集モードに入って、アンカーポイントを動かすことができる。さらに、アンカーポイントを選択すると、コントロールポイントのハンドルも出て、それも動かすことができるようにする。

こんな感じで、もうちょっと細かく仕様を決めよう。

◆ 作成時の仕様

まずは、作るときの仕様。

1. ベジエ曲線ツールを選択して、画面の何もないところをクリックしたら、作成モード開始。クリックした点を、ベジエ曲線の開始点（および現時点の最終点）にする

2. クリックして、マウスを離さずにドラッグしたら、コントロールポイントを引き出す。

3. 作成モード中は、ポリゴンの各点にハンドルを描く

4. 作成モード中に、画面をクリックしたら、ベジエ曲線にその点を追加する。その点を新しい最終点とする。ドラッグしたら、対応するコントロールポイントを追加する。ドラッグした点から、クリックした点を中心として、対象側にもコントロールポイントを追加する

5. クリックした点がポリゴンの開始点だったら、ポリゴンを閉じて、作成モードを終わりにする。新しいドローオブジェクトの出来上がり

6. ダブルクリックしたら、その点を追加して、作成モードを終わりにする。パスは閉じない。新しいドローオブジェクトの出来上がり

コントロールポイントの追加のところ以外は、ポリゴンツールとほぼいっしょだ。

◆ 編集時の仕様

続いて編集の仕様。これもポリゴンツールとかなり同じ。

1. 選択ツール（矢印ツール）の状態で、ベジエ曲線オブジェクトをダブルクリックすると、編集モードに入る

2. 編集モード中は、ベジエ曲線の各点にハンドルを描く

3. 編集モード中は、ハンドルをクリックすると選択できる

4. 選択された点は、コントロールポイント用のハンドルも表示する

5. ハンドルをドラッグしたら、そのベジエ曲線の点を変更する

6. ハンドルを選択中に delete キーを押すと、その点を削除する

こんな感じでどうでしょ。いくつか、意図的に省いたものもある。たとえば、コントロールポイントの削除とか。今回は、最低限必要な機能の実装にしぼってみた。

■ ベジエ曲線ツールの実装

というわけで、ベジエ曲線の仕様は、かなりポリゴンに近いんだ。だから、実装もかなり近くなる。

そこで、実装の解説の内、ドローオブジェクトの移動と、ドローオブジェクトの読み込み、保存は、ほとんどポリゴンオブジェクトと変わらないので、ここではパス。オブジェクトの作成と編集にしぼろう。

- ソースコードのダウンロード -

HMDT - Download / Sketch BP