wpf - 使用 xaml 在二次贝塞尔线段上绘制箭头末端

Question

在QuadraticBezierSegment末尾绘制箭头的最简单方法是什么？棘手的部分是获得正确的旋转以匹配传入的线段。

关于如何解决这个问题的任何想法？我应该扩展PathSegment吗？

我有这个来画一条简单的贝塞尔线。

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

Answer 1

您可以定义箭头的几何形状……但要在贝塞尔曲线的末端正确定位它需要反复试验。

相反，您可以使用此控件并使用几何定义所需的收头，并将其正确放置在“线”的末端。

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