类 GraphicsAni

En

Graphic animation class.

Zh

图形动画类。

层级 (查看层级一览)

属性

_sp

访问器

cmds material

方法

addCmd alpha clear clipRect destroy draw9Grid drawCircle drawCurves drawEllipse drawImage drawLine drawLines drawPath drawPie drawPoly drawRect drawRoundRect drawTexture drawTextures drawTriangles fillBorderText fillText fillTexture getBoundPoints getBounds loadImage removeCmd replaceCmd replaceTextColor restore rotate save scale strokeText transform translate add2DGlobalUniformData create recycle

属性

_sp

_sp: Sprite = null

访问器

cmds

material

方法

addCmd

  • addCmd(cmd: any, index?: number): any

    参数

    • cmd: any

      Add the command to the command stream.

    • 可选index: number

      (Optional) The index to be inserted.

    返回 any

    En

    Save to the command stream.

    Zh

    添加到命令流。

alpha

clear

  • clear(recoverCmds?: boolean): void

    参数

    • recoverCmds: boolean = true

      Whether to recycle the drawing instruction array. If set to true, the instruction array will be recycled to save memory. It is recommended to set it to true for recycling, but if you manually reference the array, recycling is not recommended.

    返回 void

    En

    Clear drawing commands.

    Zh

    清空绘制命令。

clipRect

  • clipRect(x: number, y: number, width: number, height: number): ClipRectCmd

    参数

    • x: number

      X-axis offset

    • y: number

      Y-axis offset

    • width: number

      Width of the clipping area

    • height: number

      Height of the clipping area

    返回 ClipRectCmd

    En

    Set the clipping area. Coordinates outside the clipping area will not be displayed.

    Zh

    设置剪裁区域，超出剪裁区域的坐标不显示。

destroy

draw9Grid

  • draw9Grid(
        texture: Texture,
        x?: number,
        y?: number,
        width?: number,
        height?: number,
        sizeGrid: any[],
        color?: string,
    ): void

    参数

    • texture: Texture

      The texture to draw

    • x: number = 0

      (Optional) X-axis position. Default is 0.

    • y: number = 0

      (Optional) Y-axis position. Default is 0.

    • width: number = 0

      (Optional) Width of the image. Default is 0.

    • height: number = 0

      (Optional) Height of the image. Default is 0.

    • sizeGrid: any[]

      Nine-grid information

    • 可选color: string

      (Optional) Color to tint the image

    返回 void

    En

    Draw an image with nine-grid

    Zh

    绘制带九宫格的图片

drawCircle

  • drawCircle(
        x: number,
        y: number,
        radius: number,
        fillColor: any,
        lineColor?: any,
        lineWidth?: number,
    ): DrawCircleCmd

    参数

    • x: number

      X-axis position of the circle center

    • y: number

      Y-axis position of the circle center

    • radius: number

      Radius of the circle

    • fillColor: any

      Fill color, or gradient object for filling the drawing

    • lineColor: any = null

      (Optional) Border color, or gradient object for filling the drawing. Default is null.

    • lineWidth: number = 1

      (Optional) Border width. Default is 1.

    返回 DrawCircleCmd

    En

    Draw a circle.

    Zh

    绘制圆形。

drawCurves

  • drawCurves(
        x: number,
        y: number,
        points: any[],
        lineColor: any,
        lineWidth?: number,
    ): DrawCurvesCmd

    参数

    • x: number

      X-axis position to start drawing

    • y: number

      Y-axis position to start drawing

    • points: any[]

      Collection of points for curves. Format: [controlX, controlY, anchorX, anchorY...]

    • lineColor: any

      Color of the curves, or gradient object for filling the drawing

    • lineWidth: number = 1

      (Optional) Width of the curves. Default is 1.

    返回 DrawCurvesCmd

    En

    Draw a series of curves.

    Zh

    绘制一系列曲线。

