API Docs for: 最后更新日期：2014年8月25日
Google搜索   
Show:

LGraphics Class

Extends LObject
Defined in: display/LGraphics.js:1

Available since 1.0.0

LGraphics クラスには、ベクターシェイプの作成に使用できる一連のメソッドがあります。描画をサポートする表示オブジェクトには、LSprite および LShape オブジェクトがあります。これらの各クラスには、LGraphics オブジェクトである graphics プロパティがあります。 以下は、簡単に使用できるように用意されているヘルパー関数の一例です。drawRect()、drawRoundRect()、drawArc()、および drawEllipse()。

Constructor

LGraphics

() public

Defined in display/LGraphics.js:1

Available since 1.0.0

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");
}

実際のサンプルを見る

Methods

add

(
  • func
)
public

Defined in display/LGraphics.js:904

Available since 1.0.0

canvasの関数を使って、ベクターシェイプを作成する

Parameters:

  • func Function

    一つの関数

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();
});

実際のサンプルを見る

arc

(
  • x
  • y
  • radius
  • startAngle
  • endAngle
  • counterclockwise
)
public

Defined in display/LGraphics.js:338

Available since 1.0.0

サブパスにいくつかの地点を追加します。それらの地点は、引数によって描かれる円周によって描かれる円弧が、指定の開始角度ではじまり、指定の終了角度で終わり、指定の方向に行き、パスに加えられます。そして、直線で直前の地点に接続されます。

Parameters:

  • x Float

    中心の座標x。

  • y Float

    中心の座標y。

  • radius Float

    半径。

  • startAngle Float

    沿円周に沿って、x 軸の正方向から時計回りにラジアンで計測した開始地点

  • endAngle Float

    沿円周に沿って、x 軸の正方向から時計回りにラジアンで計測した終了地点

  • counterclockwise Boolean

    引数が true なら反時計回りとなり、そうでなければ時計回りとなります。

Example:

var shape = new LShape();
addChild(shape);
shape.graphics.arc(100,75,50,0,2*Math.PI);
shape.graphics.stroke();

実際のサンプルを見る

beginBitmapFill

(
  • bitmap
)
public

Defined in display/LGraphics.js:410

Available since 1.5.0

描画領域をビットマップイメージで塗りつぶします。

Parameters:

  • bitmap LBitmapData

    表示されるビットを含む透明または不透明ビットマップイメージです。

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]]);
}

実際のサンプルを見る

beginPath

() public

Defined in display/LGraphics.js:181

Available since 1.0.0

サブパスのリストを空にして、コンテキストのサブパスが 0 個となるようにしなければいけません。

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();

実際のサンプルを見る

callParent

(
  • functionName
  • arguments
)
public

Inherited from LObject: main/LObject.js:22

Available since 1.6.0

親クラスの関数を呼び出す。

Parameters:

  • functionName String

    函数名

  • arguments Array

    固定値arguments

Example:

function funA(){
    LExtends(this,LObject,[]);
}
funA.prototype.myName = function(){
    return "AAA";
}
function funB(){
    LExtends(this,funA,[]);
}
funB.prototype.myName = function(){
    return "BBB";
}
function funC(){
    LExtends(this,funA,[]);
}
funC.prototype.myName = function(){
    return this.callParent("myName",arguments);
}
LInit(1000/50,"legend",800,150,main);
function main(){
    LGlobal.setDebug(true);
    var objB = new funB();
    trace(objB.myName());//BBB
    var objC = new funC();
    trace(objC.myName());//AAA
}

実際のサンプルを見る

clear

() public

Defined in display/LGraphics.js:390

Available since 1.0.0

全部のベクターシェイプをクリアする。

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();

実際のサンプルを見る

closePath

() public

Defined in display/LGraphics.js:208

Available since 1.0.0

コンテキストにサブパスがなければ何もしてはいけません。コンテキストにサブパスがあれば、最後のサブパスに、閉じられたことが記録され、前のサブパスの始点と同じ地点を始点とする新たなサブパスを生成し、最後に、そのパスに、この新たなサブパスを追加しなければいけません。

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();

実際のサンプルを見る

drawArc

(
  • thickness
  • color
  • param
  • isFill
  • fillColor
)
public

Defined in display/LGraphics.js:508

Available since 1.0.0

円か扇形を描画します。

