Brush only parts of an Ellipse in WPF

问题

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.

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

回答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://stackoverflow.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

<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:

来源：https://stackoverflow.com/questions/23709725/brush-only-parts-of-an-ellipse-in-wpf