Dibujar una flecha en un segmento de Bezier cuadrático usando xaml

¿Cuál es la forma más fácil de dibujar una flecha al final de QuadraticBezierSegment? La parte difícil es obtener la rotación correcta para ajustar el segmento de línea entrante.Dibujar una flecha en un segmento de Bezier cuadrático usando xaml

¿Alguna idea sobre cómo hacerlo? ¿Debo extender PathSegment?

Bezier segment with an arrow at the end

Tengo esto para dibujar una línea Bézier sencilla.

<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>

Fuente

2012-08-31 vidstige

¿El '' path' de su QuadraticBezierSegment' estática? (Parece que proviene de tu código, pero mencionaste que la flecha se alineara con el segmento, así que no estoy seguro) – Rachel

Sí, es estático, pero sería conveniente si la rotación se computara automáticamente. – vidstige

se podría definir la geometría de la punta de la flecha .... pero tendrían que pasar ensayo y error para orientarse correctamente en el extremo de la curva de Bezier.

En lugar de eso, podría usar este control y definir la tapa final que quería usar la geometría y colocarla correctamente al final de la "línea".

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

Fuente

2012-08-31 20:32:09

Dibujar una flecha en un segmento de Bezier cuadrático usando xaml

Respuesta

Cuestiones relacionadas