2017-06-01 165 views
0

我正在试图用完美的X标记画一个圆。 我设法用X标记的一半绘制一个圆。我不确定如何画下半场。如何用x标记绘制圆圈?

谢谢

<Path Stroke="Black" 
      StrokeThickness="4" Fill="Red" VerticalAlignment="Center" HorizontalAlignment="Center"> 
     <Path.Data> 
      <PathGeometry> 
       <PathGeometry.Figures> 
        <PathFigure StartPoint="0,0"> 
         <PathFigure.Segments> 
          <LineSegment Point="100,100" /> 
          <ArcSegment Size="50,50" 
             RotationAngle="45" 
             IsLargeArc="True" 
             SweepDirection="Clockwise" 
             Point="0,0" /> 
          <ArcSegment Size="50,50" 
             RotationAngle="45" 
             IsLargeArc="True" 
             SweepDirection="Clockwise" 
             Point="100,100" /> 
         </PathFigure.Segments> 
        </PathFigure> 
       </PathGeometry.Figures> 
      </PathGeometry> 
     </Path.Data> 
    </Path> 

回答

0

可以“简化”这个,或者至少使其占用更少的空间,在XAML编辑器,通过using Path Markup SyntaxData之前的部分空白行再现你已经得到:M为“移动”,L为“行”,A为“弧”。空白行后面的“M ove”和“L ine To”命令添加第二行。

<Path 
    Stroke="Black" 
    StrokeThickness="4" 
    Fill="Red" 
    Data=" 
     M 0,0 
     L 100,100 
     A 50,50 45 1 1 0,0 
     A 50,50 45 1 1 100,100 

     M 100,0 
     L 0,100" 
    /> 

你不需要用像这样的换行符来格式化它;我只是插入换行符来阐明它如何映射到您的版本。幸运的是,您以与标记语法中A的相应参数相同的顺序将属性添加到您的ArcSegment元素中。

这是它是如何通常做,但它无疑的可读性:

Data="M 0,0 L 100,100 A 50,50 45 1 1 0,0 A 50,50 45 1 1 100,100 M 100,0 L 0,100" 

或者,来完成它,你开始以同样的方式,只需添加第二行作为另一个PathFigure

<Path 
    Stroke="Black" 
    StrokeThickness="4" 
    Fill="Red" 
    VerticalAlignment="Center" 
    HorizontalAlignment="Center"> 
    <Path.Data> 
     <PathGeometry> 
      <PathGeometry.Figures> 
       <PathFigure StartPoint="0,0"> 
        <PathFigure.Segments> 
         <LineSegment Point="100,100" /> 
         <ArcSegment 
          Size="50,50" 
          RotationAngle="45" 
          IsLargeArc="True" 
          SweepDirection="Clockwise" 
          Point="0,0" 
          /> 
         <ArcSegment 
          Size="50,50" 
          RotationAngle="45" 
          IsLargeArc="True" 
          SweepDirection="Clockwise" 
          Point="100,100" 
          /> 
        </PathFigure.Segments> 
       </PathFigure> 

       <!-- Second line --> 
       <PathFigure StartPoint="100,0"> 
        <PathFigure.Segments> 
         <LineSegment Point="0,100" /> 
        </PathFigure.Segments> 
       </PathFigure> 
       <!-- /Second line --> 

      </PathGeometry.Figures> 
     </PathGeometry> 
    </Path.Data> 
</Path> 
0

使用此... https://materialdesignicons.com/

<Viewbox Width="48" Height="48"> 
<Canvas Width="24" Height="24"> 
    <Path Data="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z" Fill="Black" /> 
</Canvas>