Parameters:

  • thickness Int

    線の太さをポイント単位で示す整数。

  • color String

    線の色

  • param Array
  • isFill Boolean

    サブパスを塗りつぶするかどうか

  • fillColor String

    サブパスを塗りつぶする色

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");

実際のサンプルを見る

drawEllipse

(
  • thickness
  • color
  • param
  • isFill
  • fillColor
)
public

Defined in display/LGraphics.js:447

Available since 1.8.8

楕円を描画します。

Parameters:

  • thickness Int

    線の太さをポイント単位で示す整数。

  • color String

    線の色

  • param Array

    [x,y,width,height]:[親表示オブジェクトの基準点からの楕円の境界ボックスの左上の相対 x 座標（ピクセル単位）です,親表示オブジェクトの基準点に対して相対的な、楕円の境界ボックスの左上の y 座標（ピクセル単位）です,楕円の幅（ピクセル単位）,楕円の高さ（ピクセル単位）]。

  • isFill Boolean

    サブパスを塗りつぶするかどうか

  • fillColor String

    サブパスを塗りつぶする色

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");

実際のサンプルを見る

drawLine

(
  • thickness
  • color
  • param
)
public

Defined in display/LGraphics.js:875

Available since 1.0.0

線を描画します。

Parameters:

  • thickness Int

    線の太さをポイント単位で示す整数。

  • color String

    線の色

  • param Array

    [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]);

実際のサンプルを見る

drawRect

(
  • thickness
  • color
  • param
  • isFill
  • fillColor
)
public

Defined in display/LGraphics.js:561

Available since 1.0.0

矩形を描画します。

Parameters:

  • thickness Int

    線の太さをポイント単位で示す整数。

  • color String

    線の色

  • param Array
  • isFill Boolean

    サブパスを塗りつぶするかどうか

  • fillColor String

    サブパスを塗りつぶする色

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");

実際のサンプルを見る

drawRoundRect

(
  • thickness
  • color
  • param
  • isFill
  • fillColor
)
public

Defined in display/LGraphics.js:609

Available since 1.7.1

角丸矩形を描画します。

Parameters:

  • thickness Int

    線の太さをポイント単位で示す整数。

  • color String

    線の色

  • param Array
  • isFill Boolean

    サブパスを塗りつぶするかどうか

  • fillColor String

    サブパスを塗りつぶする色

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");

実際のサンプルを見る

drawTriangles

(
  • vertices
  • indices
  • uvtData
  • thickness
  • color
)
public

Defined in display/LGraphics.js:721

Available since 1.5.0

一連の三角形をレンダリングします。通常は、ビットマップを歪曲させて、3 次元の外観にします。drawTriangles() メソッドは、(u,v) 座標を使用して現在の塗りまたはビットマップ塗りを三角形の各面にマッピングします。

Parameters:

  • vertices Array

    Number の Vector で、数値の各ペアは座標位置（x と y のペア）として扱われます。vertices パラメーターを指定する必要があります。

  • indices Array

    整数またはインデックスの Vector です。3 つのインデックスごとに三角形が定義されます。indexes パラメーターが null の場合、3 つの頂点（vertices Vector 内の 6 つの x、y ペア）ごとに三角形が定義されます。null でない場合、各インデックスは頂点（vertices Vector 内の数値のペア）を参照します。例えば、indexes[1] は（vertices[2], vertices[3]）を参照します。indexes パラメーターはオプションですが、インデックスを使用すると、通常、送信されるデータ量と計算されるデータ量が減少します。

  • uvtData Array

    テクスチャマッピングを適用するために使用される正規化座標の Vector です。各座標は、塗りに使用されるビットマップ上のポイントを参照します。頂点ごとに 1 つの UV 座標または 1 つの UVT 座標が必要です。UV 座標では、（0,0）はビットマップの左上隅で、（1,1）はビットマップの右下隅です。

  • thickness Int

    線の太さをポイント単位で示す整数。ディフォルトは0；

  • color String

    線の色

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);

実際のサンプルを見る

drawVertices

(
  • thickness
  • color
  • param
  • isFill
  • fillColor
)
public

Defined in display/LGraphics.js:665

Available since 1.4.1

多角形を描画します。

Parameters:

  • thickness Int

    線の太さをポイント単位で示す整数。

  • color String

    線の色

  • param Array

    [[x1,y1],[x2,y2],[x3,y3],......]

  • isFill Boolean

    サブパスを塗りつぶするかどうか

  • fillColor String

    サブパスを塗りつぶする色

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");

