填充两个矩形之间的空间

Question

how would I go about filling the space between two rectangles when they are not vertically aligned. So if one rectangle moves up the gap between it and the next rectangle (In a chain which all follow the same path) looks smooth.

Example:

Current:

Desired:

My current drawing code:

public override void Draw(Graphics g)
{
    for (int i = 0; i < this._Children.Count; i++)
    {
        this._Children[i].Draw(g);

        if (i != 0 && i + 1 < this._Children.Count)
        {
            if (this._Children[i].Y != this._Children[i + 1].Y)
            {
                 //Draw circle in gap between?
            }
        }
    }

    base.Draw(g);
}

Underlying draw:

g.FillRectangle(this.Color, this.X, this.Y, this.Size.Width, this.Size.Height);
g.DrawRectangle(this.Outline, this.X, this.Y, this.Size.Width, this.Size.Height);

Edit:

After following Jim and commenter's advice, I came up with the following. The maths seems to be wrong and it doesn't really get the effect I wanted at all though.

GraphicsPath path = new GraphicsPath();

for (int i = 0; i < this._Children.Count; i++)
{
    path.AddRectangle(this._Children[i].GetBoundingBox());

    if (i < this._Children.Count)
    {
        Block block = i == 0 ? (Block)this : this._Children[i - 1];

        float x = this._Children[i].X < block.X ? this._Children[i].X : block.X;
        float y = this._Children[i].Y > block.X ? this._Children[i].Y : block.Y;
        float width = System.Math.Abs(this._Children[i].X - block.X);
        float height = System.Math.Abs(this._Children[i].Y - block.Y);
        path.AddEllipse(x, y, width, height);
    }
}

g.FillPath(this._Children[0].Color, path);
g.DrawPath(this._Children[0].Outline, path);
base.Draw(g);

Edit 2: Been following everyone's advice and editing as I go along. Jim's works now but it only draws at all if you are moving up and you start moving right.

And now with TAW's advice I get ArguementInvalid, I assume this is because the rGap rectangle's height is 0.

My implementation of TAW's:

for (int i = 0; i < this._Children.Count; i++)
{
    this._Children[i].Draw(g);

    if (i + 1 < this._Children.Count)
    {
        Block block = i == 0 ? (Block)this : this._Children[i + 1];

        Rectangle rec = this._Children[i].GetBoundingBox();
        Rectangle rec2 = block.GetBoundingBox();
        Rectangle rGap = new Rectangle(Math.Min(rec.X, rec2.X), Math.Min(rec.Y, rec2.Y), 2 * Math.Abs(rec.Left - rec2.Left), 2 * Math.Abs(rec2.Top - rec.Top));

        GraphicsPath gp = new GraphicsPath();
        gp.AddRectangle(rec);
        gp.AddRectangle(rec2);
        gp.AddArc(rGap, 0, 360);

        gp.FillMode = FillMode.Winding;
        g.DrawPath(this._Children[i].Outline, gp);
        g.FillPath(this._Children[i].Color, gp);
    }
}

base.Draw(g);

Edit 3: I have developed my own solution after studying the problem a little more, it's not the solution I wanted but hopefully it should help someone else. Now it just needs converting to rounded corners.

Code:

for (int i = 0; i < this._Children.Count; i++)
{
    this._Children[i].Draw(g);

    Block block = i - 1 < 0 ? (Block)this : this._Children[i - 1];

    Rectangle rec = this._Children[i].GetBoundingBox();
    Rectangle rec2 = block.GetBoundingBox();
    Direction dir = this._Children[i].GetDirection(true);
    Direction dir2 = block.GetDirection(true);

    int minX = Math.Min(rec.X, rec2.X);
    int minY = Math.Min(rec.Y, rec2.Y);
    int maxX = Math.Max(rec.X, rec2.X);
    int maxY = Math.Max(rec.Y, rec2.Y);
    int diffX = maxX - minX;
    int diffY = maxY - minY;
    int width = this._Children[i].Size.Width;
    int height = this._Children[i].Size.Height;
    Rectangle fillRec = default(Rectangle);

    if ((dir == Direction.Right && dir2 == Direction.Down) || (dir == Direction.Up && dir2 == Direction.Left))
    {
        fillRec = new Rectangle(minX + width, minY, diffX, diffY);
    }
    else if ((dir == Direction.Down && dir2 == Direction.Left) || (dir == Direction.Right && dir2 == Direction.Up))
    {
        fillRec = new Rectangle(minX + width, (maxY + height) - diffY, diffX, diffY);
    }
    else if ((dir == Direction.Up && dir2 == Direction.Right) || (dir == Direction.Left && dir2 == Direction.Down))
    {
        fillRec = new Rectangle(minX, minY, diffX, diffY);
    }
    else if ((dir == Direction.Left && dir2 == Direction.Up) || (dir == Direction.Down && dir2 == Direction.Right))
    {
        fillRec = new Rectangle(minX, (maxY + height) - diffY, diffX, diffY);
    }

    if (fillRec != default(Rectangle))
    {
        g.FillRectangle(this._Children[i].Color, fillRec);
        g.DrawRectangle(this._Children[i].Outline, fillRec);
    }
}
base.Draw(g);

