Java Drawing DrawTop

Language

JP  US  UK

 

操作説明書 図形操作

 H. Jyounishi, Tokyo Japan
 

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

要旨:auto align, コネクターの機能について説明する。次にダイアログを使った図形の平行移動・回転移動、鏡映変換について説明する。折れ線、三次曲線の節点を動かして形を修正する方法、節点の追加・削除方法について説明する。三次曲線の場合、節点での接線方向を変える方法も説明する。また図形を他の図形で切断する操作、複数の曲線を接続して所望の図形を作成する方法を説明する。

大項目: auto align, コネクター, 平行移動, 回転移動, 鏡映変換, 図形の変形, 図形の切断, 曲線の接続

操作ビデオ
auto align

video.html
コネクター

video.html


1. auto align 戻る=>page top

操作

説明

auto align

settingボタンのメニューauto alignのチェックボックスをオンにすると図形を移動、リサイズするときに隣の図形と整列させることができる。デフォールトはオン。

=>設定

この機能は図形の整列コマンドalign_left, align_center, align_right. align_top, align_middle, align_bottomと同じ機能を、図形を移動、リサイズしたときに対話的に実行する。

図(a)は整列していないブロックダイアグラムである。

図(a)整列していないブロックダイアグラム

まず左のKeyboardボックスを選択して上に動かす。KeyTypedボックスとある誤差範囲で水平に並ぶと下図のように赤い点線が表示される。この場合、大きさが同じボックスなので、align_top, align_middle, align_bottomの条件が同時に満たされ、赤い点線が3本表示される。この時点でマウスボタンを離すと、正確にKeyboardボックスはKeyTypedボックスに整列する。
確認するためにはもう一度選択ボックス(周りの灰色に枠)の上でマウスボタンを押す。これで整列を示す赤い点線が再度表示される。

図(b) Keyboardボックスを上に移動。

次にKeyTypedボックスを少し左へ動かすと、Keyboardボックスとは水平方向に並び、かつListenerPanelボックスとは垂直方向に並び、図(c)のように整列を表す赤い点線が表示される。この時点でマウスボタンを離すと、KeyboardボックスおよびListenerPanelボックスと整列させることができる。

図(c) Keytypedボックスを左に移動。

以下同様な操作を繰り返し、図(d)を得る。

図(d) 完成したブロックダイアグラム

他の例: => 例題-1

auto align 例1
離れた図形間の整列

自動整列(auto align)は操作説明書の図形の整列コマンド align_left, align_center, align_right. align_top, align_middle, align_bottomと同じ機能を、 図形を移動・リサイズしたときにリアルタイムに実行する。 赤い点線が表示されている間に、マウスボタンを離すと正確に整列する。
: API仕様書 - 移動・リサイズされている図形は選択ボックスが表示されている図形。


図1.1-(1) 中央の矩形を周辺の3図形に整列
top-top, middle-middle, bottom-bottom , left-left, center-center, right-rightで整列


図1.1-(2) 折れ線の右端点が2つの矩形に整列
endp(端点)-middle, endp-leftで整列


図1.1-(3) リンゴ図形(グループ)を矩形に整列
top-top, middle-middle, bottom-bottomで整列


図1.1-(4) リンゴ図形(グループ)を楕円に整列
top-top, middle-middle, bottom-bottomで整列

図1.1 通常ケース - 離れた図形の整列

auto align 例2
境界接触整列

図形の境界(正確には図形を囲む矩形)が重なると、 細い赤点線では見えなくなるので、太い赤点線で整列状況を表示する。


図1.2-(1) 矩形を他の矩形に境界接触で整列
left- ightで整列

図1.2-(2) 矩形を他の矩形に境界接触で整列
top-bottomで整列

図1.2-(3) 楕円を矩形に境界接触で整列
left-rightで整列

図1.2-(4) 楕円を他の矩形に境界接触で整列
top-bottomで整列

図1.2-(5) リンゴを矩形に境界接触で整列
left-rightで整列

図1.2-(6) リンゴを楕円に境界接触で整列
left-rightで整列

図1.2 境界接触整列

auto align 例3
重なり整列


図1.3-(1) 矩形の重なり整列
left-centerで整列

図1.3-(2) 矩形の部分重なり整列
left-center, bottom-middleで整列

図1.3-(3) 楕円と矩形の重なり整列
left-centerで整列

図1.3-(4) 楕円と矩形の完全な重なり整列
left-left, center-center, right-right,
top-top, middle-middle, bottom-bottomで整列

図1.3-(5) リンゴ図形と楕円の重なり整列
left-center, right-rightで整列

図1.3-(6) リンゴ図形と楕円の中心重なり整列
center-center, middle-middleで整列

図1.3 重なり整列