実際のサンプルを見る

fill

() public

Defined in display/LGraphics.js:319

Available since 1.0.0

現在の塗りつぶしスタイルで、サブパスを塗りつぶします。

Example:

var shape = new LShape();
addChild(shape);
shape.graphics.fillStyle("#FF0000");
shape.graphics.rect(20,20,150,100);
shape.graphics.fill();

実際のサンプルを見る

fillStyle

(
  • style
)
public

Defined in display/LGraphics.js:299

Available since 1.0.0

値をセットして、塗りつぶしスタイルを変更することができます。

Parameters:

  • style String

    CSSカラーを含んだ文字列か、または、CanvasGradient や CanvasPattern オブジェクトを指定することができます。不正な値は無視されます。

Example:

var shape = new LShape();
addChild(shape);
shape.graphics.fillStyle("#FF0000");
shape.graphics.rect(20,20,150,100);
shape.graphics.fill();

実際のサンプルを見る

lineCap

(
  • value
)
public

Defined in display/LGraphics.js:54

Available since 1.8.8

ユーザーエージェントが線の端に置く終端のタイプを定義します。

Parameters:

  • value String

    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();

実際のサンプルを見る

lineJoin

(
  • value
)
public

Defined in display/LGraphics.js:87

Available since 1.8.8

ユーザーエージェントが 2 直線の接続する角をどう扱うかを考慮するタイプを定義します。

Parameters:

  • value String

    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();

実際のサンプルを見る

lineStyle

(
  • thickness
  • color
)
public

Defined in display/LGraphics.js:363

Available since 1.0.0

線のスタイルを設定する。

Parameters:

  • thickness Int

    線の太さをポイント単位で示す整数。

  • color String

    線の色

Example:

var shape = new LShape();
addChild(shape);
shape.graphics.lineStyle(5,"#FF0000");
shape.graphics.rect(20,20,150,100);
shape.graphics.stroke();

実際のサンプルを見る

lineTo

(
  • x
  • y
)
public

Defined in display/LGraphics.js:253

Available since 1.0.0

現在のパスに指定の地点を加え、直前の地点を直線で接続します。

Parameters:

  • x Float

    指定の地点の座標x

  • y Float

    指定の地点の座標y

Example:

var shape = new LShape();
addChild(shape);
shape.graphics.beginPath();
shape.graphics.moveTo(20,20);
shape.graphics.lineTo(70,100);
shape.graphics.stroke();

実際のサンプルを見る

lineWidth

(
  • value
)
public

Defined in display/LGraphics.js:111

Available since 1.0.0

座標系の単位で、線の幅を与えます。

Parameters:

  • value Float

    線の幅。

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();

実際のサンプルを見る

moveTo

(
  • x
  • y
)
public

Defined in display/LGraphics.js:230

Available since 1.0.0

指定の地点で新規のサブパスを生成します。

Parameters:

  • x Float

    指定の地点の座標x

  • y Float

    指定の地点の座標y

Example:

var shape = new LShape();
addChild(shape);
shape.graphics.beginPath();
shape.graphics.moveTo(20,20);
shape.graphics.lineTo(70,100);
shape.graphics.stroke();

実際のサンプルを見る

rect

(
  • x
  • y
  • width
  • height
)
public

Defined in display/LGraphics.js:276

Available since 1.0.0

パスに、指定の矩形を表す閉じたサブパスを新規に追加します。

Parameters:

  • x Float

    矩形の左上の座標x

  • y Float

    矩形の左上の座標y

  • width Float

    矩形の横幅

  • height Float

    矩形の縦幅

Example:

var shape = new LShape();
addChild(shape);
shape.graphics.rect(20,20,150,100);
shape.graphics.stroke();

実際のサンプルを見る

stroke

() public

Defined in display/LGraphics.js:160

Available since 1.0.0

現在のストローク・スタイルを使って、サブパスに線を引きます。

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();

実際のサンプルを見る

strokeStyle

(
  • value
)
public

Defined in display/LGraphics.js:138

Available since 1.0.0

形状の輪郭に使う色やスタイルを表します。

Parameters:

  • value String

    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();

実際のサンプルを見る

Properties

objectIndex

Int public

Inherited from LObject: main/LObject.js:11

Available since 1.6.0

オブジェクトのID