CapDrive
Руководство

Path

Создавайте пути с помощью таких команд, как перемещение, линия, четырехугольник, куб, дуга и закрытие. Подходит для настройки указателей, кривых и комбинированных контуров, а также настройки правил заливки и обводки.

Пример

function main() {
  return (
    <Path
      commands={[
        { op: 'move', x: 10, y: 80 },
        { op: 'line', x: 60, y: 10 },
        { op: 'line', x: 110, y: 80 },
        { op: 'close' },
      ]}
      background={$env.accent}
      stroke={$env.foreground}
      lineWidth={2}
    />
  );
}

Использование

  • commands выполняются по порядку: move начинает, line/quad/cubic/arc добавляют, close замыкает. x/y у arc — центр. evenOdd создаёт вложенные отверстия. Возврат к началу не заменяет close.
  • contentAnimation меняет текст, изображения и структурные данные. interpolate требует совпадения количества точек/closed Polyline, команд Path или структуры графика. При изменении структуры обновление мгновенное.

Свойства

commandsReadonlyArray<PathCommand>

Локальные команды контура в пунктах. Пустой массив ничего не рисует.

Пример[{op: "move", x: 0, y: 0}, {op: "line", x: 100, y: 80}]
fillRule?"nonZero" | "evenOdd"

Правило заливки: nonZero или evenOdd.

Пример"nonZero"
background?Paint

Заливка внутренней области контура. По умолчанию прозрачная.

Пример"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

Преобразование всего 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

Порядок среди соседей; большее значение выводится впереди.

Пример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 (
    <Path
      width={140}
      height={100}
      fillRule="evenOdd"
      background={$env.accent}
      commands={[
        { op: 'move', x: 0, y: 0 },
        { op: 'line', x: 140, y: 0 },
        { op: 'line', x: 140, y: 100 },
        { op: 'line', x: 0, y: 100 },
        { op: 'close' },
        { op: 'move', x: 35, y: 25 },
        { op: 'line', x: 105, y: 25 },
        { op: 'line', x: 105, y: 75 },
        { op: 'line', x: 35, y: 75 },
        { op: 'close' },
      ]}
    />
  );
}

Анимация

Анимация

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

При пропуске

Таблица описывает проверенное поведение без свойства. Примеры не являются значениями по умолчанию. Фиксированный результат требует явных значений; размеры и цвета темы зависят от контекста.

СвойстваПри пропуске
commands[]
fillRule"nonZero"
background"clear"
lineWidth2
strokeHDR($env.dark ? 'white' : 'black')

Polyline

Color / Gradient

Map

Предыдущее

BarChart

Следующий шаг

На этой странице

ПримерИспользованиеСвойстваПрактический примерАнимацияПри пропускеСвязанные API