在WPF中仅刷一个Ellipse的部分

I'm having trouble to find the best way to draw the below shape. I'm using the below code to draw an Ellipse on visual layer.

我很难找到画出下面形状的最佳方法。我正在使用下面的代码在可视图层上绘制一个椭圆。

But how can I only brush the quarters? I think it can be done using LinearGradientBrush or RadialGradientBrush but I don't know how use it.

但是我怎么才能刷四分之一?我认为可以使用LinearGradientBrush或RadialGradientBrush完成,但我不知道如何使用它。

var cntrpoint = space.FlipYAxis(x2, y2);
dc.DrawEllipse(Brushes.Transparent, pen, cntrpoint, 30, 30);

3 个解决方案

#1

Like this:

var geometry = new GeometryGroup();
geometry.Children.Add(new RectangleGeometry(new Rect(1, 0, 1, 1)));
geometry.Children.Add(new RectangleGeometry(new Rect(0, 1, 1, 1)));
var drawing = new GeometryDrawing(Brushes.Black, null, geometry);
var brush = new DrawingBrush(drawing);

dc.DrawEllipse(brush, pen, cntrpoint, 30, 30);

#2

I found a solution to do it in XAML
(inspired by this post: https://*.com/a/5670388/3047078):

我找到了一个在XAML中做到的解决方案(灵感来自这篇文章:https://*.com/a/5670388/3047078):

<Image Width="200" Height="200" Margin="20">
  <Image.Source>
    <DrawingImage>
      <DrawingImage.Drawing>
        <DrawingGroup>

          <GeometryDrawing Brush="Black">
            <GeometryDrawing.Pen>
              <Pen Brush="Black" />
            </GeometryDrawing.Pen>
            <GeometryDrawing.Geometry>
              <PathGeometry>
                <PathFigure StartPoint="100,100">
                  <PathFigure.Segments>
                    <LineSegment Point="100,0"/>
                    <ArcSegment Point="200,100"  SweepDirection="Clockwise" Size="100,100"/>
                    <LineSegment Point="100,100"/>
                  </PathFigure.Segments>
                </PathFigure>
              </PathGeometry>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>

          <GeometryDrawing Brush="White">
            <GeometryDrawing.Pen>
              <Pen Brush="Black"/>
            </GeometryDrawing.Pen>
            <GeometryDrawing.Geometry>
              <PathGeometry>
                <PathFigure StartPoint="200,100">
                  <PathFigure.Segments>
                    <ArcSegment Point="100,200" SweepDirection="Clockwise" Size="100,100"/>
                    <LineSegment Point="100,100"/>
                  </PathFigure.Segments>
                </PathFigure>
              </PathGeometry>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>

          <GeometryDrawing Brush="Black">
            <GeometryDrawing.Pen>
              <Pen Brush="Black"/>
            </GeometryDrawing.Pen>
            <GeometryDrawing.Geometry>
              <PathGeometry>
                <PathFigure StartPoint="100,100">
                  <PathFigure.Segments>
                    <LineSegment Point="100,200"/>
                    <ArcSegment Point="0,100" SweepDirection="Clockwise" Size="100,100"/>
                    <LineSegment Point="100,100"/>
                  </PathFigure.Segments>
                </PathFigure>
              </PathGeometry>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>

          <GeometryDrawing Brush="White">
            <GeometryDrawing.Pen>
              <Pen Brush="Black"/>
            </GeometryDrawing.Pen>
            <GeometryDrawing.Geometry>
              <PathGeometry>
                <PathFigure StartPoint="100,100">
                  <PathFigure.Segments>
                    <LineSegment Point="0,100"/>
                    <ArcSegment Point="100,0" SweepDirection="Clockwise" Size="100,100"/>
                  </PathFigure.Segments>
                </PathFigure>
              </PathGeometry>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>

        </DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>
  </Image.Source>
</Image>

#3

You can do this using DrawingBrush and GeometryDrawing

您可以使用DrawingBrush和GeometryDrawing来完成此操作

<Ellipse Width="300" Height="300" Stroke="DarkGray" StrokeThickness="1.5">
    <Ellipse.Fill>
        <DrawingBrush>
            <DrawingBrush.Drawing>
                <GeometryDrawing>
                    <GeometryDrawing.Brush>
                        <RadialGradientBrush>
                            <GradientStop Color="Black" Offset="1.0" />
                            <GradientStop Color="White" Offset="1.0" />
                        </RadialGradientBrush>
                    </GeometryDrawing.Brush>
                    <GeometryDrawing.Geometry>
                        <GeometryGroup>
                            <RectangleGeometry Rect="0,0,50,50" />
                            <RectangleGeometry Rect="50,50,50,50" />
                        </GeometryGroup>
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Ellipse.Fill>
</Ellipse>

Output: