Wie kann ich Linien bis zu einem Kreisrand auf einem Canvas anzeigen lassen?
Hallo,
nachdem ich mit MonoGame nicht zum Ziel kam, möchte ich dies nun mit WPF versuchen zu erreichen. (s. Thread Kann ich mit MonoGame ein Objekt definieren, auf dem jeglicher Inhalt am Rand abgeschnitten wird?).
Nochmal zum Verständnis:
Ich möchte kein vorhandenes Bild als ein rundes anzeigen lassen (clipping).
Das Bild https://cdn.mycsharp.de/attachments/attachment-15437.jpg stellt nicht das gesamte Window/Fenster dar und ist deshalb nur ein Ausschnitt davon.
Das Ziel ist es, dass diejenigen magenta-farbigen Linien mit wechselnden X/Y-Koordinaten automatisch dort abgeschnitten werden sollen, die oberhalb des Halbkreises hinausragen (also noch innerhalb des Monitor-Rechtecks). Eine Ermittlung des Schnittpunktes finde ich zu aufwändig.
Ich habe mit WPF ein rechteckiges Canvas erzeugt und habe die Ränder mit ClipToBounds = true gesetzt. Somit ist mein Monitor nach außen hin abgeschnitten. Soweit gut. Mit 3 Herangehensweisen komme ich aber nicht zum Ziel:
- Ich habe einen Kreis mittels Ellipse auf das rechteckige Canvas gesetzt. Die Linien darüber werden dann aber natürlich nicht abgeschnitten, da sie schließlich auf dem rechteckigen Canvas sind.
- Ich habe nirgends gefunden, ob man ein rundes Canvas erzeugen kann. Dies wäre die optimale Lösung für mich.
- Was ich noch versucht habe war folgender Code (=Eckenabrundung, hat aber nicht funktioniert, auch mit anderen Werten):
<Grid>
<Canvas x:Name="canvas_ND" HorizontalAlignment="Left" Height="400" Margin="200,100,0,0" VerticalAlignment="Top" Width="400" Background="#000000">
<Border BorderThickness="0" CornerRadius="309,309,309,309" Width="618" Height="618" Margin="-109,41">
<Canvas x:Name="canvas_ND_unten" Margin="0,0,0,0" Background="#FF0000">
</Canvas>
</Border>
</Canvas>
<Button Content="Button" HorizontalAlignment="Left" Margin="1150,346,0,0" VerticalAlignment="Top" Width="334" Height="290" Click="Button_Click"/>
</Grid>
canvas_ND ist das Rechteck und
canvas_ND_unten der nicht gelungene Kreis.
Hallo,
da hatte ich dir doch schon einen Link für WPF im anderen Beitrag gegeben.
Die Eigenschaft Clip gilt für alle von UIElement abgeleiteten Controls (also auch Canvas).
Du mußt also nur eine passende Geometrie für den Kreis (bzw. Rechteck mit oberen Kreisbogen) erstellen.
Eine Minute zu spät 😄
Ich was nicht ganz was Du vor hast und kenne das andere Thema nicht, aber Rundungen und über Rundungen abschneiden - warum nicht nur das unter der Rundung anzeigen?
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Background="Gray" Height="200" Width="200">
<Grid.Clip>
<EllipseGeometry RadiusX="120" RadiusY="100" Center="100,100" />
</Grid.Clip>
<!-- Das Bild -->
<Grid Background="DarkGray" Margin="15,15" />
</Grid>
</Grid>
Sieht so aus:
Nachdem ich den von User Palladin007 geposteten Code mit GRID durch CANVAS ersetzt habe funktioniert es jetzt endlich wie gewünscht. Vielen Dank an alle!
Nur so am Rande:
Klar geht das auch mit WPF (Stichwort: Z-Layer). Und Abschneiden geht mittels "Region clipping", s.
> .
Da steht die Lösung schon seit 8 Tagen, sogar mit einem Bild, wo es klar wird, dass das passt.
Ich frag mich, warum es immer mehr Leute gibt, die nicht selber nachlesen wollen ...
Woher kommt der Glaube, sowas komplexes wie ein Programm zu entwickeln, ohne sowas wie eine Doku oder einen Blog zu lesen?
Oder sind Leute wie ich daran schuld, weil Leute wie ich Code-Snippets posten?
Das ist genau der Grund warum ich immer in einem kurzen Satz antworte
Hallo,
die letzten beiden Posts möchte ich nicht unkommentiert lassen. Ich besitze das Buch „C# 6 mit Visual Studio 2015“, welches ich 2017 angefangen habe zu lesen. Aufgrund der großen Informationsflut und den vielen Bezeichnungen habe ich damals die Lust verloren und nichts mehr mit C# gemacht. Vor kurzem habe ich durch Nachlesen im Buch und einem Tutorial erst verstanden, wie Klassen verwendet werden. Ich muss zu meiner Person sagen, dass ich mehr praktisch veranlagt bin und deshalb reines Theorie-Lesen eines Buches mit Hunderten von Seiten nicht weit komme, da ich vieles schnell vergesse. Deshalb habe ich kleine Projekte mit VS 2019 gemacht, um zu testen ob meine Vorstellungen programmtechnisch machbar sind. Dazu ziehe ich meist das Internet zu Rate und suche im Index des Buches nach dem passenden Begriff, sofern mir dieser überhaupt bekannt ist. Wenn ich nach wenigen Stunden Recherche nicht weiterkomme (Internet, Microsoft Doku, o.g. Buch), schreibe ich eben ins Forum. Wenn mir dann bspw. Begriffe wie „Clipping“ in den Raum geworfen werden fand ich im Internet als auch im Buch nichts für mich passendes heraus. Als dann von einem anderen User der XAML-Code mit <Grid.Clip> kam, habe ich mein Problem erst mit diesem konkreten Beispiel lösen können. Dass dies über den XAML-Code lösbar ist, habe ich nicht gewusst geschweige denn irgendwo verständlich gefunden. Speziell der Link zu https://www.c-sharpcorner.com/uploadfile/mahesh/clipping-or-cropping-images-in-wpf/ hat mir nicht gezeigt, dass das auch mit Canvas funktionieren kann.
Wie auch immer, meine Programmierkenntnisse müssen mir nur im Bereich meines Hobbys genügen, nicht unbedingt als Profi. Und ich bin, abgesehen von Javascript/CSS/HTML, Anfänger mit einer objektorientierten Sprache.
Viele Grüße