Java Drawing DrawTop

Language

JP  US  UK

 

図形の変形

 H. Jyounishi, Tokyo Japan
 

Frame (Index), No frame                 version:0.3(latest)  

要旨:矩形のコーナRの変更、折れ線、三次曲線の節点の移動、追加/削除、 三次曲線の節点での接線方向の変更などを行う。 ModifyShapeで操作を選択するJDialogを表示。 ModifyShapeActionでJDialog上に配置されたボタンなどのアクションを処理する。 マウスの動きはModifyShapeLSで受け取り、 図形要素(ShapeElement)のメソッドを呼んで、 選ばれた操作を実行する。
このページで説明するクラス: ModifyShape, ModifyShapeAction, ModifyShapeLS


1. 概要
1.1 例
(1) コーナーR矩形要素のR部変更 戻る=>page top
もとのRoundReectangleElement コーナR半径大きく コーナR半径最大

図1.1 コーナRの変更(青マークが制御点)


(2) 折れ線(Polyline)の節点、エッジ移動 戻る=>page top
∙ 折れ線(Polyline)の節点またはエッジ(線分)を移動、節点の追加、削除。
操作

折れ線(Polyline)の節点(青マーク)またはエッジ(白抜き青マーク)をマウスでドラッグする。 エッジ上にマウスを置きドラッグするとそのエッジが動く。 ctrl/shftキーを押しながらエッジを動かすと水平線、垂直線うち角度の近い線分になる。 同様な操作を続行して完成。

(a)最初の図形 (b)左端の線分を右へ移動 (c)shift/ctrlキーで整形 (d)完成図形

図1.2 折れ線の変形

: shift/ctrlキーを押しながらマウスをドラッグすると、節点/エッジの移動方向は水平/垂直方向のみに限定される。 また移動されるエッジは強制的に水平線/垂直線に変えられる。
(e) 図(d)の図形に節点追加 (f) 図(e)の図形から節点削除

図 1.3 節点の追加、削除


(3) 三次曲線要素の節点、接線変更 戻る=>page top
∙ 三次曲線の節点を移動する、節点での接線方向を変える、節点の追加、削除。
操作

下図は三次曲線の節点移動、接線方向を変える操作の例である。
節点の上でマウスボタンを押してドラッグするとその節点が動く(図1.4(b))。 接線を表す線分の端点の4角マークをマウスでドラッグすると接線方向が変わる (図1.4(c))。

(a)最初の図形 (b)2番目の節点を左上に移動 (c)始点の接線方向を変更

図 1.4 三次曲線の変形


(注) shift/ctrlキーを押しながらマウスをドラッグすると、節点の移動方向は水平/垂直方向のみに限定される。

(4) 節点の処理 戻る=>page top
(a)最初の図形 (b)add point底辺(ARC)と右の辺(LINE)に節点追加 (c)右上コーナの点を削除 (d)さらに左下、右下コーナの点を削除
(e)左上コーナ点をSmooth (f)全接続点をcusp (g)全接続点でDisconnect (g)Disconnectの結果
通常の表示


1.2 ダイアログ 戻る=>page top
ラジオボタンを選んで操作を選択する。

節点またはエッジを動かす

エッジ上に節点を追加する

節点を削除する

接続点で滑らかに接続

滑らかな接続点を折れた接続点にする

接続点で切り離す

図2 ダイアログの表示(折れ線の場合)



1.3 制御の流れ 戻る=>page top

ダイアログの表示、アクション処理はModifyShapeクラスで実行、 マウスの動作を受け取って図形要素の変更メソッドを呼び出すのはModifyShapeLSクラス、 実際の図形の変更を行うのは図形要素が担当する。

処理ステップ 説明
Step1.変更のスタート ポップアップメニューまたはプルダウンメニューでmodify shapeを選ぶと起動する。
 

いずれの場合もコマンドディスパッチャーExecCommandのexecメソッドを呼び出す。
execメソッドで分岐すると、ModifyShape.showDialogメソッドを呼び出す。

∙ ModifyShape.showDialogメソッドで、マウスリスナーModifyShapeLSオブジェクトを作成し、 ListenerPanelに設定。

