Sdílet prostřednictvím

Xamarin.Forms Obrazce: Cesta

  • Článek

Třída Path je odvozena od Shape třídy a lze ji použít k kreslení křivek a složitých obrazců. Tyto křivky a obrazce jsou často popsány pomocí Geometry objektů. Informace o vlastnostech, které Path třída dědí z Shape třídy, naleznete v tématu Xamarin.Forms Obrazce.

Path definuje následující vlastnosti:

  • Data, typu Geometry, který určuje obrazec, který se má nakreslit.
  • RenderTransform, typu Transform, který představuje transformaci použitou na geometrii dráhy před jeho vykreslením.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cíle datových vazeb a stylovány.

Další informace o transformacích naleznete v tématu Xamarin.Forms Transformace cesty.

Vytvoření cesty

Chcete-li nakreslit cestu, vytvořte Path objekt a nastavte jeho Data vlastnost. Pro nastavení Data vlastnosti existují dvě techniky:

  • Hodnotu řetězce pro Data xaml můžete nastavit pomocí syntaxe značek cesty. Při tomto přístupu Path.Data hodnota využívá pro grafiku formát serializace. Tuto řetězcovou hodnotu obvykle po vytvoření neupravujete ručně. Místo toho použijete nástroje pro návrh k manipulaci s daty a exportujete je jako fragment řetězce, který je použitelný vlastností Data .
  • Vlastnost můžete nastavit Data na Geometry objekt. Může to být určitý Geometry objekt nebo GeometryGroup kontejner, který funguje jako kontejner, který může kombinovat více geometrických objektů do jednoho objektu.

Vytvoření cesty se syntaxí značek cest

Následující příklad XAML ukazuje, jak nakreslit trojúhelník pomocí syntaxe značek cest:

<Path Data="M 10,100 L 100,100 100,50Z"
      Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Start" />

Řetězec Data začíná příkazem pro přesunutí označeným znakem M, který vytvoří absolutní počáteční bod cesty. L je příkaz řádku, který vytvoří přímku od počátečního bodu k zadanému koncovému bodu. Z je příkaz zavřít, který vytvoří řádek, který spojuje aktuální bod s výchozím bodem. Výsledkem je trojúhelník:

Trojúhelník cesty

Další informace o syntaxi značek cesty naleznete v tématu Xamarin.Forms Syntaxe značek cesty.

Vytvoření cesty s objekty geometrie

Křivky a obrazce lze popsat pomocí Geometry objektů, které slouží k nastavení vlastnosti objektu Path Data . Existuje celá řada Geometry objektů, ze které si můžete vybrat. Třídy EllipseGeometrya , LineGeometryRectangleGeometry popis relativně jednoduché obrazce. Chcete-li vytvořit složitější obrazce nebo vytvořit křivky, použijte .PathGeometry

PathGeometry objekty se skládají z jednoho nebo více PathFigure objektů. Každý PathFigure objekt představuje jiný obrazec. Každý PathFigure objekt se skládá z jednoho nebo více PathSegment objektů, z nichž každý představuje spojovací část obrazce. Typy segmentů zahrnují následující LineSegmenttřídy , BezierSegmenta ArcSegment třídy.

Následující příklad XAML ukazuje, jak nakreslit trojúhelník pomocí objektu PathGeometry :

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Start">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure IsClosed="True"
                                StartPoint="10,100">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <LineSegment Point="100,100" />
                                <LineSegment Point="100,50" />
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

V tomto příkladu je počáteční bod trojúhelníku (10 100). Segment čáry je nakreslen z (10 100) do (100 100) a od (100 100 100) do (100 50). Pak jsou údaje první a poslední segmenty propojeny, protože PathFigure.IsClosed vlastnost je nastavena na true. Výsledkem je trojúhelník:

Trojúhelník cesty

Další informace o geometriích naleznete v tématu Xamarin.Forms Geometrie.