drawEllipse

  • drawEllipse(
        x: number,
        y: number,
        width: number,
        height: number,
        fillColor: any,
        lineColor: any,
        lineWidth: number,
        percent?: boolean,
    ): DrawEllipseCmd

    参数

    • x: number

      X-axis position of the ellipse center

    • y: number

      Y-axis position of the ellipse center

    • width: number

      Horizontal radius

    • height: number

      Vertical radius

    • fillColor: any

      Fill color, or gradient object for filling the drawing

    • lineColor: any

      (Optional) Border color, or gradient object for filling the drawing

    • lineWidth: number

      (Optional) Border width

    • 可选percent: boolean

      (Optional) Whether the position and size are percentage values

    返回 DrawEllipseCmd

    En

    Draw an ellipse.

    Zh

    绘制椭圆形。

drawImage

  • drawImage(
        texture: Texture,
        x?: number,
        y?: number,
        width?: number,
        height?: number,
        color?: string,
    ): DrawImageCmd

    参数

    • texture: Texture

      The texture to draw

    • x: number = 0

      (Optional) X-axis offset. Default is 0.

    • y: number = 0

      (Optional) Y-axis offset. Default is 0.

    • width: number = null

      (Optional) Width of the image. Default is null.

    • height: number = null

      (Optional) Height of the image. Default is null.

    • color: string = null

      (Optional) Color of the image. Default is null.

    返回 DrawImageCmd

    En

    Draw a single image

    Zh

    绘制单独图片

drawLine

  • drawLine(
        fromX: number,
        fromY: number,
        toX: number,
        toY: number,
        lineColor: string,
        lineWidth?: number,
    ): DrawLineCmd

    参数

    • fromX: number

      X-axis starting position

    • fromY: number

      Y-axis starting position

    • toX: number

      X-axis ending position

    • toY: number

      Y-axis ending position

    • lineColor: string

      Color of the line

    • lineWidth: number = 1

      (Optional) Width of the line. Default is 1.

    返回 DrawLineCmd

    En

    Draw a line.

    Zh

    绘制一条线。

drawLines

  • drawLines(
        x: number,
        y: number,
        points: any[],
        lineColor: any,
        lineWidth?: number,
    ): DrawLinesCmd

    参数

    • x: number

      X-axis position to start drawing

    • y: number

      Y-axis position to start drawing

    • points: any[]

      Collection of points for line segments. Format: [x1,y1,x2,y2,x3,y3...]

    • lineColor: any

      Color of the line segments, or gradient object for filling the drawing

    • lineWidth: number = 1

      (Optional) Width of the line segments. Default is 1.

    返回 DrawLinesCmd

    En

    Draw a series of line segments.

    Zh

    绘制一系列线段。

drawPath

  • drawPath(
        x: number,
        y: number,
        paths: any[],
        brush?: any,
        pen?: any,
    ): DrawPathCmd

    参数

    • x: number

      X-axis position to start drawing

    • y: number

      Y-axis position to start drawing

    • paths: any[]

      Collection of paths. Paths support the following format: [["moveTo",x,y],["lineTo",x,y],["arcTo",x1,y1,x2,y2,r],["closePath"]]

    • brush: any = null

      (Optional) Brush definition, supports the following settings: {fillStyle:"#FF0000"}

    • pen: any = null

      (Optional) Pen definition, supports the following settings: {strokeStyle,lineWidth,lineJoin:"bevel|round|miter",lineCap:"butt|round|square",miterLimit}

    返回 DrawPathCmd

    En

    Draw a path.

    Zh

    绘制路径。

drawPie

  • drawPie(
        x: number,
        y: number,
        radius: number,
        startAngle: number,
        endAngle: number,
        fillColor: any,
        lineColor?: any,
        lineWidth?: number,
    ): DrawPieCmd

    参数

    • x: number

      X-axis position to start drawing

    • y: number

      Y-axis position to start drawing

    • radius: number

      Radius of the pie

    • startAngle: number

      Start angle

    • endAngle: number

      End angle

    • fillColor: any

      Fill color, or gradient object for filling the drawing

    • lineColor: any = null

      (Optional) Border color, or gradient object for filling the drawing. Default is null.

    • lineWidth: number = 1

      (Optional) Border width. Default is 1.

    返回 DrawPieCmd

    En

    Draw a pie.

    Zh

    绘制扇形。