これでマウスの動きを受け取ることができるようになる。

Step2.節点(、接線)の表示 ∙ ModifyShape.showDialogメソッドでターゲット図形(ShapeContainer)にMODIFYING_SHAPE_MODEを設定。

このモードでは、図形の節点、接線(三次曲線の場合)を表示し、通常モードと異なる図形表示を行う。

Step3.図形の変形 (1)節点の移動、エッジの移動(接線方向変更)
ダイアログのmoveボタンが選択されている場合。
マウスドラッグでこの操作を行うので、mousePressed -> mouseDragged(ドラッグ中繰り返す) -> moseReleasedが呼ばれてひとつの操作が完了する。
mousePressedでドラッグ開始点、mouseDraggedで現在点、moseReleasedで”終了”を図形要素の処理プログラムに送る。
送り先は、mousePressed->ShapeElement.mouseStart,
mouseReleased->ShapeElement.mouseEnd
mouseDragged->ShapeElement.modify
(2)節点の追加、削除:add point, delete pointコマンド
ダイアログのadd point/delete pointボタンが選択されている場合。
ユーザのclickデータをModifyShapeLS.mouseClickedメソッドで受け取り、 図形要素のaddPoint/deletePointメソッドを呼び出す。
節点の削除の場合は形が変わるので、変更される図形にコネクターが接続していれば、 コネクターの端点からターゲット図形への最短点を計算して、コネクターを接続しなおす (ConnectionUtil.resizeConnectors)。
Step4.編集の終了 画面上の何もない領域をclickする、またはダイアログでexitボタンを押すと終了。


2. ModifoyShapeクラス 戻る=>page top
public class ModifyShape extends JDialog
ダイアログの表示とボタンが押された時のアクション処理を行う。アクション処理はこのクラスの補助クラスModifyShapeActionで行ない、図形の変形処理はマウスリスナーをインプリメントしたModifyShapeLSで実行する。ダイアログのどれかのボタンがオンにされると、そのアクションをModifyShapeActionで受け取り、動作モードをModifyShapeLSに設定する。ここで動作モードは、節点/エッジを動かす、節点を追加する、節点を削除するのいずれかで、それぞれ整数値Command.MOVING_MODE、Command.ADD_POINT_MODE、Command.DELETE_POINT_MODEで表す。
このオブジェクトは再利用可能である。
フィールド 説明
action ModifyShapeAction action
ModifyShapeAction オブジェクトを設定。
modifyShapeLS ModifyShapeLS modifyShapeLS
マウスリスナーをインプリメントしたModifyShapeLSオブジェクトを設定。
targerContainer ShapeContainer targerContainer
選択図形ShapeContainerオブジェクト。
messageLabel1 JLabel messageLabel1
showMessageメソッドでメッセージを表示するラベルのオブジェクトを設定。
messageLabel2 JLabel messageLabel2
showMessageメソッドでメッセージを表示するラベルのオブジェクトを設定。
moveButton JRadioButton moveButton
ダイアログに表示されているadd pointボタンオブジェクトを設定。ボタンには ModifyShapeActionオブジェクトをアクションリスナーとして設定。
ボタンが押されると、ModifyShapeActionのactionPerformedでダイアログにメッセージを表示し、 ModifyShapeLSに動作モードを設定する。 このボタンの場合、MOVING_MODEを設置する。 MOVING_MODEにするとModifyShapeLSのmouseClickedメソッドの動作を途中で停止するので、 節点の追加/削除はできなくなる。
addPointButton JRadioButton addPointButton
イアログに表示されているadd pointボタンオブジェクトを設定。動作はmoveButtonと同じ。
deletePointButton JRadioButton deletePointButton
イアログに表示されているdelete pointボタンオブジェクトを設定。動作はmoveButtonと同じ。
smoothButton JRadioButton smoothPButton
イアログに表示されているsmoothボタンオブジェクトを設定。動作はmoveButtonと同じ。
cuspButton JRadioButton cuspButton
イアログに表示されているcuspボタンオブジェクトを設定。動作はmoveButtonと同じ。
disconnectButton JRadioButton disconnectButton
イアログに表示されているdisconnectボタンオブジェクトを設定。動作はmoveButtonと同じ。
exitButton JButton exitButton
Exitボタンオブジェクトを設定。ボタンにはModifyShapeActionオブジェクトをアクションリスナーとして設定。
ボタンが押されると、ModifyShapeLSを終了させダイアログを閉じる。
dialogDimension private Dimension dialogDimension=new Dimension(300,80)
ダイアログのサイズ。

