CapDrive
使用指南

Arc

按起始角和掃過角度繪製橢圓弧，適合刻度弧線與進度顯示。邊界由寬高確定，描邊可配置寬度、端點和位置，完整閉合時允許背景填充。

範例

function main() {
  return (
    <Arc
      width={120}
      height={120}
      startAngle={-90}
      sweepAngle={240}
      stroke={$env.accent}
      lineWidth={8}
      lineCap="round"
      strokePosition="center"
    />
  );
}

使用說明

  • Ellipse 和 Arc 使用完整寬高作橢圓邊界，寬高相同才是圓。部分圓弧保持開放，不連回圓心成扇形；background 僅完整閉合一圈時填色。
  • 角度用度：0 向右、90 向下、正 sweep 順時針。startAngle 以 360 歸一化，sweepAngle 限 −360…360 並保留方向；0 不畫，±360 整圈。startAngle 可用 wrap:360，sweepAngle 不可。
  • background/stroke 接受 Color 或 Gradient。用三種 Gradient 建構函式；色標位置及中心為 0–1，徑向半徑為點。HDR 包裝單色，亮度效果取決於裝置和顯示環境。

屬性

startAngle?number

起始角度，單位為度；取樣時按 360° 取模。

範例-90
sweepAngle?number

掃角，單位為度；取樣時限制在 -360…360。正值為順時針，不支援 wrap。

範例270
background?Paint

完整封閉圓或橢圓的填滿筆刷。部分弧線不繪製填滿。

範例"clear"
stroke?Paint

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

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

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

範例2
strokePosition?"inside" | "center" | "outside"

描邊相對於完整圓或橢圓輪廓的位置，預設為 inside。

範例"inside"
lineCap?"round" | "butt" | "square"

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

範例"round"
dash?number[]

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

範例[]
dashPhase?number

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

範例0
通用屬性
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?ArcAnimation[]

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

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

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

組合範例

function main() {
  return (
    <Arc
      width={180}
      height={100}
      startAngle={180}
      sweepAngle={180}
      background="clear"
      stroke={LinearGradient(['#30B3A2', '#A9E56F'])}
      lineWidth={8}
      strokePosition="inside"
      lineCap="round"
    />
  );
}

動畫

動畫

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

省略時的行為

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

屬性省略時的行為
startAngle-90
sweepAngle270
lineWidth2
strokePosition"inside"
background"clear"
strokeHDR($env.dark ? 'white' : 'black')

Circle

Ellipse

RadialLayout

Color / Gradient

Line

上一個

Polyline

下一步

本頁內容

範例使用說明屬性組合範例動畫省略時的行為相關 API