レイヤ上のオブジェクト - HuTime API マニュアル

１．概要

図形、画像、文字列をレイヤ上のオブジェクトとして扱うことができる。レイヤ上のオブジェクトは、HuTime.OnLayerObjectBaseクラスから派生したクラスから生成される。HuTime.Drawingの各メソッドで表示されたものとは異なり、1つのオブジェクトとして振る舞うため、イベントの受け取りなどを行うことが可能となる。少数であればレイヤ上のオブジェクトが便利であるが、大量に用いる場合は、リソース消費の点から、HuTime.Drawingの各メソッドを利用することが望ましい。

機能	レイヤ上のオブジェクト	HuTime.Drawingによる描画
再描画	redrawメソッドにより、オブジェクト単位で行う。	再度、HuTime.Drawingの表示メソッドを実行する。もしくは、レイヤのredrawメソッドを実行する。
再描画のタイミング	レイヤに追加されることで、自動的に再描画が設定される。オブジェクトに対して、processBeforeRedrawまたはprocessAfterRedrawを定義することも可能。	レイヤのprocessBeforeRedrawまたはprocessAfterRedrawに手動で設定する。
画面上の重ね順	zIndexプロパティで設定。	描画順により設定。
可視・不可視の制御	visibleプロパティで設定。	既定の仕組みはない。レイヤのprocessBeforeRedrawまたはprocessAfterRedrawに記述された表示動作を何らかの形で制御。
イベントの受け取り	直接受け取れる。全体のイベントフローに組み込まれる。	直接は受け取れない。いったんレイヤで受け取って、判断する。
リソースの消費	1つのオブジェクトとして一定量を消費。	少ない。

レイヤ上のオブジェクト（OnLayerObjectクラスの派生クラス）の一覧。OnLayerObjectBaseは抽象クラスとして定義されており、実際には使用しない。

２．レイヤへのオブジェクトの種類とコンストラクタ

HuTime.Drawingのメソッドによる描画とは異なり、コンストラクタで描画対象のレイヤやcanvasは指定しない。これらは、オブジェクトをレイヤへの追加する際に行う。各オブジェクトのコンストラクタで共通の引数は下記のとおり。

style: 型：FigureStyleオブジェクト（HuTime.Stringでは、StringStyleオブジェクト）; 図形や文字列の書式を指定する。
rotate: 型：数値; 図形を回転させる角度（単位:度）。指定は任意で、省略した場合は、0が指定される。回転の中心は、その図形の中心となる。円オブジェクトなど、いくつかの図形では指定できない。

線（ポリライン）

HuTime.Line(style, positions)

線のノードの位置をPositionオブジェクトの配列として指定する。ポリゴンとは異なり、パスを閉じない。回転(rotate)は指定できない。

positions: 型：HuTime.PositionBaseの配列; 線のノードの位置の集合。

多角形（ポリゴン）

HuTime.Polygon(style, positions)

多角形の頂点の位置をPositionオブジェクトの配列として指定する。配列の最後の位置と最初の位置を接続し、パスを閉じる。回転(rotate)は指定できない。

positions: 型：HuTime.PositionBaseの配列; 多角形の頂点の位置の集合。

正方形

HuTime.Square(style, position, width [, rotate])

位置は正方形の中心をPositionオブジェクトで指定し、大きさは幅（辺の長さ）をpx単位で指定する。回転（rotate）に45を指定すると、ひし形になる。

position: 型：HuTime.PositionBase; 正方形の中心位置。
width: 型：数値; 正方形の幅（単位：px）。辺の長さに相当。

矩形

HuTime.Rect(style, position1, position2 [, rotate])

位置と大きさは、矩形の対角線をなす2つの頂点の位置をPositionオブジェクトで指定する。

position1: 型：HuTime.PositionBase; 矩形の対角線をなす一方の頂点の位置。
position2: 型：HuTime.PositionBase; 矩形の対角線をなす他方の頂点の位置。

円

HuTime.Circle(style, position, width)

位置は円の中心をPositionオブジェクトで指定し、大きさは幅（直径）をpx単位で指定する。回転(rotate)は指定できない。

position: 型：HuTime.PositionBase; 円の中心位置。
width: 型：数値; 図形の幅（単位：px）。円の直径に相当。

円弧

HuTime.Arc(style, position, radius, startAngle, endAngle)

位置は円弧を含む円の中心をPositionオブジェクトで指定し、大きさと形状は、その円の半径（単位：px）、および、開始・終了位置の角度（単位：度）で指定する。回転(rotate)は指定できない。

position: 型：HuTime.PositionBase; 円弧を含む円の中心位置。
radius: 型：数値; 円弧を含む円の半径（単位：px）。
startAngle: 型：数値; 円弧の開始角度（単位：度）。
endAngle: 型：数値; 円弧の終了角度（単位：度）。

扇形

HuTime.Pie(style, position, radius, startAngle, endAngle)

