1.概要

データ、図形、文字や画像などは、レイヤ上に表示される。また、図形などのオブジェクトをオブジェクトツリーの一部としてレイヤに収容することもできる。タイムライン表示、グラフ表示、目盛表示など、目的に応じて、さまざまな種類のレイヤがある。パネル上では、複数のレイヤを組み合わせて利用することができる。

2.オブジェクトの生成

コンストラクタ

HuTime.Layer([vBreadth [, vMarginTop [, vMarginBottom [, vTop, vBottom]]]])

vBreadth
型:数値
既定値:null
v軸方向の長さ(単位:px)。
vMarginTop
型:数値
既定値:null
v軸方向の上(タテ表示の場合は左)の余白(単位:px)。
vMarginBottom
型:数値
既定値:null
v軸方向の下(タテ表示の場合は右)の余白(単位:px)。
vTop
型:数値
既定値:0
v軸方向の上端(タテ表示の場合は左端)のv値。
vBottom
型:数値
既定値:100
v軸方向の下端(タテ表示の場合は右端)のv値。

3.レイヤの追加

レイヤは、パネルオブジェクトのappendLayerメソッドにより追加される。

pnl.appendLayer(layer)

pnl
型:HuTime.PanelBase
レイヤを追加するパネルオブジェクト。
layer
型:HuTime.Layer
パネルに追加するレイヤ。

サンプルコード実行例はこちら)。パネルオブジェクト(変数pnl)に2つのレイヤを(変数lyr1およびlyr2)を追加している。後述の書式の設定により、レイヤの背景としグラデーションや写真が設定されている。

<!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(250);
    ht.appendPanelCollection(pnls, document.getElementById("timeline"));
    var pnl = new HuTime.TilePanel(200);
    pnls.appendPanel(pnl);

    var lyr1 = new HuTime.Layer(150);
    var lyr2 = new HuTime.Layer(150, null, 0);
    pnl.appendLayer(lyr1);
    pnl.appendLayer(lyr2);

    pnls.style.backgroundColor = "pink";
    pnl.style.backgroundColor = "lightyellow";
    lyr1.style.backgroundImage = "url('img/bkSample.jpg')";
    lyr2.style.background = "linear-gradient(to bottom, Azure 0%, SkyBlue 100%)";

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

4.表示位置とサイズの設定

レイヤのt軸方向の表示幅は、パネルコレクションに合わせて設定される。v軸方向の表示位置と表示幅は、vBreadth, vMarginTop, vMarginBottomの各プロパティにより設定する。各プロパティの詳細は、コンストラクタの引数と同様である。「3.レイヤの追加」で示した例では、lyr1(背景が写真)はvBreadthのみを設定しているため、パネルの上端に寄せられて表示されている。一方lyr2(背景が青のグラデーション)は、vBreadthを設定し、vMarginBottomを0としている。このため、下端に寄せられて表示されている。結果として、2つのレイヤの一部が重なり、写真を背景とするレイヤの上部が、グラデーションを背景とするレイヤから見えている状態になっている。

ヨコ表示の場合の表示位置

v axis for holizontal display mode

ヨコ表示では、v軸は高さ方向となり、表示位置とサイズは高さに方向について設定することになる。基本的に、3つプロパティのうち2つを指定し、残りをnull(またはundefined)にする。nullに設定されたプロパティは、パネルの高さ(currentVBreadth)に応じて、自動的に設定される。

vMarginBottomとvBreadthに値を設定し、vMarginTopをnullとした場合は、上の余白がパネルの高さ(currentVBreadth)に応じて伸び縮みする。vMarginBottomを0に設定した場合は、パネルのの下端に張り付いた表示になる。

v axis for holizontal display mode

vMarginTopとvBreadthに値を設定し、vMarginBottomをnullとした場合は、下の余白がパネルの高さ(currentVBreadth)に応じて伸び縮みする。vMarginTopを0に設定した場合は、パネルの上端に張り付いた表示になる。

v axis for holizontal display mode

vMarginTopとvMarginBottomに値を設定し、vBreadthをnullとした場合は、レイヤの高さがパネルの高さ(currentVBreadth)に応じて伸び縮みする。vMarginTopとvMarginBottomを両方とも0に設定した場合は、レイヤが常にパネルの全面に表示される。

v axis for holizontal display mode

基本的に、3つプロパティのうち2つを指定し、残りをnull(またはundefined)にするが、それ以外の設定をした場合の各プロパティの値は下記のとおりとなる。

設定されているプロパティ vMarginTop vBreadth vMarginBottom
3つとも設定なし 0 null 0
vMarginTopのみ 設定値 null 0
vBredthのみ 0 設定値 null
vMarginBottomのみ 0 null 設定値
vMarginTopとvBredth 設定値 設定値 null
vBredthとvMarginBottom null 設定値 設定値
vMarginTopとvMarginBottom 設定値 null 設定値
3つとも設定 設定値 null 設定値

タテ表示の場合の表示位置

vMarginTopを右余白、vMarginBottomを左余白と読み替えて使用する以外は、ヨコ方向の場合と同じである。ただし、vMarginForXを設定することで、上記の読み替えを逆にすることができる。

v axis for vertical display mode

レイヤの重ね順

パネル内でのレイヤの重ね順は、各レイヤのzIndexプロパティにより設定し、値が大きいほど上に表示される。

zIndex
型:数値
既定値:0
パネル内でのレイヤの重ね順の設定。値が大きいほど、上(前面)に表示される。

5.書式設定

styleプロパティにより、レイヤの書式を設定することができる。styleプロパティの設定内容は、レイヤが持つ表示用のDOM要素(div要素)のstyle属性に反映される。「3.レイヤの追加」で示した例では、lyr1の背景画像として写真を、また、lyr2の背景として青のグラデーションを指定している。なお、既定では、レイヤの背景は設定されていない。このため、パネルの背景が透けて表示される。

6.その他の主要なプロパティとメソッド

レイヤでは、パネル内でのレイヤの挙動を設定するためのプロパティがある。

プロパティ

id
型:文字列
既定値:null
オブジェクトを一意に識別するためのID。
name
型:文字列
既定値:null
オブジェクトの名称。
visible
型:真偽値
既定値:true
オブジェクトの可視/不可視の設定。trueの場合に可視。
mouseEventCapture
型:数値
既定値:3
マウスイベントをキャプチャする範囲。0:なし, 1:子を除く, 2:子のみ, 3:全て。
fixedLayer
型:真偽値
既定値:false
固定レイヤとして扱うかどうかを設定する。trueの場合、固定レイヤとなり、マウスのドラッグやホイール操作で移動や拡大・縮小されない。
vFotX
型:数値
既定値:0
v軸がヨコの時の値の適用(0: vTopが左の値, 1: vBottomが左の値)。タテ・ヨコを切り替えて使う場合以外は設定不要。

メソッド

redraw()

レイヤの再描画。図形などのレイヤ上のオブジェクトを含む場合は、それらも再帰的に再描画される。

返値
なし

clear()

レイヤの表示内容の消去。

返値
なし

processBeforeRedraw(layer)

再描画の前に行われる処理。既定では空の関数が定義されている。再定義することにより、図形の描画など、レイヤの内容が再描画される前に何らかの処理を行うことができる。

layer
型:HuTime.Layer
再描画が行われるレイヤオブジェクト。

processAfterRedraw(layer)

再描画の後に行われる処理。既定では空の関数が定義されている。再定義することにより、図形の描画など、レイヤの内容が再描画される後に何らかの処理を行うことができる。

layer
型:HuTime.Layer
再描画が行われるレイヤオブジェクト。

マニュアルの目次へ戻る