API Docs for: 1.10.1 最后更新日期：2016年03月28日
Google搜索   
Show:

LGraphics Class

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

Available since 1.0.0

LGraphics 类包含一组可用来创建矢量形状的方法。支持绘制的显示对象包括 LSprite 和 LShape 对象。这些类中的每一个类都包括 graphics 属性，该属性是一个 LGraphics 对象。 以下是为便于使用而提供的一些辅助函数：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:899

Available since 1.0.0

使用原生的canvas函数进行绘图。

Parameters:

  • func Function

    一个函数

Example:

var shape = new LShape();
addChild(shape);
shape.graphics.add(function(ctx){
    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:341

Available since 1.0.0

用一个中心点和半径，为一个画布的当前子路径添加一条弧线。

Parameters:

  • x Float

    描述弧的圆形的圆心的坐标x。

  • y Float

    描述弧的圆形的圆心的坐标y。

  • radius Float

    描述弧的圆形的半径。

  • startAngle Float

    沿着圆指定弧的开始点点的一个角度。这个角度用弧度来衡量。

  • endAngle Float

    沿着圆指定弧的结束点的一个角度。这个角度用弧度来衡量。

  • counterclockwise Boolean

    弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。

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:412

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:184

Available since 1.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: utils/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:392

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:211

Available since 1.0.0

如果画布的子路径是打开的，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();

测试链接

drawArc

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

Defined in display/LGraphics.js:509

Available since 1.0.0

绘制一个圆或者扇形。

Parameters:

  • thickness Int

    一个整数，以点为单位表示线条的粗细；

  • color String

    线的颜色，这个属性可能是一个字符串，或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串，它被解析为一个 CSS 颜色值，并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象，画笔使用这个渐变或模式来实现。

  • param Array

    [x,y,r,sAngle,eAngle,counterclockwise,isSector]:[描述弧的圆形的圆心的坐标x,描述弧的圆形的圆心的坐标y,描述弧的圆形的半径,沿着圆指定弧的开始点点的一个角度,沿着圆指定弧的结束点的一个角度,弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历,是否绘制成扇形]。

  • isFill Boolean

    是否填充图形

  • fillColor String

    填充图形的颜色，这个属性可能是一个字符串，或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串，它被解析为一个 CSS 颜色值，并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象，画笔使用这个渐变或模式来实现。

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:449

Available since 1.8.8

绘制一个椭圆。

Parameters:

  • thickness Int

    一个整数，以点为单位表示线条的粗细；

  • color String

    线的颜色，这个属性可能是一个字符串，或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串，它被解析为一个 CSS 颜色值，并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象，画笔使用这个渐变或模式来实现。

  • param Array

    [x,y,width,height]:[椭圆边框左上角相对于父显示对象注册点的 x 位置（以像素为单位）,椭圆边框左上角相对于父显示对象注册点的 y 位置（以像素为单位）,椭圆的宽度（以像素为单位）,椭圆的高度（以像素为单位）]。

  • isFill Boolean

    是否填充图形

  • fillColor String

    填充图形的颜色，这个属性可能是一个字符串，或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串，它被解析为一个 CSS 颜色值，并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象，画笔使用这个渐变或模式来实现。

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:871

Available since 1.0.0

绘制一条线段。

Parameters:

  • thickness Int

    一个整数，以点为单位表示线条的粗细；

  • color String

    线的颜色，这个属性可能是一个字符串，或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串，它被解析为一个 CSS 颜色值，并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象，画笔使用这个渐变或模式来实现。

  • 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

    线的颜色，这个属性可能是一个字符串，或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串，它被解析为一个 CSS 颜色值，并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象，画笔使用这个渐变或模式来实现。

  • param Array

    [x,y,width,height]:[矩形左上角的 x 位置,矩形左上角的 y 位置,矩形的宽度,矩形的高度]。

  • isFill Boolean

    是否填充图形

  • fillColor String

    填充图形的颜色，这个属性可能是一个字符串，或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串，它被解析为一个 CSS 颜色值，并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象，画笔使用这个渐变或模式来实现。

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:608

Available since 1.7.1

绘制一个圆角矩形。

Parameters:

  • thickness Int

    一个整数，以点为单位表示线条的粗细；

  • color String

    线的颜色，这个属性可能是一个字符串，或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串，它被解析为一个 CSS 颜色值，并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象，画笔使用这个渐变或模式来实现。

  • param Array

    [x,y,width,height,radius]:[矩形左上角的 x 位置,矩形左上角的 y 位置,矩形的宽度,矩形的高度,圆角的大小]。

  • isFill Boolean

    是否填充图形

  • fillColor String

    填充图形的颜色，这个属性可能是一个字符串，或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串，它被解析为一个 CSS 颜色值，并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象，画笔使用这个渐变或模式来实现。

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:718

Available since 1.5.0

呈现一组三角形（通常用于扭曲位图），并为其指定三维外观。drawTriangles() 方法使用一组 (u,v) 坐标将当前填充或位图填充映射到三角形面。

Parameters:

  • vertices Array

    由数字构成的矢量，其中的每一对数字将被视为一个坐标位置（一个 x, y 对）。vertices 参数是必需的。

  • indices Array

    一个由整数或索引构成的矢量，其中每三个索引定义一个三角形。如果 indexes 参数为 null，则每三个顶点（vertices 矢量中的 6 对 x,y）定义一个三角形。否则，每个索引将引用一个顶点，即 vertices 矢量中的一对数字。例如，indexes[1] 引用 (vertices[2], vertices[3])。indexes 参数是可选的，但 indexes 通常会减少提交的数据量和计算的数据量。

  • uvtData Array

    由用于应用纹理映射的标准坐标构成的矢量。每个坐标引用用于填充的位图上的一个点。每个顶点必须具有一个 UV 或一个 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:663

Available since 1.4.1

使用顶点数组绘制一个多边形。

Parameters:

  • thickness Int

    一个整数，以点为单位表示线条的粗细；

  • color String

    线的颜色，这个属性可能是一个字符串，或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串，它被解析为一个 CSS 颜色值，并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象，画笔使用这个渐变或模式来实现。

  • param Array

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

  • isFill Boolean

    是否填充图形

  • fillColor String

    填充图形的颜色，这个属性可能是一个字符串，或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串，它被解析为一个 CSS 颜色值，并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象，画笔使用这个渐变或模式来实现。

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:322

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:302

Available since 1.0.0

用来填充路径的当前的颜色、模式或渐变。

Parameters:

  • style String

    这个属性可以设置为一个字符串或者一个 CanvasGradient 对象 或 CanvasPattern 对象。当设置为一个字符串时，它被解析为一个 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:57

Available since 1.8.8

定线段如何结束。只有绘制较宽线段时，它才有效。

Parameters:

  • value String

    可以使用下面三个值butt, round, square。

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:90

Available since 1.8.8

当一个路径包含了线段或曲线相交的交点的时候，lineJoin 属性说明如何绘制这些交点。只有当绘制具有宽度的线条的时候，这一属性的效果才能表现出来。

Parameters:

  • value String

    可以使用下面三个值bevel, round, miter。

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:366

Available since 1.0.0

设置线条属性。

Parameters:

  • thickness Int

    一个整数，以点为单位表示线条的粗细；

  • color String

    线的颜色，这个属性可能是一个字符串，或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串，它被解析为一个 CSS 颜色值，并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象，画笔使用这个渐变或模式来实现。

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:256

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:114

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:233

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:279

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:163

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:141

Available since 1.0.0

指定了用于画笔（绘制）路径的颜色、模式和渐变。这个属性可能是一个字符串，或者一个 CanvasGradient 对象 或 CanvasPattern 对象。

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: utils/LObject.js:11

Available since 1.6.0

对象的ID