drawPoly

  • drawPoly(
        x: number,
        y: number,
        points: any[],
        fillColor: any,
        lineColor?: any,
        lineWidth?: number,
    ): DrawPolyCmd

    参数

    • x: number

      X-axis position to start drawing

    • y: number

      Y-axis position to start drawing

    • points: any[]

      Collection of points for the polygon

    • fillColor: any

      Fill color, or gradient object for filling the drawing

    • lineColor: any = null

      (Optional) Border color, or gradient object for filling the drawing. Default is null.

    • lineWidth: number = 1

      (Optional) Border width. Default is 1.

    返回 DrawPolyCmd

    En

    Draw a polygon.

    Zh

    绘制多边形。

drawRect

  • drawRect(
        x: number,
        y: number,
        width: number,
        height: number,
        fillColor: any,
        lineColor?: any,
        lineWidth?: number,
        percent?: boolean,
    ): DrawRectCmd

    参数

    • x: number

      X-axis position to start drawing

    • y: number

      Y-axis position to start drawing

    • width: number

      Width of the rectangle

    • height: number

      Height of the rectangle

    • fillColor: any

      Fill color, or gradient object for filling the drawing

    • lineColor: any = null

      (Optional) Border color, or gradient object for filling the drawing. Default is null.

    • lineWidth: number = 1

      (Optional) Border width. Default is 1.

    • 可选percent: boolean

      Whether the position and size are percentage values

    返回 DrawRectCmd

    DrawRectCmd object

    En

    Draw a rectangle.

    Zh

    绘制矩形。

drawRoundRect

  • drawRoundRect(
        x: number,
        y: number,
        width: number,
        height: number,
        lt: number,
        rt: number,
        lb: number,
        rb: number,
        fillColor: any,
        lineColor?: any,
        lineWidth?: number,
        percent?: boolean,
    ): any

    参数

    • x: number

      X-axis position to start drawing

    • y: number

      Y-axis position to start drawing

    • width: number

      Width of the rounded rectangle

    • height: number

      Height of the rounded rectangle

    • lt: number

      Left-top corner radius

    • rt: number

      Right-top corner radius

    • lb: number

      Left-bottom corner radius

    • rb: number

      Right-bottom corner radius

    • fillColor: any

      Fill color, or gradient object for filling the drawing

    • lineColor: any = null

      (Optional) Border color, or gradient object for filling the drawing. Default is null.

    • lineWidth: number = 1

      (Optional) Border width. Default is 1.

    • 可选percent: boolean

      (Optional) Whether the position and size are percentage values

    返回 any

    En

    Draw a rounded rectangle.

    Zh

    绘制圆角矩形。

drawTexture

  • drawTexture(
        texture: Texture,
        x?: number,
        y?: number,
        width?: number,
        height?: number,
        matrix?: Matrix,
        alpha?: number,
        color?: string,
        blendMode?: string,
        uv?: number[],
    ): DrawTextureCmd

    参数

    • texture: Texture

      The texture to draw

    • x: number = 0

      (Optional) X-axis offset. Default is 0.

    • y: number = 0

      (Optional) Y-axis offset. Default is 0.

    • width: number = null

      (Optional) Width of the texture. Default is null.

    • height: number = null

      (Optional) Height of the texture. Default is null.

    • matrix: Matrix = null

      (Optional) Matrix information. Default is null.

    • alpha: number = 1

      (Optional) Transparency. Default is 1.

    • color: string = null

      (Optional) Color filter. Default is null.

    • blendMode: string = null

      (Optional) Blend mode. Default is null.

    • 可选uv: number[]

      (Optional) UV coordinates. Default is undefined.

    返回 DrawTextureCmd

    En

    Draw a texture. More powerful than drawImage but less performant.

    Zh

    绘制纹理，相比drawImage功能更强大，性能会差一些

drawTextures

