CapDrive
Guia de uso

Polyline

Desenhe uma polilinha conectando um conjunto de pontos em sequência. closed pode conectar o último ponto e o primeiro ponto para formar um contorno fechado e permite o preenchimento; as coordenadas usam o número de pontos no View atual.

Exemplo

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

Uso

  • points conecta na ordem; menos de dois não desenha. closed=true liga fim e início e permite background. Coordenadas são pontos, não percentuais; calcule para adaptar dimensões.
  • contentAnimation transiciona texto, imagem ou dados estruturados. interpolate exige pontos/closed Polyline, sequência Path ou amostras compatíveis. Mudanças estruturais atualizam imediatamente.

Propriedades

pointsReadonlyArray<ViewPoint>

Coordenadas locais em pontos. Menos de dois pontos não desenham nada.

Exemplo[{x: 0, y: 20}, {x: 40, y: 0}, {x: 80, y: 40}]
closed?boolean

Liga o último ponto ao primeiro; fechado permite preenchimento background.

Exemplofalse
background?Paint

Preenchimento de uma polilinha fechada. Ignorado se closed for false.

Exemplo"clear"
stroke?Paint

Cor ou gradiente do traço; clear o oculta.

ExemploHDR($env.dark ? "white" : "black")
lineWidth?number

Espessura do traço em pontos; 0 não desenha traço.

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

Ponta da linha: butt corta, square estende em quadrado, round arredonda.

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

Formato das junções: miter, round ou bevel.

Exemplo"round"
dash?number[]

Comprimentos alternados de traço e espaço em pontos; matriz vazia faz linha contínua.

Exemplo[]
dashPhase?number

Deslocamento do padrão tracejado em pontos.

Exemplo0
trimStart?number

Trecho visível trimStart–trimEnd entre 0 e 1. Circle/Ellipse/Arc usam ângulos.

Exemplo0
trimEnd?number

Trecho visível trimStart–trimEnd entre 0 e 1. Circle/Ellipse/Arc usam ângulos.

Exemplo1
contentAnimation?ContentAnimation

Transição de conteúdo opcional. interpolate exige o mesmo número de pontos e estado de fechamento; caso contrário, atualiza imediatamente.

Exemplo{type: "interpolate", duration: 0.25}
Propriedades comuns
width?number | "auto" | "fill"

Largura em pontos, tamanho automático ou preenchimento do contêiner.

Exemplo"fill"
height?number | "auto" | "fill"

Altura em pontos, tamanho automático ou preenchimento do contêiner.

Exemplo"fill"
x?number

Deslocamento visual em pontos: x à direita, y para baixo; não muda o espaço no layout.

Exemplo0
y?number

Deslocamento visual em pontos: x à direita, y para baixo; não muda o espaço no layout.

Exemplo0
transform?ViewTransform

Transforma o View inteiro sem mudar o layout. Translação em pontos, rotação/inclinação em graus, escala 1 sem mudança, âncoras 0–1.

Exemplo{rotation: 0}
opacity?number

Opacidade de todo o View: 0 transparente, 1 opaco.

Exemplo1
clipped?boolean

Recorta o desenho que ultrapassa os limites do View.

Exemplofalse
clip?"rectangle" | "ellipse"

Recorte rectangle ou ellipse; Material também aceita false para desativar.

Exemplo"rectangle"
mask?View | null

View de máscara alfa. Centralizada sem afetar o layout; null desativa a máscara.

Exemplo<Circle width="fill" height="fill" background="white"/>
zIndex?number

Ordem entre elementos irmãos; valores maiores ficam na frente.

Exemplo0
blur?number

Raio do desfoque em pontos; 0 desativa.

Exemplo4
innerShadow?DrawingEffect

Cor, opacidade, raio de desfoque e deslocamento x/y do efeito; distâncias em pontos.

Exemplo{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Cor, opacidade, raio de desfoque e deslocamento x/y do efeito; distâncias em pontos.

Exemplo{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Cor da sombra externa.

ExemploHDR("black")
shadowOpacity?number

Opacidade da sombra entre 0 e 1; 0 oculta.

Exemplo0
shadowRadius?number

Raio de desfoque da sombra externa em pontos.

Exemplo4
shadowX?number

Deslocamento da sombra em pontos: x à direita, y para baixo.

Exemplo0
shadowY?number

Deslocamento da sombra em pontos: x à direita, y para baixo.

Exemplo2
animations?Animation[]

Anima mudanças de propriedade. duration/delay em segundos; from/to são extremos; repeat/autoreverse controlam repetição e wrap o período.

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

Identidade estável entre elementos irmãos.

Exemplo prático

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

Animação

Animação

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

Quando omitido

A tabela apresenta omissões verificadas na implementação. Exemplos não são padrões. Para resultado fixo, passe valor explícito; dimensões e cores de contexto não são constantes.

PropriedadesQuando omitido
closedfalse
background"clear"
lineWidth2
trimStart0
trimEnd1
strokeHDR($env.dark ? 'white' : 'black')

Path

LineChart

Color / Gradient

Arc

Anterior

Map

Próximo passo

Nesta página

ExemploUsoPropriedadesExemplo práticoAnimaçãoQuando omitidoAPIs relacionadas