Polyline

依次連線一組點繪製折線。closed 可連線末點與首點形成閉合輪廓，並允許填充；坐標使用當前 View 內的點數。

範例

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}
    />
  );
}

使用說明

points 依陣列順序連線，少於兩點不畫。closed=true 連接首尾並允許 background。座標是本地點數，不是百分比；適應尺寸需自行計算。
contentAnimation 過渡文字、圖片或結構資料。interpolate 要求 Polyline 點數/closed、Path 命令序列或圖表結構相容；結構變動時直接更新。

屬性

pointsReadonlyArray<ViewPoint>

局部點座標，單位為 pt。少於兩個點時不繪製。

範例[{x: 0, y: 20}, {x: 40, y: 0}, {x: 80, y: 40}]

closed?boolean

最後一點連回起點；閉合後可用 background 填色。

範例false

background?Paint

閉合折線內部的填滿筆刷。closed 為 false 時不繪製填滿。

範例"clear"

stroke?Paint

描邊可用顏色或漸層；clear 隱藏描邊。

範例HDR($env.dark ? "white" : "black")

lineWidth?number

描邊寬度，單位為點；0 不繪製。

範例2

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

線端：butt 截斷、square 延伸方頭、round 圓頭。

範例"round"

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

線段接點：miter 尖角、round 圓角、bevel 斜角。

範例"round"

dash?number[]

交替實線及空白的長度，單位為點；空陣列為實線。

範例[]

dashPhase?number

虛線樣式沿路徑的位移，單位為點。

範例0

trimStart?number

trimStart 至 trimEnd 控制 0–1 的可見路徑；Circle/Ellipse/Arc 使用角度。

範例0

trimEnd?number

trimStart 至 trimEnd 控制 0–1 的可見路徑；Circle/Ellipse/Arc 使用角度。

範例1

contentAnimation?ContentAnimation

可選內容過渡。interpolate 要求點數和閉合狀態相同，否則直接更新。

範例{type: "interpolate", duration: 0.25}

通用屬性

width?number | "auto" | "fill"

寬度：點數、自動測量或填滿父區域。

範例"fill"

height?number | "auto" | "fill"

高度：點數、自動測量或填滿父區域。

範例"fill"

x?number

視覺位移，單位為點：x 向右、y 向下，不改變版面佔位。

範例0

y?number

視覺位移，單位為點：x 向右、y 向下，不改變版面佔位。

範例0

transform?ViewTransform

整體視覺變換不改變版面。平移用點，旋轉及傾斜用度，縮放 1 不變，錨點用 0–1。

範例{rotation: 0}

opacity?number

整個 View 的不透明度：0 完全透明，1 完全不透明。

範例1

clipped?boolean

是否裁切超出 View 邊界的內容。

範例false

clip?"rectangle" | "ellipse"

裁切形狀：rectangle 矩形或 ellipse 橢圓；Material 另可用 false 停用。

範例"rectangle"

mask?View | null

透明度遮罩 View，置中顯示且不影響佈局；null 表示不使用遮罩。

範例<Circle width="fill" height="fill" background="white"/>

zIndex?number

同層 View 的繪製順序，數值越大越靠前。

範例0

blur?number

模糊半徑，單位為點；0 不模糊。

範例4

innerShadow?DrawingEffect

特效的顏色、不透明度、模糊半徑及 x/y 位移；距離用點。

範例{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

特效的顏色、不透明度、模糊半徑及 x/y 位移；距離用點。

範例{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

外部陰影顏色。

範例HDR("black")

shadowOpacity?number

外部陰影不透明度 0–1；0 隱藏陰影。

範例0

shadowRadius?number

外部陰影模糊半徑，單位為點。

範例4

shadowX?number

外部陰影位移，單位為點：x 向右、y 向下。

範例0

shadowY?number

外部陰影位移，單位為點：x 向右、y 向下。

範例2

animations?Animation[]

屬性改變時播放動畫。duration/delay 用秒，from/to 設端點，repeat/autoreverse 控制重複，wrap 設週期。

範例[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

兄弟節點中的穩定識別碼。

組合範例

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>
  );
}

動畫

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

省略時的行為

下表是經實作核對的省略行為；屬性範例不是預設值。固定效果應明確傳值，尺寸和主題色等依環境變動，不能視為常數。

屬性	省略時的行為
`closed`	`false`
`background`	`"clear"`
`lineWidth`	`2`
`trimStart`	`0`
`trimEnd`	`1`
`stroke`	`HDR($env.dark ? 'white' : 'black')`

範例

使用說明

屬性

組合範例

動畫

省略時的行為

Path

LineChart

Color / Gradient

本頁內容

Polyline

範例

使用說明

屬性

組合範例

動畫

省略時的行為

相關 API

Path

LineChart

Color / Gradient

本頁內容