/** @language japanese
* LGraphics クラスには、ベクターシェイプの作成に使用できる一連のメソッドがあります。描画をサポートする表示オブジェクトには、LSprite および LShape オブジェクトがあります。これらの各クラスには、LGraphics オブジェクトである graphics プロパティがあります。
* 以下は、簡単に使用できるように用意されているヘルパー関数の一例です。drawRect()、drawRoundRect()、drawArc()、および drawEllipse()。
* @class LGraphics
* @extends LObject
* @constructor
* @example
* LInit(50, "legend", 800, 480, main);
* function main () {
* var shape = new LShape();
* addChild(shape);
* shape.graphics.drawRect(2, "#ff0000", [10, 10, 50, 100], true, "#880088");
* }
* @examplelink <p><a href="../../../api/LGraphics/index.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.0.0
* @public
*/
var LGraphics = (function () {
function LGraphics(){
var s = this;
LExtends(s, LObject, []);
s.type = "LGraphics";
s.color = "#000000";
s.alpha = 1;
s.bitmap = null;
s.setList = new Array();
s.showList = new Array();
}
var p = {
ll_show : function () {
var s = this, k, l = s.setList.length;
if (l == 0) {
return;
}
for (k = 0; k < l; k++) {
s.setList[k]();
}
},
clone : function () {
var s = this, a = new LGraphics(), i, l, c;
a.color = s.color;
a.alpha = s.alpha;
a.bitmap = s.bitmap;
for (i = 0, l = s.setList.length; i < l; i++) {
c = s.setList[i];
a.setList.push(c);
}
for (i = 0, l = s.showList.length; i < l; i++) {
c = s.showList[i];
a.showList.push(c);
}
return a;
},
/** @language japanese
* ユーザーエージェントが線の端に置く終端のタイプを定義します。
* @method lineCap
* @param {String} value butt, round, square の 3 つの値が妥当な値として利用可能です。
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.beginPath();
* shape.graphics.lineWidth(10);
* shape.graphics.lineCap("butt");
* shape.graphics.moveTo(20,20);
* shape.graphics.lineTo(200,20);
* shape.graphics.stroke();
* shape.graphics.beginPath();
* shape.graphics.lineCap("round");
* shape.graphics.moveTo(20,40);
* shape.graphics.lineTo(200,40);
* shape.graphics.stroke();
* shape.graphics.beginPath();
* shape.graphics.lineCap("square");
* shape.graphics.moveTo(20,60);
* shape.graphics.lineTo(200,60);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/lineCap.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.8.8
* @public
*/
lineCap : function (t) {
var s = this;
s.setList.push(function () {
LGlobal.canvas.lineCap = t;
});
},
/** @language japanese
* ユーザーエージェントが 2 直線の接続する角をどう扱うかを考慮するタイプを定義します。
* @method lineJoin
* @param {String} value bevel, round, miter の3タイプの値をセットすることができます。
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.beginPath();
* shape.graphics.lineWidth(10);
* shape.graphics.lineJoin("round");
* shape.graphics.moveTo(20,20);
* shape.graphics.lineTo(100,50);
* shape.graphics.lineTo(20,100);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/lineJoin.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.8.8
* @public
*/
lineJoin : function (t) {
var s = this;
s.setList.push(function () {
LGlobal.canvas.lineJoin = t;
});
},
/** @language japanese
* 座標系の単位で、線の幅を与えます。
* @method lineWidth
* @param {float} value 線の幅。
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.beginPath();
* shape.graphics.lineWidth(2);
* shape.graphics.moveTo(20,20);
* shape.graphics.lineTo(200,50);
* shape.graphics.stroke();
* shape.graphics.beginPath();
* shape.graphics.lineWidth(10);
* shape.graphics.moveTo(20,40);
* shape.graphics.lineTo(200,40);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/lineWidth.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.0.0
* @public
*/
lineWidth : function (t) {
var s = this;
s.setList.push(function () {
LGlobal.canvas.lineWidth = t;
});
},
/** @language japanese
* 形状の輪郭に使う色やスタイルを表します。
* @method strokeStyle
* @param {String} value color|gradient|pattern。
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.strokeStyle("#FF0000");
* shape.graphics.lineWidth(5);
* shape.graphics.lineJoin("round");
* shape.graphics.rect(20,20,150,100);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/stroke_strokeStyle.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.0.0
* @public
*/
strokeStyle : function (co) {
var s = this;
s.setList.push(function () {
LGlobal.canvas.strokeStyle = co;
});
},
/** @language japanese
* 現在のストローク・スタイルを使って、サブパスに線を引きます。
* @method stroke
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.strokeStyle("#FF0000");
* shape.graphics.lineWidth(5);
* shape.graphics.lineJoin("round");
* shape.graphics.rect(20,20,150,100);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/stroke_strokeStyle.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.0.0
* @public
*/
stroke : function () {
var s = this;
s.setList.push(function () {
LGlobal.canvas.stroke();
});
},
/** @language japanese
* サブパスのリストを空にして、コンテキストのサブパスが 0 個となるようにしなければいけません。
* @method beginPath
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.beginPath();
* shape.graphics.lineWidth(5);
* shape.graphics.strokeStyle("#FF0000");
* shape.graphics.moveTo(0,75);
* shape.graphics.lineTo(250,75);
* shape.graphics.stroke();
* shape.graphics.beginPath();
* shape.graphics.strokeStyle("#00FF00");
* shape.graphics.moveTo(50,0);
* shape.graphics.lineTo(150,130);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/beginPath.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.0.0
* @public
*/
beginPath : function () {
var s = this;
s.setList.push(function () {
LGlobal.canvas.beginPath();
});
},
/** @language japanese
* コンテキストにサブパスがなければ何もしてはいけません。コンテキストにサブパスがあれば、最後のサブパスに、閉じられたことが記録され、前のサブパスの始点と同じ地点を始点とする新たなサブパスを生成し、最後に、そのパスに、この新たなサブパスを追加しなければいけません。
* @method closePath
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.beginPath();
* shape.graphics.moveTo(20,20);
* shape.graphics.lineTo(20,100);
* shape.graphics.lineTo(70,100);
* shape.graphics.closePath();
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/closePath.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.0.0
* @public
*/
closePath : function () {
var s = this;
s.setList.push(function () {
LGlobal.canvas.closePath();
});
},
/** @language japanese
* 指定の地点で新規のサブパスを生成します。
* @method moveTo
* @param {float} x 指定の地点の座標x
* @param {float} y 指定の地点の座標y
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.beginPath();
* shape.graphics.moveTo(20,20);
* shape.graphics.lineTo(70,100);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/moveTo_lineTo.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.0.0
* @public
*/
moveTo : function (x, y) {
var s = this;
s.setList.push(function () {
LGlobal.canvas.moveTo(x, y);
});
s.showList.push({type : LShape.POINT, arg : [x, y]});
},
/** @language japanese
* 現在のパスに指定の地点を加え、直前の地点を直線で接続します。
* @method lineTo
* @param {float} x 指定の地点の座標x
* @param {float} y 指定の地点の座標y
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.beginPath();
* shape.graphics.moveTo(20,20);
* shape.graphics.lineTo(70,100);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/moveTo_lineTo.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.0.0
* @public
*/
lineTo : function (x, y) {
var s = this;
s.setList.push(function () {
LGlobal.canvas.lineTo(x, y);
});
s.showList.push({type : LShape.POINT, arg : [x, y]});
},
/** @language japanese
* パスに、指定の矩形を表す閉じたサブパスを新規に追加します。
* @method rect
* @param {float} x 矩形の左上の座標x
* @param {float} y 矩形の左上の座標y
* @param {float} width 矩形の横幅
* @param {float} height 矩形の縦幅
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.rect(20,20,150,100);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/rect.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.0.0
* @public
*/
rect : function (x, y, w, h) {
var s = this;
s.setList.push(function () {
LGlobal.canvas.rect(x, y, w, h);
});
s.showList.push({type : LShape.RECT, arg : [x, y, w, h]});
},
/** @language japanese
* 値をセットして、塗りつぶしスタイルを変更することができます。
* @method fillStyle
* @param {String} style CSSカラーを含んだ文字列か、または、CanvasGradient や CanvasPattern オブジェクトを指定することができます。不正な値は無視されます。
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.fillStyle("#FF0000");
* shape.graphics.rect(20,20,150,100);
* shape.graphics.fill();
* @examplelink <p><a href="../../../api/LGraphics/fillStyle_fill.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.0.0
* @public
*/
fillStyle : function (co) {
var s = this;
s.setList.push(function () {
LGlobal.canvas.fillStyle = co;
});
},
/** @language japanese
* 現在の塗りつぶしスタイルで、サブパスを塗りつぶします。
* @method fill
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.fillStyle("#FF0000");
* shape.graphics.rect(20,20,150,100);
* shape.graphics.fill();
* @examplelink <p><a href="../../../api/LGraphics/fillStyle_fill.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.0.0
* @public
*/
fill : function () {
var s = this;
s.setList.push(function () {
LGlobal.canvas.fill();
});
},
/** @language japanese
* サブパスにいくつかの地点を追加します。それらの地点は、引数によって描かれる円周によって描かれる円弧が、指定の開始角度ではじまり、指定の終了角度で終わり、指定の方向に行き、パスに加えられます。そして、直線で直前の地点に接続されます。
* @method arc
* @param {float} x 中心の座標x。
* @param {float} y 中心の座標y。
* @param {float} radius 半径。
* @param {float} startAngle 沿円周に沿って、x 軸の正方向から時計回りにラジアンで計測した開始地点
* @param {float} endAngle 沿円周に沿って、x 軸の正方向から時計回りにラジアンで計測した終了地点
* @param {Boolean} counterclockwise 引数が true なら反時計回りとなり、そうでなければ時計回りとなります。
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.arc(100,75,50,0,2*Math.PI);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/arc.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.0.0
* @public
*/
arc : function (x, y, r, sa, ea, aw) {
var s = this;
s.setList.push(function () {
LGlobal.canvas.arc(x, y, r, sa, ea, aw);
});
s.showList.push({type : LShape.ARC, arg : sa});
},
/** @language japanese
* 線のスタイルを設定する。
* @method lineStyle
* @param {int} thickness 線の太さをポイント単位で示す整数。
* @param {String} color 線の色
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.lineStyle(5,"#FF0000");
* shape.graphics.rect(20,20,150,100);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/lineStyle.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.0.0
* @public
*/
lineStyle : function (tn, co) {
var s = this, c;
if (co == null) {
co = s.color;
}
s.color = co;
s.setList.push(function () {
c = LGlobal.canvas;
c.lineWidth = tn;
c.strokeStyle = co;
});
},
/** @language japanese
* 全部のベクターシェイプをクリアする。
* @method clear
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.rect(20,20,150,100);
* shape.graphics.clear();
* shape.graphics.arc(100,75,50,0,2*Math.PI);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/clear.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.0.0
* @public
*/
clear : function () {
var s = this;
s.bitmap = null;
s.setList.length = 0;
s.showList.length = 0;
},
/** @language japanese
* 描画領域をビットマップイメージで塗りつぶします。
* @method beginBitmapFill
* @param {LBitmapData} bitmap 表示されるビットを含む透明または不透明ビットマップイメージです。
* @example
* LInit(50, "legend", 800, 480, main);
* function main () {
* var loader = new LLoader();
* loader.addEventListener(LEvent.COMPLETE, loadBitmapdata);
* loader.load("face.jpg", "bitmapData");
* }
* function loadBitmapdata (event) {
* var bitmapdata = new LBitmapData(event.currentTarget);
* var backLayer;
* backLayer = new LSprite();
* addChild(backLayer);
* backLayer.graphics.beginBitmapFill(bitmapdata);
* backLayer.graphics.drawArc(1,"#000000",[150,50,50,0,Math.PI*2]);
* backLayer = new LSprite();
* addChild(backLayer);
* backLayer.graphics.beginBitmapFill(bitmapdata);
* backLayer.graphics.drawRect(1,"#000000",[10,100,70,100]);
* backLayer = new LSprite();
* addChild(backLayer);
* backLayer.graphics.beginBitmapFill(bitmapdata);
* backLayer.graphics.drawVertices(1,"#000000",[[120,100],[100,200],[200,150]]);
* }
* @examplelink <p><a href="../../../api/LGraphics/beginBitmapFill.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.5.0
* @public
*/
beginBitmapFill : function (b) {
var s = this;
s.setList.push(function () {
s.bitmap = b;
});
},
/** @language japanese
* 楕円を描画します。
* @method drawEllipse
* @param {int} thickness 線の太さをポイント単位で示す整数。
* @param {String} color 線の色
* @param {Array} param [x,y,width,height]:[親表示オブジェクトの基準点からの楕円の境界ボックスの左上の相対 x 座標（ピクセル単位）です,親表示オブジェクトの基準点に対して相対的な、楕円の境界ボックスの左上の y 座標（ピクセル単位）です,楕円の幅（ピクセル単位）,楕円の高さ（ピクセル単位）]。
* @param {Boolean} isFill サブパスを塗りつぶするかどうか
* @param {String} fillColor サブパスを塗りつぶする色
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.drawEllipse(2, "#ff0000", [10, 10, 100, 50]);
* shape.graphics.drawEllipse(1, "#000000", [10, 100, 50, 100], true, "#880088");
* @examplelink <p><a href="../../../api/LGraphics/drawEllipse.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.8.8
* @public
*/
drawEllipse : function (tn, lco, pa, isf, co) {
var s = this;
s.setList.push(function () {
var c, x, y, w, h, k, ox, oy, xe, ye, xm, ym;
c = LGlobal.canvas;
c.beginPath();
k = 0.5522848;
x = pa[0];
y = pa[1];
w = pa[2];
h = pa[3];
ox = (w / 2) * k;
oy = (h / 2) * k;
xe = x + w;
ye = y + h;
xm = x + w / 2;
ym = y + h / 2;
c.moveTo(x, ym);
c.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
c.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
c.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
c.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
if (s.bitmap) {
c.save();
c.clip();
c.drawImage(s.bitmap.image,
s.bitmap.x, s.bitmap.y, s.bitmap.width, s.bitmap.height,
0, 0, s.bitmap.width, s.bitmap.height);
c.restore();
s.bitmap = null;
return;
}
if (isf) {
c.fillStyle = co;
c.fill();
}
if (tn > 0) {
c.lineWidth = tn;
c.strokeStyle = lco;
c.stroke();
}
});
s.showList.push({type : LShape.RECT, arg : pa});
},
/** @language japanese
* 円か扇形を描画します。
* @method drawArc
* @param {int} thickness 線の太さをポイント単位で示す整数。
* @param {String} color 線の色
* @param {Array} param [x,y,r,sAngle,eAngle,counterclockwise,isSector]:[中心の座標x,中心の座標y,半径,開始地点,終了地点,反時計回りにするか,扇形にするか]。
* @param {Boolean} isFill サブパスを塗りつぶするかどうか
* @param {String} fillColor サブパスを塗りつぶする色
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.drawArc(2, "#ff0000", [50, 50, 40, 0, 2*Math.PI]);
* shape.graphics.drawArc(1, "#000000", [50, 150, 40, 0, 2*Math.PI], true, "#880088");
* shape.graphics.drawArc(2, "#ff0000", [150, 50, 40, 0, 50*Math.PI/180,false,true]);
* shape.graphics.drawArc(1, "#000000", [150, 150, 40, 0, 230*Math.PI/180,false,true], true, "#880088");
* @examplelink <p><a href="../../../api/LGraphics/drawArc.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.0.0
* @public
*/
drawArc : function (tn, lco, pa, isf, co) {
var s = this;
s.setList.push(function () {
var c = LGlobal.canvas;
c.beginPath();
if (pa.length > 6 && pa[6]) {
c.moveTo(pa[0], pa[1]);
}
c.arc(pa[0], pa[1], pa[2], pa[3], pa[4], pa[5]);
if (pa.length > 6 && pa[6]) {
c.lineTo(pa[0], pa[1]);
}
if (s.bitmap) {
c.save();
c.clip();
c.drawImage(s.bitmap.image,
s.bitmap.x, s.bitmap.y, s.bitmap.width, s.bitmap.height,
0, 0, s.bitmap.width, s.bitmap.height);
c.restore();
s.bitmap = null;
return;
}
if (isf) {
c.fillStyle = co;
c.fill();
}
if (tn > 0) {
c.lineWidth = tn;
c.strokeStyle = lco;
c.stroke();
}
});
s.showList.push({type : LShape.ARC, arg : pa});
},
/** @language japanese
* 矩形を描画します。
* @method drawRect
* @param {int} thickness 線の太さをポイント単位で示す整数。
* @param {String} color 線の色
* @param {Array} param [x,y,width,height]:[親表示オブジェクトの基準点からの相対的な水平座標を示す数値,親表示オブジェクトの基準点からの相対的な垂直座標を示す数値,矩形の幅,矩形の高さ]。
* @param {Boolean} isFill サブパスを塗りつぶするかどうか
* @param {String} fillColor サブパスを塗りつぶする色
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.drawRect(2, "#ff0000", [10, 10, 100, 50]);
* shape.graphics.drawRect(1, "#000000", [10, 100, 50, 100], true, "#880088");
* @examplelink <p><a href="../../../api/LGraphics/drawRect.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.0.0
* @public
*/
drawRect : function (tn, lco, pa, isf, co) {
var s = this;
s.setList.push(function () {
var c = LGlobal.canvas;
c.beginPath();
c.rect(pa[0], pa[1], pa[2], pa[3]);
c.closePath();
if (s.bitmap) {
c.save();
c.clip();
c.drawImage(s.bitmap.image,
s.bitmap.x, s.bitmap.y,
s.bitmap.width, s.bitmap.height,
0, 0,
s.bitmap.width, s.bitmap.height);
c.restore();
s.bitmap = null;
return;
}
if (isf) {
c.fillStyle = co;
c.fill();
}
if (tn > 0) {
c.lineWidth = tn;
c.strokeStyle = lco;
c.stroke();
}
});
s.showList.push({type : LShape.RECT, arg : pa});
},
/** @language japanese
* 角丸矩形を描画します。
* @method drawRoundRect
* @param {int} thickness 線の太さをポイント単位で示す整数。
* @param {String} color 線の色
* @param {Array} param [x,y,width,height,radius]:[親表示オブジェクトの基準点からの相対的な水平座標を示す数値,親表示オブジェクトの基準点からの相対的な垂直座標を示す数値,矩形の幅,矩形の高さ,丸角の描画に使用される楕円の大きさ]。
* @param {Boolean} isFill サブパスを塗りつぶするかどうか
* @param {String} fillColor サブパスを塗りつぶする色
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.drawRoundRect(2, "#ff0000", [10, 10, 100, 50, 10]);
* shape.graphics.drawRoundRect(1, "#000000", [10, 100, 50, 100, 10], true, "#880088");
* @examplelink <p><a href="../../../api/LGraphics/drawRoundRect.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.7.1
* @public
*/
drawRoundRect : function (tn, lco, pa, isf, co) {
var s = this;
s.setList.push(function () {
var c = LGlobal.canvas;
c.beginPath();
c.moveTo(pa[0] + pa[4], pa[1]);
c.lineTo(pa[0] + pa[2] - pa[4], pa[1]);
c.arcTo(pa[0] + pa[2], pa[1], pa[0] + pa[2], pa[1] + pa[4], pa[4]);
c.lineTo(pa[0] + pa[2], pa[1] + pa[3] - pa[4]);
c.arcTo(pa[0] + pa[2], pa[1] + pa[3], pa[0] + pa[2] - pa[4], pa[1] + pa[3], pa[4]);
c.lineTo(pa[0] + pa[4], pa[1] + pa[3]);
c.arcTo(pa[0], pa[1] + pa[3], pa[0], pa[1] + pa[3] - pa[4], pa[4]);
c.lineTo(pa[0], pa[1] + pa[4]);
c.arcTo(pa[0], pa[1], pa[0] + pa[4], pa[1], pa[4]);
c.closePath();
if (s.bitmap) {
c.save();
c.clip();
c.drawImage(s.bitmap.image,
0, 0,
s.bitmap.width, s.bitmap.height,
0, 0,
s.bitmap.width, s.bitmap.height);
c.restore();
s.bitmap = null;
return;
}
if (isf) {
c.fillStyle = co;
c.fill();
}
if (tn > 0) {
c.lineWidth = tn;
c.strokeStyle = lco;
c.stroke();
}
});
s.showList.push({type : LShape.RECT, arg : pa});
},
/** @language japanese
* 多角形を描画します。
* @method drawVertices
* @param {int} thickness 線の太さをポイント単位で示す整数。
* @param {String} color 線の色
* @param {Array} param [[x1,y1],[x2,y2],[x3,y3],......]
* @param {Boolean} isFill サブパスを塗りつぶするかどうか
* @param {String} fillColor サブパスを塗りつぶする色
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.drawVertices(2, "#ff0000", [[10, 10], [60, 100], [100, 50]]);
* shape.graphics.drawVertices(2, "#ff0000", [[10, 160], [60, 250], [100, 200]], true, "#880088");
* @examplelink <p><a href="../../../api/LGraphics/drawVertices.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.4.1
* @public
*/
drawVertices : function (tn, lco, v, isf, co) {
var s = this;
if (v.length < 3) {
return;
}
s.setList.push(function () {
var c = LGlobal.canvas;
c.beginPath();
c.moveTo(v[0][0], v[0][1]);
var i, l = v.length, pa;
for (i = 1; i < l; i++) {
pa = v[i];
c.lineTo(pa[0], pa[1]);
}
c.lineTo(v[0][0], v[0][1]);
c.closePath();
if (s.bitmap) {
c.save();
c.clip();
c.drawImage(s.bitmap.image,
s.bitmap.x, s.bitmap.y, s.bitmap.width, s.bitmap.height,
0, 0, s.bitmap.width, s.bitmap.height);
c.restore();
s.bitmap = null;
return;
}
if (isf) {
c.fillStyle = co;
c.fill();
}
if (tn > 0) {
c.lineWidth = tn;
c.strokeStyle = lco;
c.closePath();
c.stroke();
}
});
s.showList.push({type : LShape.VERTICES, arg : v});
},
/** @language japanese
* 一連の三角形をレンダリングします。通常は、ビットマップを歪曲させて、3 次元の外観にします。drawTriangles() メソッドは、(u,v) 座標を使用して現在の塗りまたはビットマップ塗りを三角形の各面にマッピングします。
* @method drawTriangles
* @param {Array} vertices Number の Vector で、数値の各ペアは座標位置（x と y のペア）として扱われます。vertices パラメーターを指定する必要があります。
* @param {Array} indices 整数またはインデックスの Vector です。3 つのインデックスごとに三角形が定義されます。indexes パラメーターが null の場合、3 つの頂点（vertices Vector 内の 6 つの x、y ペア）ごとに三角形が定義されます。null でない場合、各インデックスは頂点（vertices Vector 内の数値のペア）を参照します。例えば、indexes[1] は（vertices[2], vertices[3]）を参照します。indexes パラメーターはオプションですが、インデックスを使用すると、通常、送信されるデータ量と計算されるデータ量が減少します。
* @param {Array} uvtData テクスチャマッピングを適用するために使用される正規化座標の Vector です。各座標は、塗りに使用されるビットマップ上のポイントを参照します。頂点ごとに 1 つの UV 座標または 1 つの UVT 座標が必要です。UV 座標では、（0,0）はビットマップの左上隅で、（1,1）はビットマップの右下隅です。
* @param {int} thickness 線の太さをポイント単位で示す整数。ディフォルトは0；
* @param {String} color 線の色
* @example
* var bitmapdata = new LBitmapData(event.currentTarget);
* var backLayer = new LSprite();
* addChild(backLayer);
* var vertices = new Array();
* vertices.push(0, 0);
* vertices.push(-40, 90);
* vertices.push(0, 200);
* vertices.push(80, 0);
* vertices.push(90, 30);
* vertices.push(70,200);
* vertices.push(130, 10);
* vertices.push(140, 40);
* vertices.push(120,220);
* var indices = new Array();
* indices.push(0, 3, 1);
* indices.push(3, 1, 4);
* indices.push(1, 4, 2);
* indices.push(4, 2, 5);
* indices.push(3, 6, 4);
* indices.push(6, 4, 7);
* indices.push(4, 7, 5);
* indices.push(7, 5, 8);
* var uvtData = new Array();
* uvtData.push(0, 0);
* uvtData.push(0, 0.5);
* uvtData.push(0, 1);
* uvtData.push(0.5, 0);
* uvtData.push(0.5, 0.5);
* uvtData.push(0.5, 1);
* uvtData.push(1, 0);
* uvtData.push(1, 0.5);
* uvtData.push(1, 1);
* backLayer.graphics.beginBitmapFill(bitmapdata);
* backLayer.graphics.drawTriangles(vertices, indices, uvtData);
* @examplelink <p><a href="../../../api/LGraphics/drawTriangles.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.5.0
* @public
*/
drawTriangles : function (ve, ind, u, tn, lco) {
var s = this;
var i, j, l = ind.length, c;
s.setList.push(function () {
c = LGlobal.canvas;
var v = ve, a, k, sw;
for (i = 0, j = 0; i < l; i += 3) {
a = 0;
c.save();
c.beginPath();
c.moveTo(v[ind[i] * 2], v[ind[i] * 2 + 1]);
c.lineTo(v[ind[i + 1] * 2], v[ind[i + 1] * 2 + 1]);
c.lineTo(v[ind[i + 2] * 2], v[ind[i + 2] * 2 + 1]);
c.lineTo(v[ind[i] * 2], v[ind[i] * 2 + 1]);
c.closePath();
if (tn) {
c.lineWidth = tn;
c.strokeStyle = lco;
c.stroke();
}
c.clip();
if (i % 6 == 0) {
sw = -1;
var w = (u[ind[i + 1 + j] * 2] - u[ind[i + j] * 2]) * s.bitmap.width;
var h = (u[ind[i + 2] * 2 + 1] - u[ind[i] * 2 + 1]) * s.bitmap.height;
if (j == 0 && w < 0) {
for (k = i + 9; k < l; k += 3) {
if (u[ind[i + 2] * 2 + 1] == u[ind[k + 2] * 2 + 1]) {
j = k - i;
break;
}
}
if (j == 0) {
j = l - i;
}
w = (u[ind[i + 1 + j] * 2] - u[ind[i + j] * 2]) * s.bitmap.width;
}
if (i + j >= l) {
w = (u[ind[i + j - l] * 2] - u[ind[i + 1] * 2]) * s.bitmap.width;
sw = u[ind[i] * 2] == 1 ? 0 : s.bitmap.width * u[ind[i] * 2] + w;
if (sw > s.bitmap.width) {
sw -= s.bitmap.width;
}
} else {
sw = s.bitmap.width * u[ind[i + j] * 2];
}
sh = s.bitmap.height * u[ind[i] * 2 + 1];
if (h < 0) {
h = (u[ind[i + 2 - (i > 0 ? 6 : -6)] * 2 + 1] - u[ind[i - (i > 0 ? 6 : -6)] * 2 + 1]) * s.bitmap.height;
sh = 0;
}
var t1 = (v[ind[i + 1] * 2] - v[ind[i] * 2]) / w;
var t2 = (v[ind[i + 1] * 2 + 1] - v[ind[i] * 2 + 1]) / w;
var t3 = (v[ind[i + 2] * 2] - v[ind[i] * 2]) / h;
var t4 = (v[ind[i + 2] * 2 + 1] - v[ind[i] * 2 + 1]) / h;
c.transform(t1, t2, t3, t4, v[ind[i] * 2], v[ind[i] * 2 + 1]);
c.drawImage(s.bitmap.image,
s.bitmap.x + sw,
s.bitmap.y + sh,
w, h,
0, 0,
w, h);
} else {
var w = (u[ind[i + 2 + j] * 2] - u[ind[i + 1 + j] * 2]) * s.bitmap.width;
var h = (u[ind[i + 2] * 2 + 1] - u[ind[i] * 2 + 1]) * s.bitmap.height;
if (j == 0 && w < 0) {
for (k = i + 9; k < l; k += 3) {
if (u[ind[i + 2] * 2 + 1] == u[ind[k + 2] * 2 + 1]) {
j = k - i;
break;
}
}
if (j == 0) {
j = l - i;
}
w = (u[ind[i + 2 + j] * 2] - u[ind[i + 1 + j] * 2]) * s.bitmap.width;
}
if (i + 1 + j >= l) {
w = (u[ind[i + 1 + j - l] * 2] - u[ind[i + 2] * 2]) * s.bitmap.width;
sw = u[ind[i + 1] * 2] == 1 ? 0 : s.bitmap.width * u[ind[i + 1] * 2] + w;
if (sw > s.bitmap.width) {
sw -= s.bitmap.width;
}
} else {
sw = s.bitmap.width * u[ind[i + 1 + j] * 2];
}
sh = s.bitmap.height * u[ind[i] * 2 + 1];
if (h < 0) {
h = (u[ind[i + 2 - (i > 0 ? 6 : -6)] * 2 + 1] - u[ind[i - (i > 0 ? 6 : -6)] * 2 + 1]) * s.bitmap.height;
sh = 0;
}
var t1 = (v[ind[i + 2] * 2] - v[ind[i + 1] * 2]) / w;
var t2 = (v[ind[i + 2] * 2 + 1] - v[ind[i + 1] * 2 + 1]) / w;
var t3 = (v[ind[i + 2] * 2] - v[ind[i] * 2]) / h;
var t4 = (v[ind[i + 2] * 2 + 1] - v[ind[i] * 2 + 1]) / h;
c.transform(t1, t2, t3, t4, v[ind[i + 1] * 2], v[ind[i + 1] * 2 + 1]);
c.drawImage(s.bitmap.image,
s.bitmap.x + sw,
s.bitmap.y + sh,
w, h,
0, -h,
w, h);
}
c.restore();
}
});
},
/** @language japanese
* 線を描画します。
* @method drawLine
* @param {int} thickness 線の太さをポイント単位で示す整数。
* @param {String} color 線の色
* @param {Array} param [startX,startY,endX,endY]:[開始の x,開始的 y,終了の x,終了の y]。
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.drawLine(2, "#ff0000", [10, 10, 100, 50]);
* shape.graphics.drawLine(1, "#000000", [10, 100, 50, 100]);
* @examplelink <p><a href="../../../api/LGraphics/drawLine.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.0.0
* @public
*/
drawLine : function (tn, lco, pa) {
var s = this;
s.setList.push(function () {
var c = LGlobal.canvas;
c.beginPath();
c.moveTo(pa[0], pa[1]);
c.lineTo(pa[2], pa[3]);
c.lineWidth = tn;
c.strokeStyle = lco;
c.closePath();
c.stroke();
});
s.showList.push({type : LShape.LINE, arg : pa});
},
/** @language japanese
* canvasの関数を使って、ベクターシェイプを作成する
* @method add
* @param {Function} func 一つの関数
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.add(function(){
* var ctx = LGlobal.canvas;
* ctx.beginPath();
* ctx.strokeStyle = "#FF0000";
* ctx.lineWidth = 2;
* ctx.moveTo(10,10);
* ctx.lineTo(130,30);
* ctx.stroke();
* });
* @examplelink <p><a href="../../../api/LGraphics/add.html" target="_blank">実際のサンプルを見る</a></p>
* @since 1.0.0
* @public
*/
add : function (f) {
this.setList.push(f);
},
ismouseon : function (e, co) {
var s = this;
if (e == null || e == UNDEFINED || s.showList.length == 0 || !s.parent) {
return false;
}
return s.parent.ismouseonShapes(s.showList, e.offsetX, e.offsetY);
},
getWidth : function () {
var s = this, k, k1, min = 0, max = 0, v, l, l1;
for (k = 0, l = s.showList.length; k < l; k++) {
if (s.showList[k].type == LShape.RECT) {
if (min > s.showList[k].arg[0]) {
min = s.showList[k].arg[0];
}
if (max < s.showList[k].arg[0] + s.showList[k].arg[2]) {
max = s.showList[k].arg[0] + s.showList[k].arg[2];
}
} else if (s.showList[k].type == LShape.ARC) {
if (min > s.showList[k].arg[0] - s.showList[k].arg[2]) {
min = s.showList[k].arg[0] - s.showList[k].arg[2];
}
if (max < s.showList[k].arg[0] + s.showList[k].arg[2]) {
max = s.showList[k].arg[0] + s.showList[k].arg[2];
}
} else if (s.showList[k].type == LShape.VERTICES) {
for (k1 = 0, l1 = s.showList[k].arg.length; k1 < l1; k1++) {
v = s.showList[k].arg[k1];
if (min > v[0]) {
min = v[0];
}
if (max < v[0]) {
max = v[0];
}
}
} else if (s.showList[k].type == LShape.LINE) {
if (min > s.showList[k].arg[0]) {
min = s.showList[k].arg[0];
}
if (min > s.showList[k].arg[2]) {
min = s.showList[k].arg[2];
}
if (max < s.showList[k].arg[0]) {
max = s.showList[k].arg[0];
}
if (max < s.showList[k].arg[2]) {
max = s.showList[k].arg[2];
}
} else if (s.showList[k].type == LShape.POINT) {
if (min > s.showList[k].arg[0]) {
min = s.showList[k].arg[0];
}
if (max < s.showList[k].arg[0]) {
max = s.showList[k].arg[0];
}
}
}
s.left = min;
return max - min;
},
getHeight : function () {
var s = this, k = null, k1 = null, l, l1, min = 0, max = 0, v;
for (k = 0, l = s.showList.length; k < l; k++) {
if (s.showList[k].type == LShape.RECT) {
if (min > s.showList[k].arg[1]) {
min = s.showList[k].arg[1];
}
if (max < s.showList[k].arg[1] + s.showList[k].arg[3]) {
max = s.showList[k].arg[1] + s.showList[k].arg[3];
}
} else if (s.showList[k].type == LShape.ARC) {
if (min > s.showList[k].arg[1] - s.showList[k].arg[2]) {
min = s.showList[k].arg[1] - s.showList[k].arg[2];
}
if (max < s.showList[k].arg[1] + s.showList[k].arg[2]) {
max = s.showList[k].arg[1] + s.showList[k].arg[2];
}
} else if (s.showList[k].type == LShape.VERTICES) {
for (k1 = 0, l1 = s.showList[k].arg.length; k1 < l1; k1++) {
v = s.showList[k].arg[k1];
if (min > v[1]) {
min = v[1];
}
if (max < v[1]) {
max = v[1];
}
}
} else if (s.showList[k].type == LShape.LINE) {
if (min > s.showList[k].arg[1]) {
min = s.showList[k].arg[1];
}
if (min > s.showList[k].arg[3]) {
min = s.showList[k].arg[3];
}
if (max < s.showList[k].arg[1]) {
max = s.showList[k].arg[1];
}
if (max < s.showList[k].arg[3]) {
max = s.showList[k].arg[3];
}
} else if (s.showList[k].type == LShape.POINT) {
if (min > s.showList[k].arg[1]) {
min = s.showList[k].arg[1];
}
if (max < s.showList[k].arg[1]) {
max = s.showList[k].arg[1];
}
}
}
s.top = min;
return max - min;
},
startX : function () {
var s = this;
s.getWidth();
return s.left;
},
startY : function () {
var s = this;
s.getHeight();
return s.top;
}
};
for (var k in p) {
LGraphics.prototype[k] = p[k];
}
return LGraphics;
})();