位置は扇形を含む円の中心をPositionオブジェクトで指定し、大きさと形状は、その円の半径（単位：px）、および、開始・終了位置の角度（単位：度）で指定する。回転(rotate)は指定できない。

position: 型：HuTime.PositionBase; 扇形を含む円の中心位置。
radius: 型：数値; 扇形を含む円の半径（単位：px）。
startAngle: 型：数値; 扇形の開始角度（単位：度）。
endAngle: 型：数値; 扇形の終了角度（単位：度）。

三角形

HuTime.Triangle(style, position, width [, rotate])

位置は三角形の中心（重心）をPositionオブジェクトで指定し、大きさは幅（底辺の長さ）をpx単位で指定する。

position: 型：HuTime.PositionBase; 三角形の中心（重心）位置。
width: 型：数値; 三角形の幅（単位：px）。底辺の長さに相当。

３．レイヤ上のオブジェクトの主なプロパティとメソッド

プロパティ

id: 型：文字列; 既定値：null; オブジェクトを一意に識別するためのID。
name: 型：文字列; 既定値：null; オブジェクトの名称。
visible: 型：真偽値; 既定値：true; オブジェクトの可視/不可視の設定。trueの場合に可視。
zIndex: 型：数値; 既定値：0; オブジェクトの重ね順。値が大きいほど、上に表示される。

メソッド

redraw()

オブジェクトを再描画する。

返値: なし。

addEventListener(type, handler [, useCapture])

イベント処理の追加。

返値: なし。
type: 型：文字列; イベントの種類を示す文字列。
handler: 型：関数（function(ev)）; イベント処理を行う関数。引数evはイベントオブジェクト（型：HuTime.Event）
useCapture: 型：真偽値; イベントのどのフェーズを利用するかを設定。trueの場合はキャプチャフェーズ、falseの場合はバブリングフェーズ。省略された場合は、false（バブリングフェーズ）が設定される。

dispatchEvent(ev)

レイヤ上のオブジェクトからイベントの発火させる。

返値: なし。
ev: 型：HuTime.Eventオブジェクト; 発火させるイベントのイベントオブジェクト。ev.targetには発火元のレイヤ上のオブジェクトが設定される。

４．レイヤへのオブジェクトの追加

レイヤ上にオブジェクトを追加するには、そのレイヤのappendObjectメソッドを用いる。また、レイヤ上からオブジェクトを削除するには、そのレイヤのremoveObjectメソッドを用いる。オブジェクトは、1つのレイヤに1つだけ配置可能である。このため、既にいずれかのレイヤに配置されているオブジェクトにたいしてappendObjectを実行すると、既に属しているレイヤからは削除される。

layer.appendObject(obj [, canvas])

layer.removeObject(obj)

layer: 型：HuTime.Layer; オブジェクトを追加、または削除するレイヤ。
obj: 型：HuTime.OnLayerObjectBase; 追加、または削除するオブジェクト。
canvas: 型：canvas要素; 図形を描画するcanvas。指定は任意で、省略した場合は、layer.canvasが指定される。年表レイヤやグラフレイヤなど、複数のcanvas要素を持つLayerオブジェクトが対象の場合に使用。

レイヤ上のオブジェクトの表示例（下記サンプルコード）。

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

<!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 objCircle = new HuTime.Circle(
        new HuTime.FigureStyle("blue"),
        new HuTime.TVPosition(100, 50),
        50
    );
    lyr.appendObject(objCircle);

    var objImage = new HuTime.Image(
        new HuTime.FigureStyle(),
        new HuTime.TVPosition(50, 30),
        "http://web.hutime.org/manual/img/ImageSample.jpg",
        100
    );
    lyr.appendObject(objImage);

    var objString = new HuTime.String(
        new HuTime.StringStyle(20, "red"),
        new HuTime.TVPosition(120, 80),
        "Hello World!"
    );
    lyr.appendObject(objString);

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

５．レイヤ上のオブジェクトのイベント処理

レイヤ上のオブジェクトでは、イベントを直接受け取り、それに対応する動作を定義することができる。イベントの動作は、addEventListenerメソッドにより追加する。下記のサンプルコードでは、レイヤ上のオブジェクトとして表示された灰色の矩形をクリックすると、円の色が変わる。

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

<!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 objCircle = new HuTime.Circle(
        new HuTime.FigureStyle("blue"),
        new HuTime.TVPosition(50, 50),
        100
    );
    lyr.appendObject(objCircle);

    var objButton = new HuTime.Rect(
        new HuTime.FigureStyle("lightgray"),
        new HuTime.TVPosition(100, 40), new HuTime.TVPosition(140, 60)
    );
    lyr.appendObject(objButton);
    objButton.addEventListener("click", function(ev) {
        if (objCircle.style.fillColor == "blue")
            objCircle.style.fillColor = "red";
        else
            objCircle.style.fillColor = "blue";
        objCircle.redraw();
    });

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

マニュアルの目次へ戻る