Make an improved diagonal picture montage in C#


[picture montage]

My earlier example Make a Pinterest-style diagonal picture montage in C# showed how you could make a picture montage showing parts of images rotated by a desired angle. While using that program today I found a small bug. The areas between the images are not always completely filled with the divider color.

The following picture shows the program displaying a picture montage that it created. The red circles show places where pieces of images show between the cells’ borders.


[picture montage]

[picture montage]

The picture on the right shows aa closeup of one of the problem areas.

Fortunately the solution to this problem is simple. The Cell class’s Draw method draws a cell’s picture and border. The following code shows the part of that method that draws the border. The new statement highlighted in blue fixes the problem.


// Draw the cell.
public void Draw(Graphics gr, Pen pen, float cell_width, float cell_height)
{
    // Draw the cell's picture.
    ...

    // Outline the cell.
    gr.DrawRectangle(pen, Bounds.X, Bounds.Y, Bounds.Width, Bounds.Height);
    GraphicsPath path = MakeRoundedRect(Bounds,
        2 * pen.Width, 2 * pen.Width, true, true, true, true);
    gr.DrawPath(pen, path);
}

The new statement draws a rectangle around the image before the code draws the image’s rounded rectangle. The new rectangle fills in the problem areas where the rounded rectangles’ corners don’t quite meet the adjacent rectangles.

See the Make a Pinterest-style diagonal picture montage in C#previous post for more details about how the program works. Download this example to experiment with it.


Download Example   Follow me on Twitter   RSS feed   Donate




About RodStephens

Rod Stephens is a software consultant and author who has written more than 30 books and 250 magazine articles covering C#, Visual Basic, Visual Basic for Applications, Delphi, and Java.
This entry was posted in drawing, graphics, image processing, tools and tagged , , , , , , , , , , , , , . Bookmark the permalink.

1 Response to Make an improved diagonal picture montage in C#

  1. Pingback: Allow scrolling while making a diagonal picture montage in C# - C# HelperC# Helper

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.