Java Script

SVGライブラリ

JavaScriptのScalable Vector Graphics （SVG）は、2Dグラフィックスを記述するための XMLベースのマークアップ言語である。本機能は、SVGの機能をラップしたカスタムライブラリである。事務的作業において発生する作図（構造図の作成等）を容易に行うことを目的としたものである。

作図の例・血圧管理カレンダー クラス構造図（抜粋）

クラス構造図の全体を表示する
目次

基本操作

以下は SVGライブラリを使って作成したごく簡単な図である。
SVGライブラリの操作法
HTML
ライブラリ drawing_svg.js を参照する。SVG要素を HTMLツリーの任意の場所に記述する。ここに指定したサイズの表示領域が確保され、SVGの機能により図形の表示など行うことができる。
JavaScript

ライブラリーのソースコード

rawing_svg.js

補助線の表示

SVGライブラリの操作法
canvasと svgの表示領域を重ね合わせ、canvasに格子状の補助線を引けば、svg要素を配置するときに大まかな座標が把握できて便利である。上記は 50ピクセルの幅で格子を描いたものである。
HTML
JavaScript

矩形を表示する・SRectクラス

四角形四角形四角形
JavaScript
矩形を直線により連結し構造図のようなものを作る
あいうえおかきくけこさしすせそたちつてとなにぬねのAAABBBCCCDDDEEE
JavaScript

直線を引く・STLineクラス

JavaScript

文字列を表示する・STextクラス / SMultiTextクラス

あいうえお春夏秋冬aghjkzあいうえお春夏秋冬aghjkz
text要素の dominant-baseline属性を Hanging にすることで y軸に指定した線（上記の例では y=50ピクセル）に文字列の頭が来るようにしている。
JavaScript
y方向の表示位置の調整
フォントの違いなどによって、文字列の頭を指定のy点に合わせようとしても、実際は若干突き出してしまうことがあるので、これを調整する。実際の文字列の表示位置は、svgの text要素から getBBoxメソッドにより取得できるので、そこから差分を求め、y点を補正する。（詳細はライブラリのコードを参照のこと）
ああ調整前調整後指定の y点実際は指定の y点より高い位置に表示される
JavaScript

ディスクを描く・SDiskクラス

JavaScript

SVGを直接操作する

SVGライブラリは SVGの操作を単にラップしただけのものである。ライブラリで提供されない操作を行うには、SVGを直接操作すれば良い。例ををいくつかあげてみる。
円の描画は要素の作成から始める。
点線は、まずライブラリにより直線を作成し、ライブラリで提供していない線を点線にするプロパティは SVGの直接操作により設定する。
JavaScript

ハイパーリンクを作成する

ここをクリックする画像をクリック
左の文字列にマウスカーソルを置くと、文字の色が変わり下線が現れ、クリックすると alertウィンドウを表示する。カーソルを外すと元に戻る。右の画像をクリックすると、画像を表示した別ウィンドウが開く。
JavaScript

マウスイベントを補足する

マウスイベントを補足するには、SVG要素に addEventListenerを使ってイベントハンドラを登録すれば良い。次の例では SVG領域の任意の点をマウスでクリックすると、その座標を示したサブウィンドウが表示される。
[image6.png]
マウス操作に対するイベントハンドラーを登録する。 マウスダウン（mouusedown）により、マウスをクリックした位置の座標をパラメータとして、サブフォームを開く。サブウィンドウには座標を表示する。続いて、マウスアップ（mouuseup）により、表示中のサブウィンドウをクローズする。サブウィンドウのオブジェクトは、ウィンドウの名前（ここでは subform）を指定してウィンドウをオープンすることにより、取得することができる。
サブウィンドウ