Figure Formats - HuTime API Manual

1. Overview

You can format the color, the width of a line, etc. of a figure using HuTime.FigureStyle. You can also specify your own formats that are not supported by default, by redefining HuTime.FigureStyle.applyStyle.

2. Formats by Default

In HuTime.FigureStyle, the following formats are available:

lineWidth: Type: Number; Default value: 1; The width of the line (in pixels). If it is 0 or less, the line is not drawn. The maximum value is 999.
lineColor: Type: String; Default value: null; The color of the line. 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 line is not drawn.
lineDash: Type: Number array; Default value: [] (An empty array); The settings for a dashed line. Specify the line type and length of spacing for the dashed line (in pixels) as an array. The maximum value of each element is 999.
fillColor: Type: String; Default value: null; The fill color. 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 figure is not filled (and is transparent).
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 figure (fill and lines) is affected.

Among the styles above, the constructor of FigureStyle can be used to specify the fill color, together with the width and color of the line. When you omit these styles, they are set to the default values.

Constructor

HuTime.FigureStyle([fillColor [, lineColor [, lineWidth]]])

fillColor: Type: String; The fill color (inside the figure). It can be specified in the same way a color is specified in CSS.
lineColor: Type: String; The color of the line (the border of the figure). It can be specified in the same way a color is specified in CSS.
lineWidth: Type: Number; The width of the line (the border of the figure) (in pixels).

An example of drawing figures (see the sample code below). The border of the circle is drawn in dashed line. The triangle is translucent because of its alpha setting. The square has an opaque border, but the inside of it is translucent because fillColor is specified with rgba().

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);

    posCircle = new HuTime.TVPosition(50, 50);
    posSquare = new HuTime.TVPosition(65, 70);
    posTriangle = new HuTime.TVPosition(35, 30);
    styCircle = new HuTime.FigureStyle("#00ffff", "red", 2);
    styCircle.lineDash = [10, 3];
    stySquare = new HuTime.FigureStyle("rgba(255,255,0,0.5)", "rgb(0,0,255)", 5);
    styTriangle = new HuTime.FigureStyle("#0000ff");
    styTriangle.alpha = 0.3;
    lyr.processBeforeRedraw = function processBeforeRedraw(layer) {
        HuTime.Drawing.drawCircle(styCircle, layer, posCircle, 100);
        HuTime.Drawing.drawSquare(stySquare, layer, posSquare, 100);
        HuTime.Drawing.drawTriangle(styTriangle, layer, posTriangle, 100);
    };

    ht.redraw(0, 100);
</script>
</body>
</html>

3. Your Own Formats

You can specify your own formats by redefining the formatting methods of HuTime.FigureStyle shown below. The alpha property is applied to an entire figure, and thus even when you redefine the formatting methods for filling (applyFillStyle) and lines (applyLineStyle), their default actions are applied. If you want to use your own formats for the entire figure, including the alpha property, redefine applyStyle. 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.)

applyFillStyle(ctx)

Applies the fill format (inside the figure). When you redefine it, you can define your own format. To restore it to its default action, use HuTime.FigureStyle.prototype.defaultFillApplyStyle.

ctx: Type: CanvasRenderingContext2D; The context of the canvas element that contains the path to the figure to be formatted.

applyLineStyle(ctx)

Applies the format of the line (the border of the figure). When you redefine it, you can define your own format. To restore it to its default action, use HuTime.FigureStyle.prototype.defaultLineApplyStyle.

ctx: Type: CanvasRenderingContext2D; The context of the canvas element that contains the path to the figure to be formatted.

applyStyle(ctx)

Applies all the formats, including the fill, line, and transmittance. When you redefine it, you can define your own format. To restore it to its default action, use HuTime.FigureStyle.prototype.defaultApplyStyle.

ctx: Type: CanvasRenderingContext2D; The context of the canvas element that contains the path to the figure to be formatted.

An example of drawing a figure with your own format (see the sample code below). A gradient effect, which is not supported by FigureStyle, is applied by redefining the applyFillStyle method.

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);

    pos = new HuTime.TVPosition(50, 50);
    sty = new HuTime.FigureStyle(null, "red", 2);
    sty.applyFillStyle = function applyFillStyle(ctx) {
        var x = pos.cnvX(lyr);
        var y = pos.cnvY(lyr);
        ctx.fillStyle = ctx.createRadialGradient(x, y, 0, x, y, 50);
        ctx.fillStyle.addColorStop(0, "aqua");
        ctx.fillStyle.addColorStop(1.0, "yellow");
        ctx.fill();
    };

    lyr.processBeforeRedraw = function processBeforeRedraw(layer) {
        HuTime.Drawing.drawCircle(sty, layer, pos, 100);
    };

    ht.redraw(0, 100);
</script>
</body>
</html>

マニュアルの目次へ戻る