Java Script

SVGライブラリ

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

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

全体を表示する

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

drawing_svg.js
機能一覧

基本操作

以下は SVGライブラリを使って作成したごく簡単な図である。
HTML
JavaScript

補助線の表示

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

矩形を描く・SRectクラス

矩形を描く。矩形の中にテキストを表示する。複数の矩形を直線で結ぶ。

staticプロパティ

コンストラクタ

プロパティ

メソッド

使用例

矩形を描く

矩形を描き、中に文字列を表示する。矩形の枠線の太さ、色、背景色、および文字のフォント、サイズ、色、表示位置を変える。

複数の矩形を連結線で結ぶ　連結線の終端を矢印にする

直線を引く・SLineクラス

開始点と終了点を指定して直線を引く。始点および終点に矢印を描くことができる。

staticプロパティ

コンストラクタ

プロパティ

メソッド

使用例

折れ線を引く・SPolylineクラス

指定した座標に沿って折れ線を描く。始点および終点に矢印を描くことができる。

staticプロパティ

コンストラクタ

プロパティ

メソッド

使用例

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

指定した開始点から文字列を表示する。開始点は文字列を表示する矩形領域の左上隅になる。

staticプロパティ

コンストラクタ

プロパティ

使用例

y方向の表示位置の調整

文字列の表示では、文字列の上端をコンストラクタの引数に指定した y点としたいので、text要素の dominant-baselineプロパティを Hangingにしている。これは、文字列の表示の基準線を文字列の上端とするものである。しかし日本語の表示の場合、下図の "あ" のように、若干上に突き出してしまう。
多くのフォントはラテン文字（アルファベット）を基準に設計されていて、例えば、"h"は上部が上端の基準線より突き出るのが一般的である。この動作が日本語（CJK文字）の表示にも影響を与えるので、このような現象になるらしい。
本ライブラリでは、これを調整するための補正を行っている。実際の文字列の表示位置（文字列を表示する矩形領域の始点とサイズ）は、text要素の getBBoxメソッドにより取得できるので、指定の y点との差分だけ文字列の表示位置を下にずらしている。

複数行の文字列を表示する・SMultiTextクラス

指定した開始点から複数行の文字列を表示する。改行コードを含んだ文字列は、改行コードで改行する。開始点は文字列を表示する矩形領域の左上隅になる。

staticプロパティ

コンストラクタ

プロパティ

使用例

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

指定した幅と高さのディスク（円柱）を描く。描画の開始点はディスクの上端と左端を結んだ左上の点になる。

staticプロパティ

コンストラクタ

プロパティ

使用例

円を描く・SCircleクラス

指定した座標を中心として指定した半径の円を描く。

staticプロパティ

コンストラクタ

プロパティ

使用例

イメージファイルを表示する・SImageクラス

指定したURLからイメージファイルを読み込み、指定した領域に表示する。
領域は、指定したサイズが一辺の長さとなる正方形である。イメージは、アスペクト比を維持したまま、その中に収まるように拡大ないし縮小して表示される。デフォルトではイメージの左上隅が領域の左上の点に来るように配置される。指定により領域の中央にイメージを配置することもできる。

コンストラクタ

メソッド

使用例

[ 応用 ] ハイパーリンクを作成する

SVGで作成した図形要素は、HTMLのタグ要素と同様に addEventListenerメソッドを実装し、UIイベントを補足することができる。ここではライブラリのクラスオブジェクトを通してイベントハンドラを実装する方法について説明する。
左の文字列にマウスカーソルを置くと、文字の色が変わり下線が現れ、クリックすると alertウィンドウを表示する。カーソルを外すと元に戻る。
ポイントは、SVGので作成した要素オブジェクトの参照方法である。これは、createElementNSメソッドで作成するオブジェクトで、表示する要素の種類に合わせて、"rect", "line", "text" といったものがある。
SVGライブラリのクラスでは、このオブジェクトはインスタンス変数のひとつとして保持される。従って、要素に対して addEventListenerメソッドを実装するには、その変数名が分かっていなければならない。以下に各クラスにおける要素のインスタンスの変数名を示す。
矩形・SRectクラスobject.rect
直線・SLineクラスobject.line
折れ線・SPoliLineクラスobject.lines
文字列・STextクラスobject.text
ディスク・SDiskクラスobject.top / object.rect / object.bottom
円・SCircleクラスobject.circle
イメージ・SImageクラスobject.image
複数行の文字列・SMultiTextクラスobject.textList[text]
これは、やや特殊である。使用例を示す。

[ 応用 ] SVG領域の座標を確認する

SVG領域内の任意の点をマウスでクリックすると、マウスを押している間は座標を示すサブウィンドウが表示され、マウスを離すと閉じる。（実際に動作します）
サブフォームの定義
[image6.png]