drawTriangles

  • drawTriangles(
        texture: Texture,
        x: number,
        y: number,
        vertices: Float32Array,
        uvs: Float32Array,
        indices: Uint16Array,
        matrix?: Matrix,
        alpha?: number,
        color?: string | number,
        blendMode?: string,
    ): DrawTrianglesCmd

    参数

    • texture: Texture

      The texture to use

    • x: number

      X-axis offset

    • y: number

      Y-axis offset

    • vertices: Float32Array

      Vertex array

    • uvs: Float32Array

      UV data. Note that the UV coordinates are used directly. If the texture is from an atlas, these UVs are also from the atlas and don't need conversion.

    • indices: Uint16Array

      Vertex indices

    • matrix: Matrix = null

      (Optional) Scale matrix. Default is null.

    • alpha: number = 1

      (Optional) Alpha value. Default is 1.

    • color: string | number = null

      (Optional) Color transformation. Default is null.

    • blendMode: string = null

      (Optional) Blend mode. Default is null.

    返回 DrawTrianglesCmd

    En

    Draw a group of triangles

    Zh

    绘制一组三角形

fillBorderText

  • fillBorderText(
        text: string | WordText,
        x: number,
        y: number,
        font: string,
        fillColor: string,
        textAlign: string,
        lineWidth: number,
        borderColor: string,
    ): FillTextCmd

    参数

    • text: string | WordText

      The text to output on the canvas

    • x: number

      The x-coordinate where to start drawing the text (relative to the canvas)

    • y: number

      The y-coordinate where to start drawing the text (relative to the canvas)

    • font: string

      Defines the font and size, e.g., "20px Arial"

    • fillColor: string

      Defines the text color, e.g., "#ff0000"

    • textAlign: string

      Text alignment. Possible values: "left", "center", "right"

    • lineWidth: number

      Width of the stroke line

    • borderColor: string

      Defines the color of the text stroke

    返回 FillTextCmd

    En

    Draw filled and stroked text on the canvas.

    Zh

    在画布上绘制"被填充且镶边的"文本。

fillText

  • fillText(
        text: string | WordText,
        x: number,
        y: number,
        font: string,
        color: string,
        textAlign: string,
    ): FillTextCmd

    参数

    • text: string | WordText

      The text to output on the canvas

    • x: number

      The x-coordinate where to start drawing the text (relative to the canvas)

    • y: number

      The y-coordinate where to start drawing the text (relative to the canvas)

    • font: string

      Defines the font size and family, e.g., "20px Arial"

    • color: string

      Defines the text color, e.g., "#ff0000"

    • textAlign: string

      Text alignment. Possible values: "left", "center", "right"

    返回 FillTextCmd

    En

    Draw text on the canvas

    Zh

    在画布上绘制文本

fillTexture

  • fillTexture(
        texture: Texture,
        x: number,
        y: number,
        width?: number,
        height?: number,
        type?: string,
        offset?: Point,
        color?: string,
        percent?: boolean,
    ): FillTextureCmd

    参数

    • texture: Texture

      The texture to use for filling

    • x: number

      X-axis offset

    • y: number

      Y-axis offset

    • width: number = 0

      (Optional) Width. Default is 0.

    • height: number = 0

      (Optional) Height. Default is 0.

    • type: string = "repeat"

      (Optional) Fill type: 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. Default is 'repeat'.

    • offset: Point = null

      (Optional) Texture offset. Default is null.

    • color: string = null

      (Optional) Color. Default is null.

    • percent: boolean = false

      (Optional) Whether to use percentages. Default is false.

    返回 FillTextureCmd

    En

    Fill with texture

    Zh

    用纹理填充

getBoundPoints

  • getBoundPoints(realSize?: boolean): readonly number[]

    参数

    • 可选realSize: boolean

      (Optional) Use the real size of the image, default is false.

    返回 readonly number[]

    An array of endpoint coordinates.

    En

    Get the list of endpoints.

    Zh

    获取端点列表。

getBounds

  • getBounds(realSize?: boolean): Readonly<Rectangle>

    参数

    • 可选realSize: boolean

      (Optional) Use the real size of the image, default is false.

    返回 Readonly<Rectangle>

    A Rectangle object composed of position and size.

    En

    Get the position and size information matrix (CPU-intensive, frequent use may cause lag, use sparingly).

    Zh

    获取位置及宽高信息矩阵(比较耗CPU，频繁使用会造成卡顿，尽量少用)。