auto align 例4
コネクターを伴う整列


図1.4-(1) コネクターを伴う図形の整列

図1.4-(2) 境界接触での整列

図1.4 コネクターを伴う整列
: API仕様書 - コネクターの接続を保持する処理

auto align 例5
境界接触、重なり整列の具体例


図1.5-(1) 元の図形

図1.5-(2) 円を正方形内に中央整列

図1.5-(3) 円をリサイズして正方形に内接

図1.5-(4) 円をリサイズして正方形に内接
=>グルーピング


図1.5-(5) コピー&ペースト

図1.5-(6) 境界接触で整列

図1.5-(7) 境界接触で整列

図1.5-(8) 完成

図1.5-(9) 斜め上図形に整列

図1.5-(10) 左側図形に整列

図1.5-(11) 上側、左側図形に整列

図1.5-(12) 完成

図1.5 境界接触、重なり整列の例



2. コネクター戻る=>page top

コネクターの作成, 接続点位置を動かす, 接続を切る, コネクターの有効化/無効化, Auto tracking オプション, コネクターをガイドラインに沿って移動, グループ図形へのコネクターの接続, 様々の操作に対する接続の保障


コマンド

説明

コネクターの作成 直線と折れ線は図形をつなぐコネクターの役割を果たす。
(1)コネクターの作成-1
2つの図形を接続する直線または折れ線を作成する () ときに、マウスを図形の境界上に近づけ、接続点マークが表示されたらその点を始点または終点とする。
=> 接続点マーク


直線の始点直線の終点


折れ線の始点折れ線の終点


(2)コネクターの作成-2
直線、折れ線の端点リサイズハンドル(クロスヘアーカーソルが表示される)をマウスで押さえてドラッグし、 他の図形に近づけると接続点マークが表示されるので、その位置でマウスボタンを離すと、接続点に直線、折れ線が正確に接続される。
=>カーソルマーク直線の端点移動折れ線の端点移動

: コネクターの接続点は図形境界上の任意の点で良い。また1つの図形に何本でもコネクターを接続できる。 またコネクターは閉じていない直線、折れ線、三次曲線にも接続できし、グループに属するどの図形にも接続できる。

接続点位置を動かす 接続点位置を動かすには、単にそのコネクターを選択し、 端点のリサイズマーク(クロスヘアーカーソルが表示される)をターゲット図形の境界に沿ってマウスでドラッグする。

接続を切る コネクター端点のリサイズマーク(クロスヘアーカーソルが表示される)をマウスでドラッグし、 ターゲット図形から少し離れた位置でマウスボタンを離す。

コネクターの有効化/無効化

"enable connector"チェックボックスをオンにするとコネクターの機能が有効になる。デフォールトはオン。
オフにするとコネクターの接続機能は使えなくなり、普通の直線、折れ線として操作できる。
Auto tracking オプション 図形(ターゲット図形)を移動、リサイズ、変形したときに、それに接続するコネクターの挙動(auto tracking option)を指定する。


auto tracking option: free direction
このオプションが選択されているときコネクターの挙動を下図に示す。
図(a)は元の図形。図(b)、(c)は楕円を上下に動かした時の様子。 直線コネクターはターゲット図形に追随し接続を保持する(赤い点は接続点)。 x方向直線コネクターはx方向の性質を失う。一方折れ線コネクターはx方向の性質は保持する。

(a) 元の図形
(b) 楕円を上に移動 (c) 楕円を下に移動
直線コネクター

(d) 元の図形
(e) 楕円を上に移動 (f) 楕円を下に移動
折れ線コネクター


auto tracking option: keep x/y direction
このオプションが選択されているときのコネクターの挙動を下図に示す。 折れ線コネクターの挙動は"free direction"オプションと同じ設定にしてあるので、 直線コネクターだけ説明する、
x方向直線コネクターはその方向を変えない。 これはx方向/y方向コネクターの延長線とターゲット図形の交点をリアルタイムで計算し、新しい接続点とすることで実現できる。 また大きく動かすと直線コネクターが折れ線コネクターに変化し、元に戻ると直線コネクターに戻す。
(a) 元の図形 (b)楕円を上に移動

(c) 楕円を下に移動

(d) 楕円を下に大きく移動すると、直線コネクターが折れ線コネクターに変わる。

(e) 楕円を上へ移動すると、折れ線コネクターが直線コネクターに戻る。

(f) 楕円を上へ大きく移動すると、再度直線コネクターが折れ線コネクターに変わる。


