１．概要
文字の色、大きさ、書体フォントの種類や書体などの書式は、HuTime.StringStyleで設定する。また、HuTime.StringStyle.applyStyleを再定義することにより、標準ではサポートされていない独自の書式を指定することができる。
２．標準の書式指定
HuTime.StringStyleでは、以下の書式が指定できる。
- fontSize
- 型：文字列
- 既定値："10px"
- 文字の大きさ（高さ）（単位：px）。数値のみを入力した場合は、自動的に単位（"px"）が付加される。nullを入力した場合は、既定値に戻る。
- fontStyle
- 型：文字列
- 既定値："normal"
- 文字の書体。"normal"（標準）、"italic"（斜体）、 "oblique"（斜体フォント） のいずれかが指定可能。nullを入力した場合は、既定値に戻る。
- fontWeight
- 型：数値
- 既定値：400
- 文字の太さ。100から900までの値が入力可能。10の桁以下は切り捨てられる。100未満または900を超える値を入力した場合は、それぞれ、100または900に置き換えられる。文字列"bold"を入力した場合は、700に置き換えられる。nullを入力した場合は、既定値に戻る。
- fontFamily
- 型：文字列
- 既定値："sans-serif"
- フォントの種類。nullが入力された場合は、既定値に戻る。
- lineHeight
- 型：数値または文字列
- 既定値：1
- 改行した場合の改行幅。文字の大きさ（fontSize）に対する倍率を指定する場合は、数値が入力する（単位：emと同じ）。px単位で指定する場合は、単位を付した文字列として入力する（例:"10px"）。負の値を指定すると、逆方向に改行する（CSSとは異なる仕様）。nullが入力された場合は、既定値に戻る。
- textAlign
- 型：文字列
- 既定値："start"
- テキスト横方向の整列位置。"start"（開始位置）、"end"（終了位置）、"left"（左）、"right"（右）、 "center"（中央）のいずれかが指定可能。nullが指定された場合は、既定値に戻る。
- textBaseline
- 型：数値の配列
- 既定値："alphabetic"
- テキスト縦方向の整列位置。"top", "hanging", "middle", "alphabetic", "ideographic", "bottom"のいずれかが指定可能。nullが指定された場合は、既定値に戻る。
- fillColor
- 型：文字列
- 既定値："black"
- 文字の色。CSSでの色指定と同様の方法で指定する。色名、カラーコード、rgb()、rgba()が利用可能。nullの場合は、文字の色は処理されない（透明になる）。
- lineWidth
- 型：数値
- 既定値：0
- 文字の輪郭の幅（単位：px）。0以下の場合、文字の輪郭は描画されない。
- lineColor
- 型：文字列
- 既定値：null
- 文字の輪郭の色。CSSでの色指定と同様の方法で指定する。色名、カラーコード、rgb()、rgba()が利用可能。nullの場合は、文字の輪郭は描画されない。
- alpha
- 型：数値
- 既定値：1.0
- 透過率。0.0で完全に透明、1.0で完全に不透明になる。文字全体（文字の中身および輪郭）が対象。
上記のうち、StringStyleのコンストラクタでは、フォントサイズ、色、書体、および、フォントの種類を指定することができる。指定が省略された場合は、既定値が適用される。
コンストラクタ
HuTime.Style([fontSize [, fillColor [, fontWeight [, fontStyle [, fontFamily]]]]])
- fontSize
- 型：数値
- 文字の大きさ（単位：px）
- fillColor
- 型：文字列
- 文字の色。CSSでの色指定と同様の方法で指定する。
- fontWeight
- 型：数値
- 文字の太さ。
- fontStyle
- 型：文字列
- 文字の書体。
- fontFamily
- 型：文字列
- 文字のフォントの種類。
文字列の書式指定の例（下記サンプルコード）。一番上は、既定の書式。その下の赤い文字列は、文字サイズ、文字の色、文字の太さ、書体を設定した例。青い文字列は、改行を含む文字列の表示例。一番下は、フォントの種類と文字の輪郭を設定した例。
サンプルコード（実行例はこちら）。
<!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);
pnl.appendLayer(lyr);
var pos = new HuTime.TVPosition(10, 10);
var pos1 = new HuTime.TVPosition(10, 25);
var pos2 = new HuTime.TVPosition(10, 40);
var pos3 = new HuTime.TVPosition(10, 75);
var sty = new HuTime.StringStyle();
var sty1 = new HuTime.StringStyle(20, "red", 700, "italic");
var sty2 = new HuTime.StringStyle(18, "blue");
var sty3 = new HuTime.StringStyle(20, "yellow");
sty3.fontFamily = "serif";
sty3.lineWidth = 3;
sty3.lineColor = "green";
var text = "Default";
var text1 = "Size: 20px Weight:700 Style:italic";
var text2 = "Line 1\nLine 2\nLine 3";
var text3 = "Font Family: serif";
lyr.processBeforeRedraw = function processBeforeRedraw(layer) {
HuTime.Drawing.drawString(sty, layer, pos, text);
HuTime.Drawing.drawString(sty1, layer, pos1, text1);
HuTime.Drawing.drawString(sty2, layer, pos2, text2);
HuTime.Drawing.drawString(sty3, layer, pos3, text3);
};
ht.redraw(0, 200);
</script>
</body>
</html>
３．独自の書式設定
以下のHuTime.StringStyleの書式適用のメソッドを再定義することにより、独自の書式を設定することができる。図形の書式とは異なり、塗りと輪郭の書式適用を個別に再定義はできない。独自に設定した書式を元に戻す場合は、既定のメソッドで再定義する（nullで再定義した場合も既定のメソッドに置き換わる）。
applyStyle(ctx, text)
HuTime.StringStyle.prototype.defaultApplyStyle
文字列全体（塗りおよび輪郭）の書式の適用。再定義することにより、独自の書式を定義できる。既定の処理に戻す場合は、HuTime.FigureStyle.prototype.defaultApplyStyleを設定する。
- ctx
- 型：CanvasRenderingContext2D
- 対象となる文字列のパスを含むcanvas要素のコンテキスト。
- text
- 型：文字列
- 表示するテキスト。
独自の書式設定を使った文字列表示の例（下記サンプルコード）。applyStyleメソッドを再定義することにより、StringStyleではサポートされていない図形の重ね合わせに関する指定（globalCompositeOperation）を使って、図形から文字を切り抜く表現を実現している。
サンプルコード（実行例はこちら）。
<!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);
pnl.appendLayer(lyr);
var pos = new HuTime.TVPosition(100, 50);
var sty = new HuTime.StringStyle(40, "red", 700);
sty.textAlign = "center";
sty.textBaseline = "middle";
sty.applyStyle = function applyStyle(ctx, text) {
ctx.globalCompositeOperation = "xor";
HuTime.StringStyle.prototype.defaultApplyStyle.apply(sty, [ctx, text]);
ctx.globalCompositeOperation = "source-over";
};
var styBk = new HuTime.FigureStyle("blue");
lyr.processBeforeRedraw = function processBeforeRedraw(layer) {
HuTime.Drawing.drawCircle(styBk, layer, pos, 150);
HuTime.Drawing.drawString(sty, layer, pos, "Hello World!");
};
ht.redraw(0, 200);
</script>
</body>
</html>
