String Formats - HuTime API Manual

1. Overview

You can format text by specifying fonts, font colors, sizes, etc. through HuTime.StringStyle. You can also specify your own formats that are not supported by default, by redefining HuTime.StringStyle.applyStyle.

2. Formats by Default

In HuTime.StringStyle, the following formats are available:

fontSize: Type: String; Default value: "10px"; The size (height) of text (in pixels). If you enter a number only, the unit ("px") is appended automatically. If null is entered, it is set back to the default value.
fontStyle: Type: String; Default value: "normal"; The typeface of the text. You can specify one of the following values: "normal," "italic," or "oblique." If null is entered, it is set back to the default value.
fontWeight: Type: Number; Default value: 400; The thickness of the text. You can enter a value between 100 and 900. It is rounded down to the nearest hundredths place. Any value less than 100 is replaced with 100, and any value more than 900 with 900. When the string "bold" is entered, it is replaced with 700. If null is entered, it is set back to the default value.
fontFamily: Type: String; Default value: "sans-serif"; The type of the font. If null is entered, it is set back to the default value.
lineHeight: Type: Number or string; Default value: 1; The linefeed width after starting a new line. If you specify a scaling factor to the size of the text (fontSize), enter a number (in the same units of em). If you specify in pixels, enter it as a string followed by the unit (e.g., "10px"). If you specify a negative value, new lines are started in the opposite direction (and this is different from the CSS specifications). If null is entered, it is set back to the default value.
textAlign: Type: String; Default value: "start"; The horizontal alignment of text. You can specify one of the following values: "start" (start position), "end" (end position), "left" (left-aligned), "right" (right-aligned), "center" (centering). If null is entered, it is set back to the default value.
textBaseline: Type: Number array; Default value: "alphabetic"; The vertical alignment of text. You can specify one of the following values: "top," "hanging," "middle," "alphabetic," "ideographic," "bottom." If null is entered, it is set back to the default value.
fillColor: Type: String; Default value: "black"; The color of text. It can be specified in the same way a color is specified in CSS. The color name, color code, rgb(), and rgba() are available. If it is set to null, the text color is not applied (and is transparent).
lineWidth: Type: Number; Default value: 0; The width of the outline of text (in pixels). If it is 0 or less, the outline of the text is not drawn.
lineColor: Type: String; Default value: null; The color of the outline of text. It can be specified in the same way a color is specified in CSS. The color name, color code, rgb(), and rgba() are available. If it is set to null, the outline of the text is not drawn.
alpha: Type: Number; Default value: 1.0; Transmittance. A value of 0.0 makes it completely transparent, and a value of 1.0 completely opaque. The entire text (the outline and inside of the text) is affected.

Among the formats above, you can specify the font size, color, typeface, and font type with the constructor of StringStyle. When you omit these styles, they are set to the default values.

Constructor

HuTime.Style([fontSize [, fillColor [, fontWeight [, fontStyle [, fontFamily]]]]])

fontSize: Type: Number; The size of the text (in pixels).
fillColor: Type: String; The color of text. It can be specified in the same way a color is specified in CSS.
fontWeight: Type: Number; The thickness of the text.
fontStyle: Type: String; The typeface of the text.
fontFamily: Type: String; The font type of the text.

An example of formatting strings (see the sample code below). The string at the top has the default format. The red string below is an example of adding the size, color, weight, and typeface formats to the text. The blue strings are an example of text with linefeed characters. The bottom shows an example in which the font type and outline are specified.

Sample code (click here for a running 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. Your Own Formats

You can specify your own formats by redefining the formatting methods of HuTime.StringStyle listed below. Unlike when figures are formatted, the fill and outline formats cannot be redefined separately. To restore your own format to the original one, use the default method to redefine your own method. (If the format is redefined to null, it is also replaced back with the default method.)

applyStyle(ctx, text)

HuTime.StringStyle.prototype.defaultApplyStyle

Applies the formats of the entire string (the fill and outline). When you redefine it, you can define your own format. To restore it to its default action, use HuTime.StringStyle.prototype.defaultApplyStyle.

ctx: Type: CanvasRenderingContext2D; The context of the canvas element that contains the path to the string to be formatted.
text: Type: String; Text in the string to be displayed.

An example of displaying a string with your own format (see the sample code below). By redefining the applyStyle method, the text is clipped out from the figure through specifying an item regarding overlapping figures (globalCompositeOperation), which is not supported by StringStyle.

Sample code (click here for a running 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(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>

Back to the Contents of this Manual