CapDrive
User guide

Polyline

Draw a polyline by connecting a set of points in sequence. closed can connect the last point and the first point to form a closed contour, and allows filling; the coordinates use the number of points in the current View.

Example

function main() {
  return (
    <Polyline
      points={[
        { x: 0, y: 80 },
        { x: 60, y: 10 },
        { x: 120, y: 80 },
      ]}
      closed={true}
      background="#30B3A233"
      stroke={$env.accent}
      lineWidth={3}
    />
  );
}

Usage

  • points connect in array order. Fewer than two points draw nothing. closed=true joins the last point to the first and enables background fill. Coordinates are local points, not percentages; calculate them for responsive sizes.
  • contentAnimation transitions text, images or structured data rather than scalar properties. interpolate needs compatible structure: matching Polyline point count/closed state, Path command sequence or chart samples. Structural changes update immediately.

Properties

pointsReadonlyArray<ViewPoint>

Local point coordinates in points. Fewer than two points draw nothing.

Example[{x: 0, y: 20}, {x: 40, y: 0}, {x: 80, y: 40}]
closed?boolean

Connect the last point back to the first. A closed polyline can also use background fill.

Examplefalse
background?Paint

Fill paint for a closed polyline. Ignored when closed is false.

Example"clear"
stroke?Paint

Stroke paint; accepts a color or gradient. Use clear to hide the stroke.

ExampleHDR($env.dark ? "white" : "black")
lineWidth?number

Stroke thickness in points; 0 draws no stroke.

Example2
lineCap?"round" | "butt" | "square"

Stroke end shape: butt stops at the endpoint, square extends it, round rounds it.

Example"round"
lineJoin?"round" | "miter" | "bevel"

Shape of joined stroke segments: miter, round or bevel.

Example"round"
dash?number[]

Alternating painted and empty lengths in points; an empty array makes a solid stroke.

Example[]
dashPhase?number

Offset along the dash pattern, in points.

Example0
trimStart?number

Visible path interval from trimStart to trimEnd, within 0–1. Circle/Ellipse/Arc use angles instead.

Example0
trimEnd?number

Visible path interval from trimStart to trimEnd, within 0–1. Circle/Ellipse/Arc use angles instead.

Example1
contentAnimation?ContentAnimation

Optional content transition. Interpolate requires the same point count and closed state; otherwise updates immediately.

Example{type: "interpolate", duration: 0.25}
Common properties
width?number | "auto" | "fill"

Width in points, auto sizing or parent fill.

Example"fill"
height?number | "auto" | "fill"

Height in points, auto sizing or parent fill.

Example"fill"
x?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0
y?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0
transform?ViewTransform

Transform the whole View without changing layout. Translation uses points; rotation/skew use degrees; scale 1 is unchanged; anchors use 0–1.

Example{rotation: 0}
opacity?number

Opacity of the whole View: 0 is transparent, 1 is opaque.

Example1
clipped?boolean

Clip drawing that extends beyond the View bounds.

Examplefalse
clip?"rectangle" | "ellipse"

Clipping shape: rectangle or ellipse. Material also accepts false to disable clipping.

Example"rectangle"
mask?View | null

Alpha mask View. Centered without affecting layout; null disables masking.

Example<Circle width="fill" height="fill" background="white"/>
zIndex?number

Drawing order among siblings; larger values appear in front.

Example0
blur?number

Blur radius in points; 0 disables blur.

Example4
innerShadow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Color of the outer shadow.

ExampleHDR("black")
shadowOpacity?number

Outer shadow opacity from 0 to 1; 0 hides it.

Example0
shadowRadius?number

Outer shadow blur radius in points.

Example4
shadowX?number

Outer shadow offset in points: x right, y down.

Example0
shadowY?number

Outer shadow offset in points: x right, y down.

Example2
animations?Animation[]

Animate a supported property when it changes. duration/delay use seconds; from/to set endpoints; repeat and autoreverse control repetition; wrap sets a periodic range.

Example[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Stable identity among siblings.

Practical example

function main() {
  return (
    <HStack spacing={12}>
      <Polyline
        width={100}
        height={80}
        points={[
          { x: 0, y: 70 },
          { x: 50, y: 10 },
          { x: 100, y: 70 },
        ]}
        closed={false}
        background="#30B3A244"
        stroke={$env.accent}
      />
      <Polyline
        width={100}
        height={80}
        points={[
          { x: 0, y: 70 },
          { x: 50, y: 10 },
          { x: 100, y: 70 },
        ]}
        closed={true}
        background="#30B3A244"
        stroke={$env.accent}
      />
    </HStack>
  );
}

Animation

Animation

widthheightxyopacitybackgroundblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

When omitted

The table lists omission behavior verified against implementation. Property examples are copyable syntax, not defaults. Pass explicit values for a fixed result; contextual dimensions and theme colors are not fixed constants.

PropertiesWhen omitted
closedfalse
background"clear"
lineWidth2
trimStart0
trimEnd1
strokeHDR($env.dark ? 'white' : 'black')

Path

LineChart

Color / Gradient

Arc

Previous

Map

Next step

On this page

ExampleUsagePropertiesPractical exampleAnimationWhen omittedRelated APIs