Graphics Component Reference

The Graphics component provides a series of drawing functions that reference the Web canvas's drawing APIs.

Select a node in the Hierarchy panel, then click the Add Component button at the bottom of the Inspector panel and select Graphics from UI -> Render. Then you can add the Graphics component to the node.

To use graphics, please refer to the graphics API documentation and the graphics scene of the test-cases-3d project.

Graphic Properties

Property	Function Explanation
CustomMaterial	Custom materials that can be used to achieve rendering effects such as dissolve, external glow, etc.
LineWidth	Current line width.
LineJoin	LineJoin determines how two connecting segments (of lines, arcs or curves) with non-zero lengths in a shape are joined together.
LineCap	LineCap determines how the end points of every line are drawn.
StrokeColor	Stroke color. Sets or returns the color used for the stroke.
FillColor	Sets or returns the color used for the fill function.
MiterLimit	Sets or returns the maximum miter length.

Graphics API

Path

Function	Function Explanation
moveTo (x, y)	Move the render cursor to a specified point in the canvas without creating lines.
lineTo (x, y)	Adds a straight line to the path.
bezierCurveTo (c1x, c1y, c2x, c2y, x, y)	Adds a cubic Bézier curve to the path.
quadraticCurveTo (cx, cy, x, y)	Adds a quadratic Bézier curve to the path.
arc (cx, cy, r, startAngle, endAngle, counterclockwise)	Adds an arc to the path which is centered at (cx, cy) position with radius r starting at startAngle and ending at endAngle going in the given direction by counterclockwise (defaulting to false).
ellipse (cx, cy, rx, ry)	Adds an ellipse to the path.
circle (cx, cy, r)	Adds a circle to the path.
rect (x, y, w, h)	Adds a rectangle to the path.
close ()	Close the previous path by connecting the last point and the beginning point.
stroke ()	Stroke the path as lines
fill ()	Close and fill a path's inner surface
clear ()	Erase any previously drawn content.

Modify the drawing pattern through script code

import { _decorator, Component, Graphics } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Example')
export class Example extends Component {
    start () {
        const g = this.getComponent(Graphics);
        g.lineWidth = 10;
        g.fillColor.fromHEX('#ff0000');
        g.moveTo(-40, 0);
        g.lineTo(0, -80);
        g.lineTo(40, 0);
        g.lineTo(0, 80);
        g.close();
        g.stroke();
        g.fill();
    }
}