Rotation and Direction of ArcSegment

2.7k views Asked by At

Is there a way to get an ArcSegment to draw in a particular direction? As far as I can tell, it is always drawing top to bottom to top. For example, I have an ArcSegment which starts at 180 degrees (270 degrees is north) and draws an almost ellipse to 180 degrees. Right now, the drawing goes clockwise from....well, sorry, let me show you.

things

The left-hand one is the values I receive from a conversion set of values, but I need it to act like the right-hand one.

<Canvas Background="#FDB" Width="720" Height="540">
  <Path Canvas.Left="100" Canvas.Top="100" Stroke="#385D8A" StrokeThickness="2" StrokeLineJoin="Round" Fill="#4F81BD">
    <!-- this is the LEFT shape that I need drawn like the other one -->
    <Path.Data>
      <GeometryGroup>
        <PathGeometry>
          <PathGeometry.Figures>
            <PathFigure StartPoint="0,51" IsClosed="True">
              <PathFigure.Segments>
                <LineSegment Point="51,51" />
              </PathFigure.Segments>
            </PathFigure>
            <PathFigure StartPoint="25.5,0">
              <PathFigure.Segments>
                <LineSegment Point="25.5,102" />
              </PathFigure.Segments>
            </PathFigure>
            <PathFigure StartPoint="25.5,51" IsClosed="True" >
              <PathFigure.Segments>
                <ArcSegment Size="25.5,25.5" IsLargeArc="True" SweepDirection="Clockwise" Point="25.49,51" />
              </PathFigure.Segments>
            </PathFigure>
          </PathGeometry.Figures>
        </PathGeometry>
      </GeometryGroup>
    </Path.Data>
  </Path>
  <Path Canvas.Left="200" Canvas.Top="100" Stroke="#385D8A" StrokeThickness="2" StrokeLineJoin="Round" Fill="#4F81BD">
    <!-- this is the RIGHT shape, the way it should behave, but notice the different StartPoint and Point -->
    <Path.Data>
      <GeometryGroup>
        <PathGeometry>
          <PathGeometry.Figures>
            <PathFigure StartPoint="0,51" IsClosed="True">
              <PathFigure.Segments>
                <LineSegment Point="51,51" />
              </PathFigure.Segments>
            </PathFigure>
            <PathFigure StartPoint="25.5,0">
              <PathFigure.Segments>
                <LineSegment Point="25.5,102" />
              </PathFigure.Segments>
            </PathFigure>
            <PathFigure StartPoint="51,25.5" IsClosed="True" >
              <PathFigure.Segments>
                <ArcSegment Size="25.5,25.5" IsLargeArc="True" SweepDirection="Clockwise" Point="50.99,25.5" />
              </PathFigure.Segments>
            </PathFigure>
          </PathGeometry.Figures>
        </PathGeometry>
      </GeometryGroup>
    </Path.Data>
  </Path>
</Canvas>

I've tried toying around with RotationAngle, but that doesn't seem to have any effect as it works only with the X-axis, not Y-axis.

The first Path's values come from a conversion routine, so it's not that I can easily modify them.

1

There are 1 answers

0
Todd Main On BEST ANSWER

I think I've figured it out - just make the Y-axis shorter instead of the X-axis. So:

<PathFigure StartPoint="51,25.5" IsClosed="True" >
    <PathFigure.Segments>
        <ArcSegment Point="50.99,25.5" Size="25.5,25.5" IsLargeArc="True" SweepDirection="Clockwise"  />
    </PathFigure.Segments>
</PathFigure>

should be:

<PathFigure StartPoint="51,25.5" IsClosed="True" >
    <PathFigure.Segments>
        <ArcSegment Point="51,24.99" Size="25.5,25.5" IsLargeArc="True" SweepDirection="Clockwise"  />
    </PathFigure.Segments>
</PathFigure>

As simple as that.