CapDriveRectangle
繪製帶可選圓角的矩形，用於背景、進度條和邊框。background 填充內部，stroke 描邊，lineWidth 與 strokePosition 控制描邊寬度和位置。
範例
function main() {
return (
<Rectangle
width={160}
height={80}
cornerRadius={16}
background={LinearGradient(['#A9E56F', '#30B3A2'])}
stroke={$env.foreground}
lineWidth={2}
strokePosition="inside"
/>
);
}
使用說明
- background 填內部，stroke 畫邊界。cornerRadius 不超過短邊一半；inside 在內、center 跨邊、outside 在外，外側描邊可能被父級裁切。
- mask 使用透明度：不透明處保留、透明處隱藏。同 alpha 的黑白效果相同。不參與主體版面，請明確設定尺寸，並區分 clipped 的邊界裁切。
- background/stroke 接受 Color 或 Gradient。用三種 Gradient 建構函式；色標位置及中心為 0–1，徑向半徑為點。HDR 包裝單色，亮度效果取決於裝置和顯示環境。
屬性
background?Paint背景填色，接受顏色或漸層；clear 表示透明。
HDR($env.dark ? "white" : "black")cornerRadius?number圓角半徑，單位為點。
0stroke?Paint描邊可用顏色或漸層；clear 隱藏描邊。
"clear"lineWidth?number描邊寬度，單位為點；0 不繪製。
2strokePosition?"inside" | "center" | "outside"描邊位置：inside 內側、center 置中、outside 外側。
"inside"lineCap?"round" | "butt" | "square"線端：butt 截斷、square 延伸方頭、round 圓頭。
"round"lineJoin?"round" | "miter" | "bevel"線段接點：miter 尖角、round 圓角、bevel 斜角。
"round"dash?number[]交替實線及空白的長度，單位為點；空陣列為實線。
[]dashPhase?number虛線樣式沿路徑的位移，單位為點。
0trimStart?numbertrimStart 至 trimEnd 控制 0–1 的可見路徑；Circle/Ellipse/Arc 使用角度。
0trimEnd?numbertrimStart 至 trimEnd 控制 0–1 的可見路徑；Circle/Ellipse/Arc 使用角度。
1通用屬性
width?number | "auto" | "fill"寬度：點數、自動測量或填滿父區域。
"fill"height?number | "auto" | "fill"高度：點數、自動測量或填滿父區域。
"fill"x?number視覺位移，單位為點：x 向右、y 向下，不改變版面佔位。
0y?number視覺位移，單位為點：x 向右、y 向下，不改變版面佔位。
0transform?ViewTransform整體視覺變換不改變版面。平移用點，旋轉及傾斜用度，縮放 1 不變，錨點用 0–1。
{rotation: 0}opacity?number整個 View 的不透明度：0 完全透明，1 完全不透明。
1clipped?boolean是否裁切超出 View 邊界的內容。
falseclip?"rectangle" | "ellipse"裁切形狀：rectangle 矩形或 ellipse 橢圓；Material 另可用 false 停用。
"rectangle"mask?View | null透明度遮罩 View，置中顯示且不影響佈局；null 表示不使用遮罩。
<Circle width="fill" height="fill" background="white"/>zIndex?number同層 View 的繪製順序，數值越大越靠前。
0blur?number模糊半徑，單位為點；0 不模糊。
4innerShadow?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 隱藏陰影。
0shadowRadius?number外部陰影模糊半徑，單位為點。
4shadowX?number外部陰影位移，單位為點：x 向右、y 向下。
0shadowY?number外部陰影位移，單位為點：x 向右、y 向下。
2animations?Animation[]屬性改變時播放動畫。duration/delay 用秒，from/to 設端點，repeat/autoreverse 控制重複，wrap 設週期。
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | number兄弟節點中的穩定識別碼。
組合範例
function main() {
return (
<HStack spacing={20}>
<Rectangle
width={90}
height={60}
background="clear"
stroke={$env.accent}
lineWidth={8}
strokePosition="inside"
/>
<Rectangle
width={90}
height={60}
background="clear"
stroke={$env.accent}
lineWidth={8}
strokePosition="outside"
/>
</HStack>
);
}
動畫
widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY省略時的行為
下表是經實作核對的省略行為；屬性範例不是預設值。固定效果應明確傳值，尺寸和主題色等依環境變動，不能視為常數。
| 屬性 | 省略時的行為 |
|---|---|
cornerRadius | 0 |
lineWidth | 2 |
strokePosition | "inside" |
trimStart | 0 |
trimEnd | 1 |
background | HDR($env.dark ? 'white' : 'black') |