下図(a) - (c)は典型的で実用的な例である。選択ボックスの表示されている矩形を上に動かしている。
x/y方向を変えずにコネクターの接続を保障できれば、 ブロックダイアグラムやフローチャートなどを書く場合にauto align機能と共に非常に有効である。
(a)Original (b)option: free direction
右端の矩形を下へ動かすと、それに接続している直線コネクターはすべて方向を変える。
(c) option: keep x/y direction
右端の矩形を下へ動かしても、それに接続している直線コネクターは方向を変えない。 直線で接続できなくなると折れ線に変える。

=>例題-1

コネクターをガイドラインに沿って移動 コネクター(直線、折れ線)は、Ctrl/Shiftキーを押しながらマウスドラッグするとガイドラインに沿って動かすことができる。 ガイドラインがなければ、Ctrl/Shiftキーを押しながらマウスドラッグすると水平または垂直方向に移動される。 このコマンドはテーブルの罫線を動かすために用意したものである。
=> 例題 1.2
c(a) 元の図形
垂直線が一本のガイドラインと接続している
(a) 元の図形
垂直線がガイドラインと接続している
(b) 垂直線を右方向へ移動
(d) 垂直線を右方向へ移動

もちろんガイドランは直線や折れ線でなくとも良い。

(a) 元の図
垂直線がガイド曲線と接続している
(b) 垂直線を右方向へ移動
垂直線に接続するコネクターも変形される
グループ図形へのコネクターの接続 コネクターがグループ図形に含まれるどの図形にも接続できる。 図(a)のリンゴ図形はグループ図形で5個の図形から構成されている。 図(a)は左上の矢印線を白い図形の境界に接続した場面を示す。


図(a) コネクターをグループ図形に含まれる図形に接続


図(b)はリンゴ図形を"keep x/y direction"オプションで、上下に動かした場合を示す。 x/y方向コネクターはその方向を変えない。


図(b) リンゴ図形を上下に動かす

様々の操作に対する接続の保障

様々の操作に対してコネクターの接続は保持される。

図形の変形操作に対するコネクター接続保障

=> 折れ線の変形, 三次曲線の変形, コーナR矩形の変形

元の図形 - 折れ線 矢印の先端の点を左へ移動 さらに左へ移動
左下の節点を削除 新しい節点を追加 新しい節点を移動
元の図形 - 三次曲線 2個の節点を移動 左図の表示変更
最下点を移動 左図の表示変更
元の図形 - コーナR矩形 青色の点を移動しコーナRの半径を変更 コーナR最大半径

図形の種類変更に対するコネクター接続保証

=> 図形ライブラリ change shape

元の図形 右側のコーナR矩形を楕円に変更 2個の楕円を星型に変更
元の図形
(閉じた三次曲線のグループ図形)
閉じた三次曲線を六角形に変更 星型に変更



3. 図形の移動、加工 戻る=>page top
コマンド: 平行移動, 回転移動, 鏡映変換, 図形の変形, 図形の切断, 曲線の接続

操作・ボタン

説明

平行移動

平行移動する図形(複数可)を事前に選択し、utilボタンを押してtranslateメニューアイテムを選べばダイアログが表示される(図(a))。 事前に図形を選択していない場合、ダイアログの上段にエラーメッセージが表示される(図(b))。
∙ 平行移動量x,yをスピナーで指定するか、あるいは"Click two points"ボタンを選択して、 画面を2点クリックして指定する。

画面のクリックは図形のない場所をクリックするか、図(c),(d)に示すように図形上の点をクリックする。 画面をクリックして2点を指定したあとに、スピナーで値を修正できる。 例えば図(c)で2点を指定した後に、スピナーでy成分を0にすると、線分の幅だけのx方向平行移動になる。

∙ Copy=yesの場合、平行移動した図形はコピーされる(元の図形はそのまま残る)。
∙ Goボタンを押すと平行移動を実行する。続けてGoボタンを押すと、下図(e)のような繰り返し図形を作成できる。


図(a)


図(b)


図(c)

"Click two point"ボックスをチェックした後に、マウスを線分の端点に動かすと マークが表示される。 このマークを見ながら、線分の端点の両端点でマウスをクリックするとp1, p2(平行移動の始終点)が決定する。 この成分は平行移動ベクトルとして、x,yスピナーに表示される。(x: 36, y: 28)。

図(d)

ボタンをクリックすると平行移動を実行する。

Clicking two points on a shape.
(異なる図形上の2点をクリックしてもOK)

: "Go"ボタンを繰り返しクリックできる。


(e)平行移動&コピー

回転移動

回転移動の操作は平行移動の操作に類似している。
回転移動する図形(複数可)を事前に選択し、utilボタンを押してrotateメニューアイテムを選べば下図のダイアログが表示される(図(a))。 事前に図形を選択していない場合、ダイアログの上段にエラーメッセージが表示される(図(b))。
: ダイアログが表示されると同時に、回転の中心が画面に表示され(下図)、ダイアログのx, yのスピナーに座標が表示される。 回転中心は選択された図形を囲むボックスの中心点である。


