CapDrive
使用指南

Line

在本地坐标中的两个端点之间绘制直线。适合指示线、刻度和分隔线，可设置颜色、宽度、虚线与端点样式。

示例

function main() {
  return (
    <Line
      start={{ x: 0, y: 20 }}
      end={{ x: 160, y: 60 }}
      stroke={$env.accent}
      lineWidth={4}
      lineCap="round"
    />
  );
}

用法说明

  • start/end 是本地坐标，原点在左上，x 向右、y 向下。固定端点不会因 width/height 变化而按比例缩放；需要响应尺寸时，用可用宽高计算端点。Line 没有可填充的内部区域。
  • 布局先决定占位，再应用 x/y 和 transform。把一个子 View 右移 20 点，不会把后面的兄弟推开；要改变间隔用 spacing 或 Spacer。旋转、缩放会作用于已经绘制好的整个 View。

属性

start?ViewPoint

线段端点的局部坐标，单位为点；x 向右，y 向下。

示例{x: 0, y: 0}
end?ViewPoint

线段端点的局部坐标，单位为点；x 向右，y 向下。

示例{x: 100, y: 80}
stroke?Paint

描边填色，可以是颜色或渐变；clear 隐藏描边。

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

描边宽度，单位为点；0 不绘制描边。

示例2
lineCap?"round" | "butt" | "square"

线端形状：butt 在端点截断，square 向外延伸方头，round 圆头。

示例"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
通用属性
width?number | "auto" | "fill"

宽度：点数、自动测量或填满父区域。

示例"fill"
height?number | "auto" | "fill"

高度：点数、自动测量或填满父区域。

示例"fill"
x?number

视觉偏移，单位为点：x 向右、y 向下，不改变布局占位。

示例0
y?number

视觉偏移，单位为点：x 向右、y 向下，不改变布局占位。

示例0
transform?ViewTransform

对整个 View 做视觉变换，不改变布局。平移用点，旋转和倾斜用角度，缩放 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 (
    <Line
      width={$env.width}
      height={40}
      start={{ x: 0, y: 20 }}
      end={{ x: $env.width, y: 20 }}
      stroke={$env.accent}
      lineWidth={3}
      dash={[8, 4]}
      dashPhase={0}
    />
  );
}

动画

动画

widthheightxyopacityblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYstart.xstart.yend.xend.y

省略时的行为

下表只列经实现核对的省略行为；属性旁的示例是可复制写法，不是默认值。需要固定效果时显式传值，尺寸、主题颜色等随上下文变化的属性不要当作固定常量。

属性省略时的行为
lineWidth2
lineCap"round"
trimStart0
trimEnd1
dash[]
dashPhase0
strokeHDR($env.dark ? 'white' : 'black')

Polyline

Path

Color / Gradient

Rectangle

上一个

Arc

下一步

本页内容

示例用法说明属性组合示例动画省略时的行为相关 API