Erstellen von organischen Formen in C# - WPF

Question

Ich bin ziemlich neu, wenn es um die grafische Programmierung geht, besonders in C#, weshalb ich mich entschied, ein Projekt zu versuchen, das mir etwas über grafische Programmierung beibringen würde.

(Alle Verfahren beziehen sich auf 2D) Ich habe mich gefragt, ob C# oder WPF irgendwelche Möglichkeiten zur Erzeugung organischer Formen hatten. Mit organischen Formen meine ich Formen ohne harte Ecken, wie Ellipsen. Obwohl ich nicht auf Ellipsen beschränkt sein möchte. Vielleicht gibt es einen besseren Namen für sie, aber ich möchte in der Lage sein Blobs zu ziehen (und ich spreche nicht von SQL ^{ba-dum-tsss ...})

Wenn jemand in irgendeiner Weise helfen kann wäre großartig, ob es eine native C#/WPF-Lösung oder irgendeine Art von nugget/Library, die ich mir ansehen sollte, vorschlägt.

Bearbeiten mit freundlicher Genehmigung von Geoff James: Was ich meine (visuell) durch „organische Formen“ zu this eher ist

Das nächste, was ich Hilfe später brauchen würde, wenn du bei mir bist immer noch die ganz genau Gegenteil.

Ich möchte die Möglichkeit, unregelmäßige Linien zu erstellen. Linien unterschiedlicher Dicke (vorzugsweise variierende Dicken über die gesamte Länge der Linie) und wackeliger Architektur. Zum Beispiel, wenn Sie versuchten, eine Linie in einem sich bewegenden Fahrzeug zu zeichnen, und Ihr Arm sprang über den ganzen Platz, als das Auto Unebenheiten und andere Unregelmäßigkeiten auf der Straße traf.

Dieser zweite Teil glaube ich ein wenig einfacher zu sein. Ich habe das stroke constructor geschaut, und ich glaube, dass es zu schwierig wäre, einen Algorithmus zu schaffen, der natürlich wackelig aussehende Linien machte, aber ich zeichne ein Leerzeichen über die Dicke. Vielleicht hat der Namespace mehr von dem, was ich brauche.

Wenn Sie noch bei mir sind, vielen Dank für das Lesen dieses Romans und das Verleihen Ihrer Hilfe, alles wird sehr geschätzt!

Answer 1

Eine Form ist eine Art von UIElement, mit der Sie eine Form auf dem Bildschirm zeichnen können. Da es sich um UI-Elemente handelt, können Shape-Objekte innerhalb von Panel-Elementen und den meisten Steuerelementen verwendet werden.

WPF bietet verschiedene Zugriffsebenen für Grafik- und Rendering-Dienste. In der obersten Ebene sind Shape-Objekte einfach zu verwenden und bieten viele nützliche Funktionen, z. B. das Layout und die Teilnahme am WPF-Ereignissystem.

WPF stellt eine Reihe von gebrauchsfertigen Shape-Objekten zur Verfügung. Alle Shape-Objekte erben von der Shape-Klasse. Zu den verfügbaren Formobjekten gehören Ellipse, Linie, Pfad, Polygon, Polylinie und Rechteck.

Sie können Path verwenden, um eine Bezierkurve zu generieren.

Es gibt zwei Arten von Pfadsegmenten, die Sie zum Zeichnen von Bézier-Kurven verwenden können. Hierbei handelt es sich um eine spezielle Art von glatter Kurve, die mathematisch unter Verwendung von festen Start- und Endpunkten und einem oder mehreren Kontrollpunkten berechnet wird, die als Tangentenpunkte bezeichnet werden.

Die Tangentenpunkte bestimmen den Weg der Kurve. Wenn Sie eine Linie mit einem einzigen Tangentenpunkt zeichnen, zeigt die Bewegungsrichtung am Anfang und Ende der Kurve direkt auf diesen Punkt. Mit mehr Kontrollpunkten wird die Kurve komplexer.

WPF kann Bézier-Kurven mit einem oder zwei Kontrollpunkten darstellen.

Um eine Bézier-Kurve mit einem einzigen Tangentenpunkt zu erstellen, können Sie einem PathGeometry ein QuadraticBezierSegment hinzufügen.Wie bei anderen Segmenten beginnt die Kurve mit dem Endpunkt des vorherigen Segments oder mit dem Startpunkt des Pfads, wenn die Kurve das erste Segment ist. Die Koordinaten des Startpunkts werden in der Point1-Eigenschaft und der Endpunkt der Kurve in Point2 festgelegt.

<Window x:Class="BezierSegmentDemo.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="WPF Path Demo" 
    Height="200" Width="250"> 
<Canvas> 
    <Path Stroke="#C0000000" StrokeThickness="3"> 
     <Path.Data> 
      <PathGeometry> 
       <PathGeometry.Figures> 
        <PathFigure StartPoint="20,100" IsClosed="False"> 
         <QuadraticBezierSegment Point1="80,150" Point2="200,20"/> 
        </PathFigure> 
       </PathGeometry.Figures> 
      </PathGeometry> 
     </Path.Data> 
    </Path> 
    <Ellipse Canvas.Left="75" Canvas.Top="145" Fill="Blue" Height="10" Width="10" /> 
</Canvas> 

Um eine Kurve mit zwei Tangentenpunkten zu erstellen, können Sie ein BezierSegment Element umfassen. Diese benötigen drei Eigenschaften. Point1 und Point2 definieren die Kontrollpunkte. Point3 bestimmt die Koordinaten des Linienendes.

<Canvas> 
    <Path Stroke="#C0000000" StrokeThickness="3"> 
     <Path.Data> 
      <PathGeometry> 
       <PathGeometry.Figures> 
        <PathFigure StartPoint="20,20" IsClosed="False"> 
         <BezierSegment Point1="70,130" Point2="220,20" Point3="180,160"/> 
        </PathFigure> 
       </PathGeometry.Figures> 
      </PathGeometry> 
     </Path.Data> 
    </Path> 
    <Ellipse Canvas.Left="65" Canvas.Top="125" Fill="Blue" Height="10" Width="10" /> 
    <Ellipse Canvas.Left="215" Canvas.Top="15" Fill="Blue" Height="10" Width="10" /> 
</Canvas> 

Um eine Linie hat mit variierender Dicke Sie tatsächlich zwei oder mehr Zeilen mit einer Dicke dick genug schaffen können mehr oder weniger an verschiedenen Punkten entlang der Kurve zu überlappen. Stellen Sie sich vor, wenn Sie die Kurve einer zweiten Linie leicht ändern, so dass die zwei Linien eine Stelle vollständig überlappen, so dass die Dicke die Dicke von nur einer Linie ist, aber wo sie sich an einem anderen Punkt berühren, so dass die Dicke doppelt so groß ist.

Sie könnten auch einen geschlossenen Pfad mit Füllung erstellen.