2012-08-31 5 views
5

Wie ist der einfachste Weg, einen Pfeil am Ende einer zu zeichnen? Der schwierige Teil besteht darin, die richtige Rotation zu erhalten, um das ankommende Liniensegment zu bearbeiten.Zeichnen eines Pfeilendes auf einem Quadratischen Bezier-Segment mit Xaml

Irgendwelche Ideen, wie man das macht? Sollte ich PathSegment verlängern?

Bezier segment with an arrow at the end

Ich habe dies bekam eine einfache Bezier-Linie zu ziehen.

<Path Stroke="Black" StrokeThickness="1"> 
    <Path.Data> 
    <PathGeometry> 
     <PathGeometry.Figures> 
     <PathFigureCollection> 
      <PathFigure StartPoint="100,430"> 
      <PathFigure.Segments> 
       <PathSegmentCollection> 
       <QuadraticBezierSegment Point1="150,250" Point2="250,300" /> 
       </PathSegmentCollection> 
      </PathFigure.Segments> 
      </PathFigure> 
     </PathFigureCollection> 
     </PathGeometry.Figures> 
    </PathGeometry> 
    </Path.Data> 
</Path> 
+1

Ist 'Path' Ihrer' QuadraticBezierSegment' statisch? (Es sieht aus wie es aus Ihrem Code, aber Sie erwähnt, dass der Pfeil mit dem Segment ausrichten, so dass ich nicht sicher bin) – Rachel

+0

Ja, es ist statisch, aber es wäre bequem, wenn die Rotation automatisch berechnet wurde. – vidstige

Antwort

8

Sie können die Geometrie für den Pfeilkopf definieren .... aber es würde Versuch und Irrtum nehmen orientiert es richtig am Ende der Bézier-Kurve zu.

Stattdessen könnten Sie dieses Steuerelement verwenden und die Endkappe definieren, die Sie mit Geometrie verwenden möchten, und es wird ordnungsgemäß am Ende der "Linie" platziert.

  • http://blogs.msdn.com/b/mrochon/archive/2011/01/10/custom-line-caps-in-wpf.aspx

    <loc:CappedLine Stroke="Red" StrokeThickness="1" Canvas.Left="40" Canvas.Top="200" RenderTransformOrigin="0.5,0.5" Height="107" Width="195"> 
        <loc:CappedLine.EndCap> 
         <GeometryGroup> 
          <LineGeometry StartPoint="0,0" EndPoint="10,10"/> 
          <LineGeometry StartPoint="0,0" EndPoint="10,-10"/> 
         </GeometryGroup> 
        </loc:CappedLine.EndCap> 
        <loc:CappedLine.LinePath> 
         <PathGeometry Figures="M0,0 C1,1 10.5,75.5 48.5,66.5 86.5,57.5 5,3.5000146 105.5,16.500091 157.5,29.500166 164.5,87.500505 164.5,87.500505" /> 
        </loc:CappedLine.LinePath> 
    </loc:CappedLine> 
    
    <loc:CappedLine Stroke="Red" StrokeThickness="1" Canvas.Left="180" Canvas.Top="200" RenderTransformOrigin="0.5,0.5" Height="107" Width="195"> 
        <loc:CappedLine.EndCap> 
         <GeometryGroup> 
          <LineGeometry StartPoint="0,0" EndPoint="10,10"/> 
          <LineGeometry StartPoint="0,0" EndPoint="10,-10"/> 
         </GeometryGroup> 
        </loc:CappedLine.EndCap> 
        <loc:CappedLine.LinePath> 
         <PathGeometry Figures="M0,0 C1,1 10.5,75.5 48.5,66.5 86.5,57.5 5,3.5000146 105.5,16.500091" /> 
        </loc:CappedLine.LinePath> 
    </loc:CappedLine> 
    

enter image description here

Verwandte Themen