ベジェ曲線の編集

<< Click to Display Table of Contents >>

マニュアル > 画面作成ガイド > Panel Editorの編集操作 >

ベジェ曲線の編集

ベジェ曲線の編集

以下のコントロールの線(または境界線)は、点間を単なる直線で結ぶ以外に、ベジェ曲線を描画することができます。

 

多角形コントロール

連続線コントロール

 

fap_editor_0070

連続線コントロールによるベジェ曲線の例

 

 

 

ここでは、連続線コントロールを例に、ベジェ曲線の編集方法について解説します。

 

 

1.連続線コントロールを張り付ける

 

コントロールタブの「図形」から、「連続線」コントロールを選択します。

 

fap_editor_0071

 

フォーム上で、連続線の頂点となる場所を一つずつマウスでクリックしていきます。

 

fap_editor_0072

ここでは例として、左記の1、2、3の順にマウスでクリックします。

 

 

fap_editor_0073

すると、左記のような状態になります。始点のポイントは青、終点のポイントは赤で表示されています。

 

これ以上頂点を追加する必要が無い場合は、終点のポイントの上(赤い丸)でマウスをダブルクリックします。

 

 

fap_editor_0074

編集が確定され、左記のような連続線が描画されました。

 

 

 

 

2.頂点を移動する

 

連続線の頂点は、マウスで自由に移動させることができます。

 

fap_editor_0076

連続線の頂点を移動するには、頂点のポイント(白い丸)をマウスでドラッグします。

 

ここでは例として、右上の頂点をマウスで下方向に移動させてみます。

 

 

fap_editor_0077

連続線の頂点が移動し、オブジェクトの形状が変わりました。

 

 

 

3.頂点の追加/削除

 

連続線は「編集モード」にすることで自由に編集することができます。

 

fap_editor_0077

連続線を「編集モード」にするには、Ctrlキーを押しながら対象のオブジェクトをマウスでダブルクリックします。

 

 

fap_editor_0075

すると、連続線は左記の表示となり、マウスカーソルの形状がペン状になります。

また、マウスカーソルのペンの右側には「^」マークが表示されています。

 

この状態が「編集モード」です。

 

 

 

fap_editor_0078

ここでは例として、2つ目と3つ目の頂点の間に、さらに1つ頂点を追加してみます。

頂点を追加するには、Ctrlキーを押しながら、頂点を追加したい場所(つまり、線の上)にマウスカーソルを合わせます。

 

すると、マウスカーソルの「^」マークが「+」に変わるので、この状態でマウスを一度クリックします。

 

 

 

 

 

fap_editor_0079

マウスでクリックした場所に、頂点が新たに追加されました。

 

頂点の追加は、いくつでも連続して行うことができます。

 

 

fap_editor_0086

続いて、頂点を削除します。

 

編集モードの状態で、編集したい頂点をマウスでクリックします(※この時、キーは何も押さない)。

すると、選択された頂点のポイントが黒色になります。

 

この状態でDELキーを押すと、選択中のポイントの頂点が削除されます。

 

 

fap_editor_0087

頂点が削除されました。

 

編集モードを終了させるには、フォーム上のオブジェクト以外の任意の場所でマウスをダブルクリックします。

 

 

 

4.頂点を編集してベジェ曲線にする

 

fap_editor_0079

対象のオブジェクトに対してCtrlキーを押しながらマウスでダブルクリックし、編集モードにします。

 

 

 

fap_editor_0080

編集モードの状態で、編集したい頂点をマウスでクリックします(※この時、キーは何も押さない)。

すると、選択された頂点のポイントが黒色になります。

 

この状態で、Ctrlキーを押しながら黒色のポイントをマウスでドラッグすると、対象のポイントがベジェ曲線の頂点に変わります。

 

ここでは例として、右方向にドラッグしてみます。

 

 

fap_editor_0081

すると、黒色のポイントを中心として左記のようなハンドルが左右に伸びて表示され、ラインが曲線に変わりました。

 

このように、ベジェ曲線の頂点では、頂点を中心として2つのハンドルが伸びた状態で表示されます。

 

このハンドルを編集することにより、ベジェ曲線の形状を自由に編集することができます。

 

 

 

5.ベジェ曲線を編集する

 

ベジェ曲線の編集は「編集モード」で行います。

 

fap_editor_0082

 

ベジェ曲線の頂点は、初期状態では2つのハンドルはそれぞれ対になっています。片方のハンドルを移動させるともう一方のハンドルも均等間隔が維持された状態で共に移動します。

 

ここでは例として、右側のハンドルをマウスでドラッグして上方向に移動してみます(※この時、キーは何も押さない)。

 

 

 

 

fap_editor_0083

すると、操作したハンドルが上方向に移動するとともに、反対側のハンドルは下側の対角線上に移動し、曲線の形が対称的に変化します。

 

 

fap_editor_0084

続いて、片側のハンドルだけを移動させてみます。

 

ハンドルを個別に編集するには、Ctrlキーを押しながら移動させたい対象のハンドルをマウスでドラッグします。

 

ここでは例として、右上側のハンドルを斜め下方向に移動させてみます。

 

 

fap_editor_0085

操作した側のハンドルのみが移動し、曲線の形状が変わりました。

 

 

 

fap_editor_0088

通常、ハンドルは2つ表示されていますが、任意のハンドルを削除して直線描画にすることができます。

方法としては、選択中の頂点(黒色の丸)と同じ位置にハンドルを移動させる事によって、移動させたハンドルが消え、消えた側のとなりの頂点との点間が直線描画になります。

 

ここでは例として、下側のハンドルを削除してみます。

Ctrlキーを押しながら、対象のハンドルを頂点に重ねるようにマウスでドラッグします。

 

 

fap_editor_0089

下側のハンドルが削除され、2つ目と3つ目の点の点間が直線に変化しました。

 

尚、ハンドルを両方とも削除すると(つまり、両方のハンドルとも頂点の黒丸と同じ座標位置に重ねると)、線は直線補間に戻ります。

 

fap_editor_0090

削除したハンドルを再度表示させたい場合は、片方のハンドルをマウスでドラッグします(※この時、キーは何も押さない)。

 

 

 

 

 

fap_editor_0091

すると、削除したハンドルが復活し、ハンドルが2つ表示された状態になりました。

 

 

 

 

 

 

 

 

hint

ハンドルが1つになった状態を含め、2つのハンドルが対称でない状態のベジェ曲線の頂点を編集する際、ハンドルの位置を移動させる時は必ずCtrlキーを押しながらマウスでドラッグするようにします。Ctrlキーを押さずにマウスで移動させると、もう片方のハンドルが自動的に対称の状態に戻ります。