１．概要
文字列は、Layerオブジェクトが持つcanvas要素に描画される。図形の表示と同様に、文字列を表示するためのメソッドと、文字列を含む矩形のパスを描画するためのメソッドがある。
２．文字列の表示
文字列を表示するメソッドは、図形と同様にHuTime.Drawingクラスで定義されている。drawStringが文字列の表示、pathStringが文字列を含む矩形のパスを描画するメソッドである。文字列の大きさが書式設定により変化するため、他の図形や画像とは異なり、パスを描画するメソッドでも書式を指定する。また、文字列の書式指定には、HuTime.StringStyleを使用する。
HuTime.Drawing.drawString(style, layer, position, text [, rotate, [, canvas]])
HuTime.Drawing.pathString(style, layer, position, text [, rotate, [, canvas]])
文字列の基準位置をPositionオブジェクトで指定する。文字列のどこが基準位置になるかは、書式により決まる。他の図形と同様に、基準位置を中心に文字列を回転させることも可能である。
- style
- 型：HuTime.StringStyle
- 文字列の書式（フォント、大きさ、色など）を指定する。
- layer
- 型：HuTime.Layer
- 文字列を表示するレイヤ。
- position
- 型：HuTime.PositionBase
- 文字列の基準位置。文字列のどこが基準位置になるかは、書式（HuTime.StringStyleオブジェクト）のtextAlignプロパティ、および、textBaselineプロパティにより決まる。
- text
- 型：文字列
- 表示する文字列のテキスト。テキストに含まれる改行は、表示に反映される。
- rotate
- 型：数値
- 文字列を回転させる角度（単位:度）。指定は任意で、省略した場合は、0が指定される。回転の中心は、positionプロパティが示す位置。
- canvas
- 型：canvas要素
- 図形を描画するcanvas。指定は任意で、省略した場合は、layer.canvasが指定される。RecordLayerなど、複数のcanvas要素を持つLayerオブジェクトが対象の場合に使用。
３．表示のタイミング
HuTime.Drawingの他のメソッドと同様に、レイヤの再描画に合わせて、HuTime.Layer.processBeforeRedrawメソッド（再描画の前）、または、HuTime.Layer.processAfterRedrawメソッド（再描画の後）の中に表示の処理を記述する。表示の順序に関する年表レイヤのレコード、グラフレイヤのプロット、レイヤ上のオブジェクトなどとの関係も、他の図形と同様である。 記述する。グラフのプロットやレイヤ上のオブジェクトとの関係も、他の図形と同様である。
文字列の表示の例（下記サンプルコード）。書式指定（HuTime.StringStyleオブジェクト）により、フォントサイズは32px、中央揃えとなっている。
サンプルコード（実行例はこちら）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script>
<title>Sample Code</title>
</head>
<body>
<div id="timeline"></div>
<script type="text/javascript">
var ht = new HuTime();
var pnls = new HuTime.PanelCollection(200, 400);
ht.appendPanelCollection(pnls, document.getElementById("timeline"));
var pnl = new HuTime.TilePanel(200);
pnls.appendPanel(pnl);
var lyr = new HuTime.Layer(200, 0, 0, 100, 0);
pnl.appendLayer(lyr);
var pos = new HuTime.TVPosition(100, 50);
var sty = new HuTime.StringStyle(32);
sty.textAlign = "center";
lyr.processAfterRedraw = function processAfterRedraw(layer) {
HuTime.Drawing.drawString(sty, layer, pos, "Hello World!");
};
ht.redraw(0, 200);
</script>
</body>
</html>
４．パスの利用
他の図形と同様に、パスを描画するメソッドを、マウスが文字列の中にあるかどうかを判断する場合などに利用できる。下記のサンプルコードでは、文字列内にマウスが入ると、文字列の色が変わる。
サンプルコード（実行例はこちら）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script>
<title>Sample Code</title>
</head>
<body>
<div id="timeline"></div>
<script type="text/javascript">
var ht = new HuTime();
var pnls = new HuTime.PanelCollection(200, 400);
ht.appendPanelCollection(pnls, document.getElementById("timeline"));
var pnl = new HuTime.TilePanel(200);
pnls.appendPanel(pnl);
var lyr = new HuTime.Layer(200, 0, 0, 100, 0);
pnl.appendLayer(lyr);
var pos = new HuTime.TVPosition(100, 50);
var sty = new HuTime.StringStyle(32);
sty.textAlign = "center";
var text = "Hello World!";
lyr.processAfterRedraw = function processAfterRedraw(layer) {
HuTime.Drawing.drawString(sty, layer, pos, text);
};
lyr.mouseEventCapture = HuTime.EventCapture.All;
lyr.addEventListener("mousemove",
function(ev) {
var ctx = HuTime.Drawing.pathString(sty, ev.target, pos, text);
if (ctx.isPointInPath(ev.offsetX, ev.offsetY))
sty.fillColor = "red";
else
sty.fillColor = "black";
ev.target.clear();
HuTime.Drawing.drawString(sty, ev.target, pos, text);
}
);
ht.redraw(0, 200);
</script>
</body>
</html>