Produces:

Answer 1

You can't necessarily draw a circle in the space unless the space is square. But you can draw an ellipse.

What you need to do:

1. Determine extents of the rectangle in question. The center point is the point where the two rectangles meet (the bottom right part of the blank space you want to fill. The top left is the X coordinate of the left rectangle and the Y coordinate of the top rectangle. The width would be 2*(center.X - left) and the height would be 2*(center.Y - top) .
2. Fill an ellipse in that rectangle.

Note that the above will have the effect of drawing the top-left curved portion. It won't fully fill the overlapping rectangle below.

If you want to get rid of the lines, draw a filled rectangle without a border (actually, with the border the same color as the fill color) in the overlapping space. Then draw the filled ellipse as described above, again without a border.

To draw the border of the ellipse, look into DrawArc .

Answer 2

Here is a solution that draws all four rounded corneres for four rectangles.

I create four rectangles overlapping with various gaps and add them and the arcs to fill the gaps to a GraphicsPath.

GraphicsPath GP = new GraphicsPath();

Rectangle fillGap(Rectangle R1, Rectangle R2, bool isTop, bool isLeft )
{ 
    int LeftMin    = Math.Min(R1.Left, R2.Left);
    int RightMax   = Math.Max(R1.Right, R2.Right);
    int TopMin     = Math.Min(R1.Top, R2.Top);
    int BotMax     = Math.Max(R1.Bottom, R2.Bottom);
    int RightGap   = 2 * Math.Abs(R1.Right - R2.Right);
    int LeftGap    = 2 * Math.Abs(R1.Left - R2.Left);
    int TopGap     = 2 * Math.Abs(R1.Top - R2.Top);
    int BotGap     = 2 * Math.Abs(R1.Bottom - R2.Bottom);

    Rectangle R = Rectangle.Empty; 
    if (isTop && isLeft) R = new Rectangle(LeftMin, TopMin, LeftGap, TopGap);
    if (isTop && !isLeft) 
        R = new Rectangle(RightMax - RightGap, TopMin, RightGap, TopGap);
    if (!isTop && !isLeft) 
        R = new Rectangle(RightMax - RightGap, BotMax  - BotGap , RightGap, BotGap );
    if (!isTop && isLeft) 
        R = new Rectangle(LeftMin, BotMax  - BotGap , LeftGap, BotGap );
     return R;
}

private void button1_Click(object sender, EventArgs e)
{
    Rectangle Rtop = new Rectangle(20, 10, 200, 40);
    Rectangle Rbottom = new Rectangle(20, 200, 200, 40);
    Rectangle Rleft = new Rectangle(10, 20, 40, 200);
    Rectangle Rright = new Rectangle(210, 20, 40, 200);

    GP = new GraphicsPath(); 
    GP.FillMode = FillMode.Winding;

    GP.AddRectangle(Rtop);
    GP.AddRectangle(Rleft);
    GP.AddRectangle(Rbottom);
    GP.AddRectangle(Rright);
    GP.AddArc(fillGap(Rtop, Rleft, true, true), 0, 360);
    GP.AddArc(fillGap(Rtop, Rright, true, false), 0, 360);
    GP.AddArc(fillGap(Rbottom, Rleft, false, true), 0, 360);
    GP.AddArc(fillGap(Rbottom, Rright, false, false), 0, 360);

    panel1.Invalidate();
}

private void panel1_Paint(object sender, PaintEventArgs e)
{
    using (Pen pen = new Pen(Color.Black, 1.5f))
    {
        e.Graphics.SmoothingMode = SmoothingMode.HighQuality;
        e.Graphics.DrawPath(pen, GP);
        if(checkBox1.Checked) e.Graphics.FillPath(Brushes.Red, GP);
    }
}

The code now assumes that your gaps are not wider than the rectanlges.

The Pen for the outline should not be smaller that 1.5f or the filling will overlap too much.

Also the Smoothing mode should be high quality, so no pixels get lost.

Here is how it looks : Drawn & filled: