Line

Draw a straight line between two points with color, thickness, and solid, dashed, or dotted styles

Props

  • color

    The color of the line

    Type
    string
    Default
    #ffffff

  • pointA

    The start point of the line

    Type
    {x: number, y: number}
    Default
    {"x":0.2,"y":0.5}

  • pointB

    The end point of the line

    Type
    {x: number, y: number}
    Default
    {"x":0.8,"y":0.5}

  • thickness

    The thickness of the line. A value of one (1) matches the canvas height.

    Type
    number
    Default
    0.01

  • style

    The line style: solid, dashed, or dotted. Dashes and dots are spaced to land exactly on both endpoints.

    Type
    "solid" | "dashed" | "dotted"
    Default
    solid

  • dashLength

    The length of each dash, including its caps

    Type
    number
    Default
    0.05

  • gapLength

    The gap between dashes, or the spacing between dots

    Type
    number
    Default
    0.025

  • capStart

    Cap shape at the start of the line (point A). Rounded caps center on the endpoint; square caps end flat exactly at it. Also shapes the A-facing end of each dash and dot.

    Type
    "square" | "rounded"
    Default
    rounded

  • capEnd

    Cap shape at the end of the line (point B). Rounded caps center on the endpoint; square caps end flat exactly at it. Also shapes the B-facing end of each dash and dot.

    Type
    "square" | "rounded"
    Default
    rounded

Usage

<Shader>
  <Line
    color="#ffffff"
  />
</Shader>