<< Click to Display Table of Contents >> マニュアル > 画面作成ガイド > Panel Editorの編集操作 > ベジェ曲線の編集 |
ベジェ曲線の編集
以下のコントロールの線(または境界線)は、点間を単なる直線で結ぶ以外に、ベジェ曲線を描画することができます。
•多角形コントロール
•連続線コントロール
連続線コントロールによるベジェ曲線の例
|
ここでは、連続線コントロールを例に、ベジェ曲線の編集方法について解説します。
1.連続線コントロールを張り付ける
コントロールタブの「図形」から、「連続線」コントロールを選択します。
フォーム上で、連続線の頂点となる場所を一つずつマウスでクリックしていきます。
ここでは例として、左記の1、2、3の順にマウスでクリックします。
|
すると、左記のような状態になります。始点のポイントは青、終点のポイントは赤で表示されています。
これ以上頂点を追加する必要が無い場合は、終点のポイントの上(赤い丸)でマウスをダブルクリックします。
|
編集が確定され、左記のような連続線が描画されました。
|
2.頂点を移動する
連続線の頂点は、マウスで自由に移動させることができます。
連続線の頂点を移動するには、頂点のポイント(白い丸)をマウスでドラッグします。
ここでは例として、右上の頂点をマウスで下方向に移動させてみます。
|
連続線の頂点が移動し、オブジェクトの形状が変わりました。
|
3.頂点の追加/削除
連続線は「編集モード」にすることで自由に編集することができます。
連続線を「編集モード」にするには、Ctrlキーを押しながら対象のオブジェクトをマウスでダブルクリックします。
|
すると、連続線は左記の表示となり、マウスカーソルの形状がペン状になります。 また、マウスカーソルのペンの右側には「^」マークが表示されています。
この状態が「編集モード」です。
|
ここでは例として、2つ目と3つ目の頂点の間に、さらに1つ頂点を追加してみます。 頂点を追加するには、Ctrlキーを押しながら、頂点を追加したい場所(つまり、線の上)にマウスカーソルを合わせます。
すると、マウスカーソルの「^」マークが「+」に変わるので、この状態でマウスを一度クリックします。
|
マウスでクリックした場所に、頂点が新たに追加されました。
頂点の追加は、いくつでも連続して行うことができます。
|
続いて、頂点を削除します。
編集モードの状態で、編集したい頂点をマウスでクリックします(※この時、キーは何も押さない)。 すると、選択された頂点のポイントが黒色になります。
この状態でDELキーを押すと、選択中のポイントの頂点が削除されます。
|
頂点が削除されました。
編集モードを終了させるには、フォーム上のオブジェクト以外の任意の場所でマウスをダブルクリックします。
|
4.頂点を編集してベジェ曲線にする
対象のオブジェクトに対してCtrlキーを押しながらマウスでダブルクリックし、編集モードにします。
|
編集モードの状態で、編集したい頂点をマウスでクリックします(※この時、キーは何も押さない)。 すると、選択された頂点のポイントが黒色になります。
この状態で、Ctrlキーを押しながら黒色のポイントをマウスでドラッグすると、対象のポイントがベジェ曲線の頂点に変わります。
ここでは例として、右方向にドラッグしてみます。
|
すると、黒色のポイントを中心として左記のようなハンドルが左右に伸びて表示され、ラインが曲線に変わりました。
このように、ベジェ曲線の頂点では、頂点を中心として2つのハンドルが伸びた状態で表示されます。
このハンドルを編集することにより、ベジェ曲線の形状を自由に編集することができます。
|
5.ベジェ曲線を編集する
ベジェ曲線の編集は「編集モード」で行います。
|
ベジェ曲線の頂点は、初期状態では2つのハンドルはそれぞれ対になっています。片方のハンドルを移動させるともう一方のハンドルも均等間隔が維持された状態で共に移動します。
ここでは例として、右側のハンドルをマウスでドラッグして上方向に移動してみます(※この時、キーは何も押さない)。
|
すると、操作したハンドルが上方向に移動するとともに、反対側のハンドルは下側の対角線上に移動し、曲線の形が対称的に変化します。
|
続いて、片側のハンドルだけを移動させてみます。
ハンドルを個別に編集するには、Ctrlキーを押しながら移動させたい対象のハンドルをマウスでドラッグします。
ここでは例として、右上側のハンドルを斜め下方向に移動させてみます。
|
操作した側のハンドルのみが移動し、曲線の形状が変わりました。
|
通常、ハンドルは2つ表示されていますが、任意のハンドルを削除して直線描画にすることができます。 方法としては、選択中の頂点(黒色の丸)と同じ位置にハンドルを移動させる事によって、移動させたハンドルが消え、消えた側のとなりの頂点との点間が直線描画になります。
ここでは例として、下側のハンドルを削除してみます。 Ctrlキーを押しながら、対象のハンドルを頂点に重ねるようにマウスでドラッグします。
|
下側のハンドルが削除され、2つ目と3つ目の点の点間が直線に変化しました。
尚、ハンドルを両方とも削除すると(つまり、両方のハンドルとも頂点の黒丸と同じ座標位置に重ねると)、線は直線補間に戻ります。 |
削除したハンドルを再度表示させたい場合は、片方のハンドルをマウスでドラッグします(※この時、キーは何も押さない)。
|
すると、削除したハンドルが復活し、ハンドルが2つ表示された状態になりました。
|
ハンドルが1つになった状態を含め、2つのハンドルが対称でない状態のベジェ曲線の頂点を編集する際、ハンドルの位置を移動させる時は必ずCtrlキーを押しながらマウスでドラッグするようにします。Ctrlキーを押さずにマウスで移動させると、もう片方のハンドルが自動的に対称の状態に戻ります。
|