選択図形が1つの場合


選択図形が2つの場合


回転中心を変更するためには、x, yのスピナーに座標を入力するか、画面をクリックする。図(c), (d)は楕円の左端点をクリックしている。 もちろん図形のない場所をクリックしても良い。
∙ 回転角を度で指定し、Goボタンを押すと回転移動を実行する。続けてGoボタンを押すと、下図(e)のような繰り返し図形を作成できる。
∙ Copy=yesの場合、平行移動した図形はコピーされる(元の図形はそのまま残る)。


図(a)


図(b)


図(c)
"Click the rotation center"ボックスをチェックし、楕円の左端にマウスを移動すると、 マークが表示されるのでマウスをクリックする。


図(d)
"Go"ボタンをクリックすると回転移動を実行する。繰り返し"Go"ボタンを押してもよい。

回転中心を画面で指定する。


(d)回転移動&コピー

鏡映変換

鏡映変換する図形(複数可)を事前に選択し、utilボタンを押してflipメニューアイテムを選べば下図のダイアログを表示する(図(a))。 事前に図形を選択していない場合、ダイアログの上段にエラーメッセージが表示される(図(b))。
Flipの"Horizontally", "vertically"は水平変換、垂直変換でどちらかを選ぶ。
Copy yes/noを設定しGoボタンを押すと鏡映変換を実行する。 Copy=yesの場合、鏡映変換した図形はコピーされる(元の図形はそのまま残る)。
なおCopy yesボタンを選ぶと、変換された図形は見易さのため少しずらして配置する。


(a)図形選択前のダイアログ

(b)図形選択後のダイアログ


(c)元の図形 

(d) Copy yesで変換・コピー

図形の変形

ラジオボタンを選択してから操作を行う。

(1) move button
=> R付き矩形の変形, 折れ線の変形, 三次曲線の変形

(2)add point button
曲線上に新しい接続点(節点)を加える。

元の図形 上の辺と底に節点を追加

(3)delete point button
接続点(節点)を削除する。
元の図形 上の辺の両端の節点を削除

(4)smooth button
接続点(節点)で曲線を滑らかに接続する。

元の図形 上の辺の両端の節点をSmooth 接線を動かす

(5)cusp button
滑らかな接続点(節点)で曲線に小さな角をつける。

元の図形 底の節点をCusp Cusp点で接線を動かす 通常の表示

(6)disconnect button
接続点(節点)で曲線を分割する。

元の図形 上辺と下辺の節点でdisconnect 通常の表示
図形の切断

ダイアログの指示に従って操作を行なう。
(1)ターゲット図形とカッターとなる図形を選択する(図(a))。

"util"ボタンを押す前にターゲット図形を1個選択しておいてもよい。
カッター図形を選択した後にGoボタンが使用可能になる。

(2)Goボタンを押すと切断を実行する、切断点を青マークで表示(図(c), (b))。
(3)切断後にContinueボタンを押すと、別の切断処理を続行できる。
 
図(a)ターゲット図形と切断する図形を選択

図(b) Goで切断実行、交点をブルーマークで表示

図(c) 確認のため選択ボックス表示
Repeatボタンを押してダイアログは初期状態に復帰。

図(d)は2つの図形が交点を多数持つ場合 - 切断点が多い場合
(見やすさのため、切断された図形を少しずらしてある)  
図(d)
曲線の接続

次のルールで選択された曲線のクリック点を含む区間を接続して新しい曲線を作成する。
・2曲線間に交点があれば、その交点を接続点にする。
・交点がなければ端点どうし、あるいは端点から相手曲線への垂線を接続点にする。

誤差のため接続点が完全に一致しない場合、一方の曲線を変換(回転・スケール変更)して接続点を完全に一致させる。
・複数の接続点が見つかりルート探索をしなければならないケースはエラーにする。

曲線の変更、切断コマンドを使えば、簡単にこのような複雑なケースは回避できるからである。


ダイアログの指示に従って操作を行なう。
(1)接続する曲線をクリックして選択する (図(a), (b))。

"util"ボタンを押す前に曲線を選択しても無効。
2本以上曲線を選択するとGoボタンが有効になる。

(2)接続する曲線を全て選びGoボタンを接続を実行する (図(b), (c))。

(a)接続する曲線を選択

(b)4本選択しGoボタンを押す。

(c)接続完了した図形
Repeatボタンを押してダイアログは初期状態に復帰。

切断、曲線の接続例

(1) 元の図形 (2) 相互切断:
ターゲット、カッターを選択
(3) 相互切断:
結果
(4) 不要な線分を除去 (5) 曲線の接続 (6) 結果、色塗り



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