如何在XAML中绘制分离的圆形？

Question

我该如何在XAML中绘制这样的圆形，使其分为两个部分并各有不同的颜色？

<Ellipse Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300" Height="300">

                    </Ellipse>

                    <Path VerticalAlignment="Top" Fill="Brown" HorizontalAlignment="Left">
                        <Path.Data>
                            <PathGeometry>
                                <PathFigure StartPoint="59,150">
                                    <ArcSegment SweepDirection="Clockwise" Size="141,80" Point="341,150"/>
                                </PathFigure>
                            </PathGeometry>
                        </Path.Data>
                    </Path>

我试过了，上述路径不完整，只有一部分。请帮我尝试画出来！

- Lê Văn Thành

---

画两条路径，一条在另一条上面。 - D J

Answer 1

给你：

<Canvas>
    <Ellipse Canvas.Left="50" Canvas.Top="50" Width="300" Height="300" Stroke="Black" StrokeThickness="1" Fill="Red" />
    <Ellipse Canvas.Left="50" Canvas.Top="50" Width="300" Height="300" Stroke="Black" StrokeThickness="1" Fill="Yellow">
        <Ellipse.Clip>
            <RectangleGeometry Rect="0 100 300 300" />
        </Ellipse.Clip>
    </Ellipse>
    <Rectangle Canvas.Left="50" Canvas.Top="150" Width="300" Height="200" Stroke="Black" StrokeThickness="1" Fill="Transparent">
        <Rectangle.Clip>
            <EllipseGeometry Center="150, 50" RadiusX="150" RadiusY="150" />
        </Rectangle.Clip>
    </Rectangle>
</Canvas>

第一个canvas元素绘制了一个红色的圆，第二个元素在其上绘制了一个黄色的圆并将其剪辑，第三个元素通过中间绘制了黑色线条。这是结果：

编辑：实际上，进一步思考后，可以使用单个椭圆和线性渐变笔刷来完成这两个椭圆：

<Ellipse Canvas.Left="50" Canvas.Top="50" Width="300" Height="300" Stroke="Black" StrokeThickness="1">
        <Ellipse.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Color="Red" Offset="0.3333" />
                <GradientStop Color="Yellow" Offset="0.3333" />
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>

- Mark Feldman

---

使用Path绘制圆形的其他方式有哪些？ - Lê Văn Thành

一个线性渐变！太棒了！ - DonkeyMaster

Answer 2

你也可以利用以下方法...

   <Grid Height="200" Width="200" VerticalAlignment="Center">
        <Ellipse Fill="#FFE1B631"  />
        <Path Data="M93.88768,0 C136.17198,0 172.32661,26.244247 186.95134,63.33252 L187.77536,65.5 0,65.5 0.82401276,63.33252 C15.44875,26.244247 51.603378,0 93.88768,0 z" Fill="#FFFD450F" Height="60.26" Stretch="Fill" VerticalAlignment="Top" Margin="8,1.31,8,0"/> 
    </Grid>

- Sankarann

---

如何设置路径数据？@Sankarann - Lê Văn Thành