１．概要
図形の色や線の太さなどの書式は、HuTime.FigureStyleで設定する。また、HuTime.FigureStyle.applyStyleを再定義することにより、標準ではサポートされていない独自の書式を指定することができる。
２．標準の書式指定
HuTime.FigureStyleでは、以下の書式が指定できる。
- lineWidth
- 型：数値
- 既定値：1
- 線の幅（単位：px）。0以下の場合、線は描画されない。最大値は999。
- lineColor
- 型：文字列
- 既定値：null
- 線の色。CSSでの色指定と同様の方法で指定する。色名、カラーコード、rgb()、rgba()が利用可能。nullの場合は、線は描画されない。
- lineDash
- 型：数値の配列
- 既定値：[]（空の配列）
- 破線の設定。破線の線と空白の長さ（単位：px）を配列として指定する。各要素の最大値は999。
- fillColor
- 型：文字列
- 既定値：null
- 塗りの色。CSSでの色指定と同様の方法で指定する。色名、カラーコード、rgb()、rgba()が利用可能。nullの場合は、塗りは処理されない（透明になる）。
- alpha
- 型：数値
- 既定値：1.0
- 透過率。0.0で完全に透明、1.0で完全に不透明になる。図形全体（塗りおよび線）が対象。
上記のうち、FigureStyleのコンストラクタでは、塗りの色、および、線の幅と色を指定することができる。指定が省略された場合は、既定値が適用される。
コンストラクタ
HuTime.FigureStyle([fillColor [, lineColor [, lineWidth]]])
- fillColor
- 型：文字列
- 塗り（図形内部）の色。CSSでの色指定と同様の方法で指定する。
- lineColor
- 型：文字列
- 線（図形の縁）の色。CSSでの色指定と同様の方法で指定する。
- lineWidth
- 型：数値
- 線（図形の縁）の幅（単位：px）。
図形描画の例（下記サンプルコード）。円の縁は破線として描画されている。三角形はalphaの設定により半透明にされている。また正方形は、縁は不透明であるが、内部はfillColorをrgba()で指定したことにより半透明になっている。
サンプルコード（実行例はこちら）。
<!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>
３．独自の書式設定
以下のHuTime.FigureStyleの書式適用のメソッドを再定義することにより、独自の書式を設定することができる。alphaプロパティは図形全体に対して適用されるため、塗り（applyFillStyle）および線(applyLineStyle）の書式適用のメソッドを再定義しても、既定の処理が適用される。alphaプロパティの処理も含め、図形全体について独自の書式を設定するには、applyStyleを再定義する。独自に設定した書式を元に戻す場合は、それぞれ、既定のメソッドで再定義する（nullで再定義した場合も既定のメソッドに置き換わる）。
applyFillStyle(ctx)
塗り（図形の内部）の書式の適用。再定義することにより、独自の書式を定義できる。既定の処理に戻す場合は、HuTime.FigureStyle.prototype.defaultFillApplyStyleを設定する。
- ctx
- 型：CanvasRenderingContext2D
- 対象となる図形のパスを含むcanvas要素のコンテキスト。
applyLineStyle(ctx)
線（図形の縁）の書式の適用。再定義することにより、独自の書式を定義できる。既定の処理に戻す場合は、HuTime.FigureStyle.prototype.defaultLineApplyStyleを設定する。
- ctx
- 型：CanvasRenderingContext2D
- 対象となる図形のパスを含むcanvas要素のコンテキスト。
applyStyle(ctx)
塗りと線、および透過率を含む、全ての書式の適用。再定義することにより、独自の書式を定義できる。既定の処理に戻す場合は、HuTime.FigureStyle.prototype.defaultApplyStyleを設定する。
- ctx
- 型：CanvasRenderingContext2D
- 対象となる図形のパスを含むcanvas要素のコンテキスト。
独自の書式設定を使った図形描画の例（下記サンプルコード）。FigureStyleではサポートされていないグラデーションをapplyFillStyleメソッドを再定義することにより実現している。
サンプルコード（実行例はこちら）。
<!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>
