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

LGraphics Class

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

Available since 1.0.0

The LGraphics class contains a set of methods that you can use to create a vector shape. Display objects that support drawing include LSprite and LShape objects. Each of these classes includes a graphics property that is a LGraphics object. The following are among those helper functions provided for ease of use: drawRect(), drawRoundRect(), drawArc(), and 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");
}

Try it »

Methods

add

(
  • func
)
public

Defined in display/LGraphics.js:904

Available since 1.0.0

canvas's methods that you can use to create a vector shape.

Parameters:

  • func Function

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

Try it »

arc

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

Defined in display/LGraphics.js:338

Available since 1.0.0

Creates an arc/curve (used to create circles, or parts of circles)

Parameters:

  • x Float

    The x-coordinate of the center of the circle

  • y Float

    The y-coordinate of the center of the circle

  • radius Float

    The radius of the circle

  • startAngle Float

    The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)

  • endAngle Float

    The ending angle, in radians

  • counterclockwise Boolean

    Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.

Example:

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

Try it »

beginBitmapFill

(
  • bitmap
)
public

Defined in display/LGraphics.js:410

Available since 1.5.0

Fills a drawing area with a bitmap image.

Parameters:

  • bitmap LBitmapData

    A transparent or opaque bitmap image that contains the bits to be displayed.

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

Try it »

beginPath

() public

Defined in display/LGraphics.js:181

Available since 1.0.0

Begins a path, or resets the current path

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

Try it »

callParent

(
  • functionName
  • arguments
)
public

Inherited from LObject: main/LObject.js:22

Available since 1.6.0

call the method of parent。

Parameters:

  • functionName String

    function's name

  • arguments Array

    Fixed value : 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
}

Try it »

clear

() public

Defined in display/LGraphics.js:390

Available since 1.0.0

Clear all the vector shapes.

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

Try it »

closePath

() public

Defined in display/LGraphics.js:208

Available since 1.0.0

Creates a path from the current point back to the starting point

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

Try it »

drawArc

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

Defined in display/LGraphics.js:508

Available since 1.0.0

Draws a Circle or Sector.

Parameters:

  • thickness Int

    An integer that indicates the thickness of the line in points;

  • color String

    color|gradient|pattern

  • param Array

    [x,y,r,sAngle,eAngle,counterclockwise,isSector]:[The x-coordinate of the center of the circle,The y-coordinate of the center of the circle,radius The radius of the circle,startAngle The starting angle,endAngle The ending angle,Specifies whether the drawing should be counterclockwise or clockwise,whether the drawing should be a sector]。

  • isFill Boolean

    Whether to Fills the current drawing

  • fillColor String

    Fills color

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

Try it »

drawEllipse

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

Defined in display/LGraphics.js:447

Available since 1.8.8

Draws an ellipse.

Parameters:

  • thickness Int

    An integer that indicates the thickness of the line in points;

  • color String

    color|gradient|pattern

  • param Array

    [x,y,width,height]:[The x location of the top-left of the bounding-box of the ellipse relative to the registration point of the parent display object (in pixels),The y location of the top left of the bounding-box of the ellipse relative to the registration point of the parent display object (in pixels),The width of the ellipse (in pixels),The height of the ellipse (in pixels)]。

  • isFill Boolean

    Whether to Fills the current drawing

  • fillColor String

    Fills color

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

Try it »

drawLine

(
  • thickness
  • color
  • param
)
public

Defined in display/LGraphics.js:875

Available since 1.0.0

Draw a line

Parameters:

  • thickness Int

    An integer that indicates the thickness of the line in points;

  • color String

    color|gradient|pattern

  • param Array

    [startX,startY,endX,endY]:[The x-coordinate of the start,The y-coordinate of the start,The x-coordinate of the end,The y-coordinate of the end]。

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

Try it »

drawRect

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

Defined in display/LGraphics.js:561

Available since 1.0.0

Draws a rectangle.

Parameters:

  • thickness Int

    An integer that indicates the thickness of the line in points;

  • color String

    color|gradient|pattern

  • param Array

    [x,y,width,height]:[A number indicating the horizontal position relative to the registration point of the parent display object,A number indicating the vertical position relative to the registration point of the parent display object,The width of the rectangle,The height of the rectangle]。

  • isFill Boolean

    Whether to Fills the current drawing

  • fillColor String

    Fills color

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

Try it »

drawRoundRect

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

Defined in display/LGraphics.js:609

Available since 1.7.1

Draws a rounded rectangle.

Parameters:

  • thickness Int

    An integer that indicates the thickness of the line in points;

  • color String

    color|gradient|pattern

  • param Array

    [x,y,width,height,radius]:[A number indicating the horizontal position relative to the registration point of the parent display object,A number indicating the vertical position relative to the registration point of the parent display object,The width of the rectangle,The height of the rectangle,The size of the ellipse used to draw the rounded corners]。

  • isFill Boolean

    Whether to Fills the current drawing

  • fillColor String

    Fills color

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