メソッド 説明
showDialog public void showDialog()
∙ 最初に選択図形をチェックし、 不適切ならばJOptionPane.showMessageDialogでエラーメッセージを出す。
∙ マウスリスナー:ModifyShapeLSオブジェクトを作成する。
∙ ダイアログの表示位置を設定する。
ダイアログの表示位置は、選択図形の横になるように設定する。
∙ ダイアログにメッセージ用ラベル、ボタンを配置して表示する。

ボタンにはアクションリスナー:ModifyShapeActionを設定。 ボタンが押された時にModifyShapeActionのactionPerformedメソッドで受けられるようにする。
∙ ダイアログにWindowListenerを設定する。
ウインドウが閉じる時に、ダイアログを閉じる。 WindowListenerのメソッドはModifyShapeActionにインプリメントする。
これで選択図形を受け取るまで待ち状態に入る。

showMessage protected void showMessage(int id, String message)
メッセージ表示用ラベルは2段になっている。id=1/2で上段/下段を指定する。
getTargetContainer protected ShapeContainer getTargetContainer()
フィールド変数targerContainerを返す。ModifyShapeActionからアクセスするときのオブジェクト取得メソッド。
getModifyShapeLS protected ModifyShapeLS getModifyShapeLS()
フィールド変数modifyShapeLSを返す。ModifyShapeActionからアクセスするときのオブジェクト取得メソッド。


3. ModifyShapeActionクラス 戻る=>page top
class ModifyShapeAction extends AbstractAction implements WindowListener
ModifyShapeで作成したボタンのアクション処理とWindowリスナーのアクション処理を行う。

Field

Description

dialog ModifyShape dialog
ModifyShape オブジェクトを設定。

メソッド 説明
actionPerformed public void actionPerformed(ActionEvent e)
ボタンが押されたときに、アクション処理を実行する。
∙ move/add point/delete pointボタン
ModifyShapeのshowMessageメソッドでメッセージをダイアログに表示する。 ModifyShapeLSに動作モードを設定する。 ここで動作モードは、節点/エッジを動かす、節点を追加する、節点を削除するのいずれかで、 それぞれ整数値Command.MOVING_MODE、Command.ADD_POINT_MODE、Command.DELETE_POINT_MODEで表す。
∙ Exitボタン:closeDialogメソッドを呼んでダイアログを閉じる。
closeDialog private void closeDialog()
ModifyShapeのshowDialogメソッド。
windowClosing public void windowClosing(WindowEvent e)
ダイアログが閉じる前に呼ばれる。closeDialogメソッドを呼ぶ


4. ModifyShapeLSクラス   戻る=>page top
public class ModifyShapeLS implements MouseListener, MouseMotionListener
節点/エッジの移動、接線の方向変更、節点の追加/削除を行うためのマウスリスナー。 ここで受け取ったマウスの動作を図形要素(ShapeElementインターフェイスを実装したクラス)へ送り、図形の変更を行う。 このオブジェクトは再利用可能である。
: 処理に関する特記事項
項目 内容
曲線トポロジ 曲線の端点を動かして他の曲線に接続したり、Disconnectコマンドで曲線を分割したりするので曲線の本数が変化する。 本数が変化する曲線を扱える図形要素はGeneralCurveElementで、 パラメトリック曲線はGeneralCurve2DEである。 このためこの処理の最初(startメソッド)で、変形対象の図形要素をGeneralCurveElementに変換する処理を行う。
また最後の処理(endメソッド)で、複数の曲線を分解して一本ずつを一つの図形要素に格納する処理を行う。
undoSetup 曲線のトポロジが変化するたびにundoの設定を行うのが良い。
まずstartメソッドでundoSetupStartを呼び、 コマンドが切り替わるsetCommandメソッドでundoSetupEnd を呼んで変化を記録する。 また次のコマンド処理のためsetCommandメソッドでundoSetupStartを呼ぶ。 最後にendメソッドでundoSetupEndを呼び、トポロジの変化を全て記録する。

