1.概要

文字の色、大きさ、書体フォントの種類や書体などの書式は、HuTime.StringStyleで設定する。また、HuTime.StringStyle.applyStyleを再定義することにより、標準ではサポートされていない独自の書式を指定することができる。

2.標準の書式指定

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
型:文字列
文字のフォントの種類。
string style example

文字列の書式指定の例(下記サンプルコード)。一番上は、既定の書式。その下の赤い文字列は、文字サイズ、文字の色、文字の太さ、書体を設定した例。青い文字列は、改行を含む文字列の表示例。一番下は、フォントの種類と文字の輪郭を設定した例。

サンプルコード実行例はこちら)。

<!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>
      

3.独自の書式設定

以下のHuTime.StringStyleの書式適用のメソッドを再定義することにより、独自の書式を設定することができる。図形の書式とは異なり、塗りと輪郭の書式適用を個別に再定義はできない。独自に設定した書式を元に戻す場合は、既定のメソッドで再定義する(nullで再定義した場合も既定のメソッドに置き換わる)。

applyStyle(ctx, text)

HuTime.StringStyle.prototype.defaultApplyStyle

文字列全体(塗りおよび輪郭)の書式の適用。再定義することにより、独自の書式を定義できる。既定の処理に戻す場合は、HuTime.FigureStyle.prototype.defaultApplyStyleを設定する。

ctx
型:CanvasRenderingContext2D
対象となる文字列のパスを含むcanvas要素のコンテキスト。
text
型:文字列
表示するテキスト。
string style example

独自の書式設定を使った文字列表示の例(下記サンプルコード)。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>
      

マニュアルの目次へ戻る