Try it »

drawTriangles

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

Defined in display/LGraphics.js:721

Available since 1.5.0

Renders a set of triangles, typically to distort bitmaps and give them a three-dimensional appearance. The drawTriangles() method maps either the current fill, or a bitmap fill, to the triangle faces using a set of (u,v) coordinates.

Parameters:

  • vertices Array

    A Vector of Numbers where each pair of numbers is treated as a coordinate location (an x, y pair). The vertices parameter is required.

  • indices Array

    A Vector of integers or indexes, where every three indexes define a triangle. If the indexes parameter is null then every three vertices (six x,y pairs in the vertices Vector) defines a triangle. Otherwise each index refers to a vertex, which is a pair of numbers in the vertices Vector. For example indexes[1] refers to (vertices[2], vertices[3]). The indexes parameter is optional, but indexes generally reduce the amount of data submitted and the amount of data computed.

  • uvtData Array

    A Vector of normalized coordinates used to apply texture mapping. Each coordinate refers to a point on the bitmap used for the fill. You must have one UV or one UVT coordinate per vertex. In UV coordinates, (0,0) is the upper left of the bitmap, and (1,1) is the lower right of the bitmap.

  • thickness Int

    An integer that indicates the thickness of the line in points;

  • color String

    color|gradient|pattern

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

Try it »

drawVertices

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

Defined in display/LGraphics.js:665

Available since 1.4.1

Draws a Polygon.

Parameters:

  • thickness Int

    An integer that indicates the thickness of the line in points;

  • color String

    color|gradient|pattern

  • param Array

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

  • isFill Boolean

    Whether to Fills the current drawing

  • fillColor String

    Fills color

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

Try it »

fill

() public

Defined in display/LGraphics.js:319

Available since 1.0.0

Fills the current drawing (path)

Example:

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

Try it »

fillStyle

(
  • style
)
public

Defined in display/LGraphics.js:299

Available since 1.0.0

Sets or returns the color, gradient, or pattern used to fill the drawing

Parameters:

  • style String

    color|gradient|pattern

Example:

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

Try it »

lineCap

(
  • value
)
public

Defined in display/LGraphics.js:54

Available since 1.8.8

Sets or returns the style of the end caps for a line

Parameters:

  • value String

    The value "round" and "square" make the lines slightly longer.

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

Try it »

lineJoin

(
  • value
)
public

Defined in display/LGraphics.js:87

Available since 1.8.8

The lineJoin property sets or returns the type of corner created, when two lines meet.

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

Try it »

lineStyle

(
  • thickness
  • color
)
public

Defined in display/LGraphics.js:363

Available since 1.0.0

Sets the style of line

Parameters:

  • thickness Int

    An integer that indicates the thickness of the line in points;

  • color String

    color|gradient|pattern

Example:

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

Try it »

lineTo

(
  • x
  • y
)
public

Defined in display/LGraphics.js:253

Available since 1.0.0

Adds a new point and creates a line from that point to the last specified point in the canvas

Parameters:

  • x Float

    The x-coordinate of where to create the line to

  • y Float

    The y-coordinate of where to create the line to

Example:

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

Try it »

lineWidth

(
  • value
)
public

Defined in display/LGraphics.js:111

Available since 1.0.0

Sets or returns the current line width

Parameters:

  • value String

    the current line width.

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

Try it »

moveTo

(
  • x
  • y
)
public

Defined in display/LGraphics.js:230

Available since 1.0.0

Moves the path to the specified point in the canvas, without creating a line

Parameters:

  • x Float

    The x-coordinate of where to move the path to

  • y Float

    The x-coordinate of where to move the path to

Example:

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

Try it »

rect

(
  • x
  • y
  • width
  • height
)
public

Defined in display/LGraphics.js:276

Available since 1.0.0

Creates a rectangle

Parameters:

  • x Float

    The x-coordinate of the upper-left corner of the rectangle

  • y Float

    The y-coordinate of the upper-left corner of the rectangle

  • width Float

    The width of the rectangle, in pixels

  • height Float

    The height of the rectangle, in pixels

Example:

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

Try it »

stroke

() public

Defined in display/LGraphics.js:160

Available since 1.0.0

Actually draws the path you have defined

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

Try it »

strokeStyle

(
  • value
)
public

Defined in display/LGraphics.js:138

Available since 1.0.0

Sets or returns the color, gradient, or pattern used for strokes.

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

Try it »

Properties

objectIndex

Int public

Inherited from LObject: main/LObject.js:11

Available since 1.6.0

ID of the object