CapDrive
Guide d’utilisation

Polyline

Dessinez une polyligne en connectant un ensemble de points en séquence. closed peut relier le dernier point et le premier point pour former un contour fermé, et permet le remplissage ; les coordonnées utilisent le nombre de points dans le View actuel.

Exemple

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

Utilisation

  • points se relient dans l’ordre ; moins de deux points ne dessinent rien. closed=true relie fin et début et autorise background. Les coordonnées sont des points, pas des pourcentages.
  • contentAnimation concerne texte, images et données structurées. interpolate exige des points/closed Polyline, commandes Path ou échantillons compatibles. Un changement de structure produit une mise à jour immédiate.

Propriétés

pointsReadonlyArray<ViewPoint>

Coordonnées locales en points. Aucun tracé avec moins de deux points.

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

Relie le dernier point au premier ; une ligne fermée accepte un fond background.

Exemplefalse
background?Paint

Remplissage d’une polyligne fermée. Ignoré si closed vaut false.

Exemple"clear"
stroke?Paint

Trait de couleur ou dégradé ; clear le masque.

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

Épaisseur du trait en points ; 0 ne dessine aucun trait.

Exemple2
lineCap?"round" | "butt" | "square"

Extrémité : butt coupe au point, square prolonge en carré, round arrondit.

Exemple"round"
lineJoin?"round" | "miter" | "bevel"

Forme des jonctions : miter, round ou bevel.

Exemple"round"
dash?number[]

Longueurs alternées de traits et d’espaces en points ; tableau vide pour un trait continu.

Exemple[]
dashPhase?number

Décalage du motif de tirets en points.

Exemple0
trimStart?number

Intervalle visible de trimStart à trimEnd dans 0–1. Circle/Ellipse/Arc utilisent des angles.

Exemple0
trimEnd?number

Intervalle visible de trimStart à trimEnd dans 0–1. Circle/Ellipse/Arc utilisent des angles.

Exemple1
contentAnimation?ContentAnimation

Transition de contenu facultative. interpolate exige le même nombre de points et le même état de fermeture ; sinon la mise à jour est immédiate.

Exemple{type: "interpolate", duration: 0.25}
Propriétés communes
width?number | "auto" | "fill"

Largeur en points, taille automatique ou remplissage du parent.

Exemple"fill"
height?number | "auto" | "fill"

Hauteur en points, taille automatique ou remplissage du parent.

Exemple"fill"
x?number

Décalage visuel en points : x vers la droite, y vers le bas, sans modifier l’espace de mise en page.

Exemple0
y?number

Décalage visuel en points : x vers la droite, y vers le bas, sans modifier l’espace de mise en page.

Exemple0
transform?ViewTransform

Transformation globale sans changer la mise en page. Translation en points, rotation/inclinaison en degrés, échelle 1 inchangée, ancrages 0–1.

Exemple{rotation: 0}
opacity?number

Opacité globale du View : 0 transparent, 1 opaque.

Exemple1
clipped?boolean

Découpe les dessins dépassant les limites du View.

Exemplefalse
clip?"rectangle" | "ellipse"

Forme de découpe rectangle ou ellipse ; Material accepte aussi false pour la désactiver.

Exemple"rectangle"
mask?View | null

View de masque alpha. Centrée sans modifier la disposition ; null désactive le masque.

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

Ordre entre éléments frères ; les valeurs élevées sont devant.

Exemple0
blur?number

Rayon du flou en points ; 0 le désactive.

Exemple4
innerShadow?DrawingEffect

Couleur, opacité, rayon du flou et décalage x/y de l’effet ; distances en points.

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

Couleur, opacité, rayon du flou et décalage x/y de l’effet ; distances en points.

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

Couleur de l’ombre extérieure.

ExempleHDR("black")
shadowOpacity?number

Opacité de l’ombre de 0 à 1 ; 0 la masque.

Exemple0
shadowRadius?number

Rayon du flou de l’ombre extérieure, en points.

Exemple4
shadowX?number

Décalage de l’ombre en points : x à droite, y en bas.

Exemple0
shadowY?number

Décalage de l’ombre en points : x à droite, y en bas.

Exemple2
animations?Animation[]

Anime les changements de propriété. duration/delay en secondes ; from/to définissent les extrémités ; repeat/autoreverse la répétition, wrap la période.

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

Identifiant stable parmi les éléments frères.

Exemple pratique

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

Animation

Animation

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

En cas d’omission

Le tableau décrit les omissions vérifiées dans l’implémentation. Les exemples de propriétés ne sont pas des valeurs par défaut. Pour un résultat fixe, passez une valeur explicite ; tailles et couleurs contextuelles ne sont pas constantes.

PropriétésEn cas d’omission
closedfalse
background"clear"
lineWidth2
trimStart0
trimEnd1
strokeHDR($env.dark ? 'white' : 'black')

Path

LineChart

Color / Gradient

Arc

Précédent

Map

Étape suivante

Sur cette page

ExempleUtilisationPropriétésExemple pratiqueAnimationEn cas d’omissionAPI associées