Pfeil mit Polygonen zeichnen: Linie steht über

Hallo Leute,

ich möchte gerne einen Pfeil (bestehend aus einer Linie und einem Dreieck) mit Polygonen zeichnen. Das ist soweit kein Problem:

    <Canvas Height="600" Width="400">
        <Polygon Stroke="Black">
            <Polygon.Points>
                <Point X="201" Y="135.0"/>
                <Point X="395.0" Y="135.0"/>
            </Polygon.Points>
        </Polygon>

        <Polygon Stroke="Red">
            <Polygon.Points>
                <Point X="395.0" Y="135.0"/>
                <Point X="377.0" Y="145.0"/>
                <Point X="377.0" Y="126.0"/>
            </Polygon.Points>
        </Polygon>
    </Canvas>

Komischerweise steht die Linie über, obwohl der rechte äußere Punkt des Dreiecks exakt dieselben Koordinaten hat wie der rechte Verbindungspunkt der Linie.

Habt Ihr eine Idee woran das liegen könnte? 🙂

Hallo hypersurf,

hab deinen Quellcode kopiert und in ein komplett leeres Projekt eingefügt. Der Fehler ist einfach nachzuvollziehen. Leider macht er keinen Sinn. Es sieht so aus, wie wenn das Polygon bei dem Punkt einfach fünf Pixel hinzufügt.

Wenn man den Punkt X2 auf 390 legt, dann stimmt die Zeichnung:

        <Canvas Height="600" Width="400">
            <Polygon Stroke="Black">
                <Polygon.Points>
                    <Point X="201.0" Y="135.0"/>
                    <Point X="390.0" Y="135.0"/>
                </Polygon.Points>
            </Polygon>
            <Polygon Stroke="Red">
                <Polygon.Points>
                    <Point X="377.0" Y="145.0"/>
                    <Point X="395.0" Y="135.0"/>
                    <Point X="377.0" Y="125.0"/>
                </Polygon.Points>
            </Polygon>
        </Canvas>

Als optionale Lösung würde ich vorschlagen, kein Polygon zu benutzen. Du hast ja nur zwei Koordinaten, was einer Linie entspricht:

<Canvas Height="600" Width="400">
            <Line X1="201.0" Y1="135.0" X2="395.0" Y2="135.0" Stroke="Black" />
            <Polygon Stroke="Red">
                <Polygon.Points>
                    <Point X="377.0" Y="145.0"/>
                    <Point X="395.0" Y="135.0"/>
                    <Point X="377.0" Y="125.0"/>
                </Polygon.Points>
            </Polygon>
        </Canvas>

Hier funktioniert 395.0 einwandfrei.

mfg

Easy

Hallo,

Leider macht er keinen Sinn

Doch 😃

Ein Polygon ist immer ein geschlossener Körper. Eine richtige Linie kann kein Polygon sein da sie keine Fläche hat. Dafür kannst du einfach das Line Shape verwenden.

Was bei dir passiert ist folgendes: Ein nicht geschlossenes Polygon wird immer mit einer Geraden geschlossen. Das passiert auch hier. Vom Endpunkt geht eine Gerade zurück zum Startpunkt weil das Polygon ja nicht geschlossen angegeben wurde. Die Ecken eines Polygons können verschiedene Formen annehmen, siehe dazu das StrokeLineJoin Property. Mitra (auf Deutsch Gehrung) ist der Standardwert. Zusätzlich kommt daher das StrokeMiterLimit ins Spiel, welches die Größe der Gehrung regelt. Und genau diese Gehrung ist es, die dadrüber steht. Das ist vollkommen korrekt, daher auch oben meine Antwort mit doch. Setz das Property auf 1, dann steht auch nichts mehr über.

Danke für die perfekte Erklärung 😃