フィールド 説明
shapeContainer ShapeContainer shapeContainer
図形の変更がなされるShapeContainerオブジェクト。
connectionUtil ConnectionUtil connectionUtil
コネクターのリサイズを一括して行うConnectionUtilオブジェクトを設定。 なおConnectionUtilはundoの設定も行う。
mode int mode:このオブジェクトの動作モード
ダイアログのmove/add point/delete pointボタンが押されたときにセットされる。
ModifyShapeAction.actionPerformedメソッドから、 このクラスのsetModeメソッドを呼んで設定する。
startPoint Point2D startPoint:ドラッグ開始点
endPoint Point2D endPoint:ドラッグ現在点
oldPoint Point2D oldPoint:一回前に呼ばれた時のドラッグ点
angledLine DiscreteAngledLine lineAngle: DiscreteAngledLine オブジェクト

メソッド 説明
start public void start(ShapeContainer shapeContainer)
このメソッドは ModifyShape.showDialog メソッドから呼ばれる。
∙ このオブジェクトをMouseListener, MouseMotionListenerとして ListenerPanelに登録

SelectionLS オブジェクトが 動作しているとマウス操作で図形の選択処理が行われ異常が発生するので、 このオブジェクトが動作している間 ListenerPanel から SelectionLS オブジェクト を一時的に削除する。
ConnectionUtil.setTargets でmove/resizeの対象図形(ターゲット図形)を設定

ConnectionUtil.setTargets メソッドは変形される図形に接続しているコネクターを全てリストアップする。

ContainerManager.undoSetupStart でundo設定を行う。
=> ContainerManager Undoサポート機能
end public void end()
∙ このオブジェクトを、ListenerPanelから削除する。
SelectionLS(図形選択クラス)を再開する。
∙ ConnectionUtil.endでコネクターのリサイズ終了宣言。
∙ ContainerManager.undoSetupEndを呼んでUndo設定の終了宣言。
setCommmand public void setMode(int mode)
このオブジェクトの動作モードをコマンドで設定する。ModifyShapeActionのactionPerformedメソッドから呼ばれる。 設定されるコマンドはCommand. ADD_POINT/ DELETE_POINT/ SMOOTH/ CUSP/ DISCONNECT。
ダイアログのラジオボタンに対応している。
mousePressed public void mousePressed(MouseEvent e)
マウスドラッグの開始点をフィールド変数startPointに設定する。 図形要素のmouseMotionStartedメソッドを呼んでドラッグ開始であることを知らせる。
mouseDragged public void mouseDragged(MouseEvent e)
Command.MOVING_MODEのときだけ以下の処理を実行
∙ マウスドラッグの現在点をフィールド変数endPointに設定する。
∙ マウスドラッグの現在点をフィールド変数図形要素の図形変更メソッドmodifyを呼んで、図形の変形処理を行う。
ConnectionUtil.resizeConnectorsメソッドを呼んでコネクターのリサイズを行う。
mouseReleased public void mouseReleased(MouseEvent e)
startPoint, endPoint, oldPointにnullを設定。
mouseClicked public void mouseClicked(MouseEvent e)
Command.ADD_POINT_MODEまたはDELETE_POINT_MODEのときだけ以下の処理を実行
∙ 節点の追加/削除処理を実行する。折れ線、三次曲線、一般曲線のaddPoint/deletePointメソッドを呼ぶ。
∙ delete pointの場合、図形の形が変わるので、ConnectionUtil.resizeConnectorsを呼ぶ。
このリサイズメソッドは、コネクターの端点から最も近い、ターゲット図形の接続候補点に接続する。
mouseMoved public void mouseMoved(MouseEvent e)
∙ なにもしない
mouseEntered public void mouseEntered(MouseEvent e)
∙ なにもしない
mouseExited public void mouseExited(MouseEvent e)
∙ なにもしない


Copyright (c) 2009-2013
All other trademarks are property of their respective owners.