Displaying Strings - HuTime API Manual

1. Overview

Strings are drawn on the canvas element of a Layer object. Just like displaying figures, one method for displaying a string and another for drawing the rectangle path containing the string are available.

2. Displaying Strings

The method for displaying a string is defined in the HuTime.Drawing class, just like figures. drawString is the method for displaying the string, and pathString is the one for drawing the rectangle path containing the string. Unlike other figures and images, you specify a format for the path-drawing method, as the size of a string varies depending on its format. You also use HuTime.StringStyle to format the string.

HuTime.Drawing.drawString(style, layer, position, text [, rotate, [, canvas]])

HuTime.Drawing.pathString(style, layer, position, text [, rotate, [, canvas]])

Specify the reference position of the string using a Position object. Where the reference position is in the string is determined by the format. Similar to other figures, you can also rotate the string around the reference position.

style: Type: HuTime.StringStyle; Specifies the format of the string (e.g., the font, size, and color).
layer: Type: HuTime.Layer; The layer on which the string is displayed.
position: Type: HuTime.PositionBase; The reference position of the string. The reference position in the string is determined by the textAlign and textBaseline properties of the format (HuTime.StringStyle object).
text: Type: String; Text in the string to be displayed. If the text contains newline characters, it appears on multiple lines.
rotate: Type: Number; The angle of rotation of the string (in degrees). This can be optionally specified. If omitted, it is set to 0. It is rotated around the point indicated by the position property.
canvas: Type: canvas element; canvas on which the figure is drawn. This can be optionally specified. If omitted, it is set to layer.canvas. It is used when you want to draw a string on a Layer object with multiple canvas elements, such as RecordLayer.

3. When Strings are Displayed

As with other HuTime.Drawing methods, write the display processing in the HuTime.Layer.processBeforeRedraw method (before the layer is redrawn) or HuTime.Layer.processAfterRedraw method (after the layer is redrawn), so that the string is redrawn when the layer is redrawn. They have the same relationship with records on a timeline layer, which relate to the display order, plots on a chart layer, and on-layer objects as other figures do. Describe it. They have the same relationship with plots on a chart and on-layer objects as other figures do.

An example of displaying a string (see the sample code below). The font is set to 32px in size and the string is centered, using the formatting (HuTime.StringStyleobject).

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

4. Use of the Path

As with other figures, you can use the path-drawing method for purposes such as determining whether the mouse cursor is inside a string. In the sample code below, the color of the string changes when the mouse cursor goes into the area of it.

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

Back to the Contents of this Manual