Line

Display lines composed of multiple segments, curves and paths.

Line extends Mesh to efficiently render stroked paths with configurable thickness, joins, and caps. It automatically generates the necessary triangles to represent the line with proper corners and end caps.

Features:

• Variable thickness lines
• Miter, bevel, and round joins for corners
• Butt, square, and round caps for line ends
• Automatic loop closing
• Efficient triangle-based rendering

The line is defined by a series of points in a flat array format: [x0, y0, x1, y1, x2, y2, ...]

Common uses:

• Drawing paths and routes
• Graph visualization
• UI decorations and dividers
• Debug visualization
• Vector graphics

// Create a simple line
var line = new Line();
line.points = [
    10, 10,    // Start point
    50, 30,    // Middle point
    90, 10     // End point
];
line.thickness = 3;
line.color = Color.RED;

// Create a closed shape
var shape = new Line();
shape.points = [
    0, 0,
    100, 0,
    100, 100,
    0, 100,
    0, 0      // Close to start
];
shape.loop = true;
shape.join = MITER;
shape.thickness = 2;

Instance Members #

Line points as a flat array of coordinates.

Format: [x0, y0, x1, y1, x2, y2, ...]

Points define the path the line follows. The line will be stroked along this path with the specified thickness.

Note: when editing array content without reassigning it, contentDirty must be set to true to update the line.

line.points = [0, 0, 100, 50, 200, 0]; // V-shaped line

// Modifying existing array
line.points[2] = 150; // Change x1
line.contentDirty = true; // Must set to update

The limit before miters turn into bevels.

When join is MITER, sharp corners can create very long points. This parameter controls when those sharp corners get cut off and rendered as square joins instead.

The miter limit is compared against the cosine of the angle between adjacent edges. Internally, if cos(angle) > 2/miterLimit² - 1, a miter join is used; otherwise a square join is used.

Practical values:

• miterLimit = 2: Angles up to ~120° get mitered, sharper angles get squared
• miterLimit = 4: Angles up to ~150° get mitered
• miterLimit = 10: Almost all angles get mitered, only extremely sharp angles get squared

Lower values create more square corners, higher values allow sharper miter points.

Default: 4

The line thickness in pixels.

Determines how wide the stroked line appears. The line is centered on the path defined by points.

Default: 1

The join type for line corners.

• MITER: Sharp corners (limited by miterLimit)
• BEVEL: Flat corners
• ROUND: Rounded corners

MITER creates pointed corners but can extend far on acute angles. BEVEL creates a flat edge between the two line segments. ROUND creates smooth circular arcs at corners.

Default: BEVEL

The cap type for line ends.

• BUTT: Line ends exactly at the point (default)
• SQUARE: Line extends past the point by half thickness
• ROUND: Semicircular cap

SQUARE caps make lines appear slightly longer but can look better when lines meet at their endpoints. ROUND caps create smooth semicircular ends.

Default: BUTT

Whether to close the line into a loop.

If true and the first and last points are close enough, connects them with proper joining. Creates closed shapes from open paths.

Useful for drawing polygons, closed curves, and shapes.

Default: false

Density multiplier for round joins and caps.

Controls the smoothness of ROUND joins and caps. Higher values create smoother curves with more triangles. Lower values create rougher curves with fewer triangles.

The number of segments is calculated based on the arc angle and this density multiplier. At 1.0, a full circle uses approximately 90 segments.

Default: 1.0

Whether to automatically compute size from line points.

When true, the line's width and height are set to encompass all points. This ensures proper bounds for hit testing and culling, but adds a small computation overhead.

Set to false if you manually manage the line's size.

Default: true

Generates the line geometry from points and settings.

Uses Clipper2 to inflate the path and ceramic.Triangulate to create triangulated geometry representing the stroked path. This is called automatically when the line properties change.

Computes the line's bounding box from its points.

Finds the maximum x and y coordinates to set the line's width and height. Called automatically when autoComputeSize is true and content changes.

Private Members #

Metadata #