画像の表示 - HuTime API マニュアル

１．概要

画像は、Layerオブジェクトが持つcanvas要素に描画される。図形の表示と同様に、画像を表示するメソッドと、画像の輪郭を示すパスを描画するメソッドがある。

２．画像の表示

画像を表示するためのメソッドは、図形と同様に、HuTime.Drawingクラスで定義されている。drawImageが画像の表示、pathImageが画像の輪郭を示すパスを描画するメソッドである。

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

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

画像の中心の位置をPositionオブジェクトで指定し、必要に応じて、幅と高さをpx単位で指定する。他の図形と同様に、回転させることも可能である。

style: 型：HuTime.FigureStyle; 画像の枠線の書式（色、線の太さなど）を指定する。
layer: 型：HuTime.Layer; 画像を表示するレイヤ。
position: 型：HuTime.PositionBase; 画像の中心の位置。
src: 型：文字列; 画像のソースのURLを示す文字列。相対パスでの指定も可能。
width: 型：数値; 画像を表示する幅（単位：px）。指定は任意で、省略した場合や無効な値（nullや負値など）が設定されており、かつ、高さ（height）として有効な値が指定されている場合は、同じ比率で幅が設定される。高さ（height）も省略または無効な値である場合は、元の画像の大きさで表示される。
height: 型：数値; 画像を表示する高さ（単位：px）。指定は任意で、省略した場合や無効な値（nullや負値など）が設定されており、かつ、幅（width）として有効な値が指定されている場合は、同じ比率で幅が設定される。幅（width）も省略または無効な値である場合は、元の画像の大きさで表示される。
rotate: 型：数値; 図形を回転させる角度（単位:度）。指定は任意で、省略した場合は、0が指定される。
canvas: 型：canvas要素; 図形を描画するcanvas。指定は任意で、省略した場合は、layer.canvasが指定される。年表レイヤやグラフレイヤなど、複数のcanvas要素を持つLayerオブジェクトが対象の場合に使用。

３．表示のタイミング

HuTime.Drawingの他のメソッドと同様に、レイヤの再描画に合わせて、HuTime.Layer.processBeforeRedrawメソッド（再描画の前）、または、HuTime.Layer.processAfterRedrawメソッド（再描画の後）の中に表示の処理を記述する。表示の順序に関する年表レイヤのレコード、グラフレイヤのプロット、レイヤ上のオブジェクトなどとの関係も、他の図形と同様である。

画像表示の例（下記サンプルコード）。

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

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

４．パスの利用

他の図形と同様に、パスを描画するメソッドを、マウスが図形の中にあるかどうかを判断する場合などに利用できる。下記のサンプルコードでは、図形内にマウスが入ると、画像が180度回転する。

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

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

マニュアルの目次へ戻る