loadImage

  • loadImage(
        url: string,
        x?: number,
        y?: number,
        width?: number,
        height?: number,
        complete?: Function,
    ): void

    参数

    • url: string

      The URL of the image

    • x: number = 0

      (Optional) The x-coordinate where the image will be displayed. Default is 0.

    • y: number = 0

      (Optional) The y-coordinate where the image will be displayed. Default is 0.

    • width: number = null

      (Optional) The width to display the image. Set to 0 to use the default image width. Default is null.

    • height: number = null

      (Optional) The height to display the image. Set to 0 to use the default image height. Default is null.

    • complete: Function = null

      (Optional) The callback function to be called when the image is loaded

    返回 void

    En

    Load and display an image.

    Zh

    加载并显示一个图片。

removeCmd

replaceCmd

  • replaceCmd(oldCmd: any, newCmd: any, recover?: boolean): any

    参数

    • oldCmd: any

      The command to be replaced.

    • newCmd: any

      The new command.

    • 可选recover: boolean

      (Optional) Whether to recycle the old command. Default is false.

    返回 any

    En

    Replace the command.

    Zh

    替换命令。

replaceTextColor

restore

rotate

  • rotate(angle: number, pivotX?: number, pivotY?: number): RotateCmd

    参数

    • angle: number

      The rotation angle in radians

    • pivotX: number = 0

      (Optional) X-coordinate of the pivot point. Default is 0.

    • pivotY: number = 0

      (Optional) Y-coordinate of the pivot point. Default is 0.

    返回 RotateCmd

    En

    Rotate the current drawing. (It's recommended to use transform for better performance)

    Zh

    旋转当前绘图。(推荐使用transform，性能更高)

save

scale

  • scale(
        scaleX: number,
        scaleY: number,
        pivotX?: number,
        pivotY?: number,
    ): ScaleCmd

    参数

    • scaleX: number

      Horizontal scaling value

    • scaleY: number

      Vertical scaling value

    • pivotX: number = 0

      (Optional) X-coordinate of the pivot point. Default is 0.

    • pivotY: number = 0

      (Optional) Y-coordinate of the pivot point. Default is 0.

    返回 ScaleCmd

    En

    Scale the current drawing to a larger or smaller size. (It's recommended to use transform for better performance)

    Zh

    缩放当前绘图至更大或更小。(推荐使用transform，性能更高)

strokeText

  • strokeText(
        text: string | WordText,
        x: number,
        y: number,
        font: string,
        color: string,
        lineWidth: number,
        textAlign: string,
    ): FillTextCmd

    参数

    • text: string | WordText

      The text to output on the canvas

    • x: number

      The x-coordinate where to start drawing the text (relative to the canvas)

    • y: number

      The y-coordinate where to start drawing the text (relative to the canvas)

    • font: string

      Defines the font and size, e.g., "20px Arial"

    • color: string

      Defines the text color, e.g., "#ff0000"

    • lineWidth: number

      Width of the line

    • textAlign: string

      Text alignment. Possible values: "left", "center", "right"

    返回 FillTextCmd

    En

    Draw text on the canvas (without fill). The default color of the text is black.

    Zh

    在画布上绘制文本（没有填色）。文本的默认颜色是黑色。

transform

translate

静态add2DGlobalUniformData

静态create

  • create(): GraphicsAni

    返回 GraphicsAni

    An instance of GraphicsAni.

    En

    Retrieves an instance of GraphicsAni from the cache or creates a new one if none are available.

    Zh

    从缓存中获取一个 GraphicsAni 实例，如果没有可用的实例则创建一个新的。

静态recycle

  • recycle(graphics: GraphicsAni): void

    参数

    • graphics: GraphicsAni

      The GraphicsAni instance to recycle.

    返回 void

    En

    Recycles a GraphicsAni instance by clearing its content and adding it to the cache for future use.

    Zh

    通过清除其内容并将其实例添加到缓存中来回收 GraphicsAni。

显示设置

成员可见性

目录

属性
访问器
方法