Displaying Images - HuTime API Manual

1. Overview

Images are drawn on the canvas element of a Layer object. Just like displaying figures, one method for displaying an image and another for drawing the path of the outline of the image are available.

2. Displaying Images

The method for displaying an image is defined in the HuTime.Drawing class, just like figures. drawImage is the method for displaying the image, and pathImage is the method for drawing the path of the outline of the image.

HuTime.Drawing.drawImage(style, layer, position, src [, width [, height [, rotate, [, canvas]]]])

HuTime.Drawing.pathImage(layer, position, src [, width [, height [, rotate, [, canvas]]]])

Specify the center position of the image using a Position object, and if necessary, the width and height in pixels. Similar to other figures, you can also rotate the image.

style: Type: HuTime.FigureStyle; Specifies the format (e.g., the color, the width of the line) of the border of the image.
layer: Type: HuTime.Layer; The layer on which the image is displayed.
position: Type: HuTime.PositionBase; The position of the center of the image.
src: Type: String; The string that represents the URL of the image source. It can be specified by a relative path.
width: Type: Number; The width in which the image is displayed (in pixels). This can be optionally specified. If it is omitted or has an invalid value (such as the null value or a negative value), and if a valid height value (height) is specified, the same ratio is maintained. If the height value (height) is also omitted or invalid, the image is displayed with its original size.
height: Type: Number; The height in which the image is displayed (in pixels). This can be optionally specified. If it is omitted or has an invalid value (such as the null value or a negative value), and if a valid width value (width) is specified, the same ratio is maintained. If the width value (width) is also omitted or invalid, the image is displayed with its original size.
rotate: Type: Number; The angle of rotation of the figure (in degrees). This can be optionally specified. If omitted, it is set to 0.
canvas: Type: canvas element; The 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 image on a Layer object with multiple canvas elements, such as timeline layer or chart layer.

3. When Images 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 image 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.

An example of displaying images (see the sample code below).

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

    posW = new HuTime.TVPosition(25, 75);
    pos = new HuTime.TVPosition(100, 50);
    posH = new HuTime.TVPosition(175, 25);
    sty0 = new HuTime.FigureStyle();
    sty1 = new HuTime.FigureStyle(null, "red", 5);
    lyr.processAfterRedraw = function processAfterRedraw(layer) {
        HuTime.Drawing.drawImage(sty0, layer, posW, "http://web.hutime.org/manual/img/ImageSample.jpg", 80);
        HuTime.Drawing.drawImage(sty1, layer, pos, "http://web.hutime.org/manual/img/ImageSample.jpg");
        HuTime.Drawing.drawImage(sty0, layer, posH, "http://web.hutime.org/manual/img/ImageSample.jpg", null, 60);
    };

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

4. Use of the Path

As with other figures, you can use a path-drawing method for purposes such as determining whether the mouse cursor is inside a image. In the sample code below, the image rotates 180 degrees 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);

    pos = new HuTime.TVPosition(100, 50);
    sty = new HuTime.FigureStyle();
    lyr.processAfterRedraw = function processAfterRedraw(layer) {
        HuTime.Drawing.drawImage(sty, layer, pos, "http://web.hutime.org/manual/img/ImageSample.jpg");
    };

    lyr.mouseEventCapture = HuTime.EventCapture.All;
    lyr.addEventListener("mousemove",
        function(ev) {
            var ctx = HuTime.Drawing.pathImage(ev.target, pos, "http://web.hutime.org/manual/img/ImageSample.jpg");
            if (ctx.isPointInPath(ev.offsetX, ev.offsetY))
                HuTime.Drawing.drawImage(sty, ev.target, pos, "http://web.hutime.org/manual/img/ImageSample.jpg", null, null, 180);
            else
                HuTime.Drawing.drawImage(sty, ev.target, pos, "http://web.hutime.org/manual/img/ImageSample.jpg");
        }
    );

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

Back to the Contents of this Manual