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.
Graphic Properties
| Properties | Function Explanation |
|---|---|
| FillColor | Sets or returns the color used for the fill function. |
| LineCap | LineCap determines how the end points of every line are drawn. |
| LineJoin | LineJoin determines how two connecting segments (of lines, arcs or curves) with non-zero lengths in a shape are joined together. |
| MiterLimit | Sets or returns the maximum miter length. |
| StrokeColor | Stroke color. Sets or returns the color used for the stroke. |
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, a0, a1, 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. |