Question

我试图绘制一个带有完美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>

Answer 1

你可以“简化”这个，或者至少通过using Path Markup Syntax在XAML编辑器中占用更少的空间。空白行前Data部分再现您已获得的内容：M代表“移动”，L代表“行”，A代表“arc” 。空白行后面的“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"
    />

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

这通常是这样做的，尽管它的可读性可能较低：

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>

Answer 2

使用此... 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>

如何用x标记绘制圆圈？

2 个答案: