Combining Images to display in the picturebox

Question

In C# Windows Form, I want to be able to manipulate the Image to show it as 3 Images put together. The manipulation includes that for each of the three axis, I have a single 2D image on each axis. The resultant would look like a 3D image.

For example, If I have 3 Bitmap images; a, b, and c. Then I want to make a 3D image where the x axis would have image a, y axis would have image b, and z axis would have image c.

Like this: http://chanceandchoice.files.wordpress.com/2008/11/planes.jpg

Please Help!

Answer 1

You can use GDI+ skew the images a, b, and c then draw the new "3D" image into a new bitmap.

Please read the following link regarding skewing http://msdn.microsoft.com/en-us/library/3b575a03%28v=vs.110%29.aspx

When skewing the images and drawing them into the new bitmap, you have to ensure the following:

• a's Upper right = b's Upper Left
• a's Lower Left = c's lower left
• b's Lower left = c's upper left

Now this is base on the assumption that the images are squares, I'm not sure how you (as the developer) would handle rectangular images (Maybe you can stretch it, up to you). I'm also using the same image instead of A B and C but the concept should be the same.

Here is a quick example written in OnPaint method of a WinForm

    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);

        Bitmap xImage = new Bitmap(@"PATH TO IMAGE");

        Size xImageSize = xImage.Size;
        int Skew = 30;

        using (Bitmap xNewImage = new Bitmap(120, 120)) //Determine your size
        {
            using (Graphics xGraphics = Graphics.FromImage(xNewImage))
            {
                Point[] xPointsA =
                {
                    new Point(0, Skew), //Upper Left
                    new Point(xImageSize.Width, 0), //Upper Right
                    new Point(0, xImageSize.Height + Skew) //Lower left
                };
                Point[] xPointsB =
                {
                    new Point(xImageSize.Width, 0), //Upper Left
                    new Point(xImageSize.Width*2, Skew), //Upper Right
                    new Point(xImageSize.Width, xImageSize.Height) //Lower left
                };
                Point[] xPointsC =
                {
                    new Point(xImageSize.Width, xImageSize.Height), //Upper Left
                    new Point(xImageSize.Width*2, xImageSize.Height + Skew), //Upper Right
                    new Point(0, xImageSize.Height + Skew) //Lower left
                };

                //Draw to new Image
                xGraphics.DrawImage(xImage, xPointsA);
                xGraphics.DrawImage(xImage, xPointsB);
                xGraphics.DrawImage(xImage, xPointsC);
            }
            e.Graphics.DrawImage(xNewImage, new Point()); //Here you would want to assign the new image to the picture box
        }
    }

Answer 2

You have to do "perspective warping" with the images. Look at the answers for the similar question: 4-point transform images