Click here to Skip to main content
Click here to Skip to main content
Go to top

A simple jigsaw

, 6 Apr 2008
Rate this:
Please Sign up or sign in to vote.
Manipulate WinForms controls to make a simple jigsaw puzzle.

Introduction

This article explains how to make a simple jigsaw puzzle, and make a handsome monkey laugh Smile | :)

Background

This is pretty simple, and works mainly on location mathematics and the Bitmap object's Clone method. I did a cooler version of this, but lost it to Shift + Del Blush | :O ...oooooooooooh! When I have a less busy head, I will do it again. But, you could have this to play with. It's not bad.

Using the code

The most important part of this application is the gettokenpictures() method. Here, a Bitmap object's Clone function is used to slash the main image into 60x60 parts, having set the size of the image to 300x300 (which gives us 25 parts of 5x5).

Actually, set the image size by stretching it against the main picture box.

mainpic.Size = new Size(300, 300);

private void gettokenpictures()
{
    mainpic = new PictureBox();
    mainpic.Size = new Size(300, 300);
    mainpic.Location = new Point(0, 0);
    // Image.FromFile("main.jpg");
    mainpic.Image = JigsawCS.Properties.Resources.Main;
    mainpic.SizeMode = PictureBoxSizeMode.StretchImage;
    int top = 0;
    int left = 0;
    int k = 0;
    Bitmap bmp = new Bitmap(mainpic.Image);
    for (int i = 0; i < 5; i++)
    {
        for (int j = 0; j < 5; j++)
        {
            PictureBox tokenpic = (PictureBox)tokens[k];
            if (k == 24)
                tokenpic.Image =JigsawCS.Properties.Resources.blank;
                // Image.FromFile("blank.jpg");
            else
                tokenpic.Image = bmp.Clone(new Rectangle(left, top, 60, 60), 
                                 System.Drawing.Imaging.PixelFormat.DontCare);
            left += 60;
            k++;
        }
        left = 0;
        top += 60;
    }
}

So the line:

tokenpic.Image = bmp.Clone(new Rectangle(left, top, 60, 60), 
                 System.Drawing.Imaging.PixelFormat.DontCare);

creates an image from a rectangular part of the main image, and assigns it to a token, which is a picture box. A simple loop is used to manipulate the offsets (left and top).

You could add your own image(s) by uploading them into the application's resources, or keeping it/them in a location of your choice.

The line:

mainpic.Image = JigsawCS.Properties.Resources.Main;

in the above code sets the image, which you can do at runtime or before. So you could have:

mainpic.Image = JigsawCS.Properties.Resources.[You imagefile's name];

or

mainpic.Image =  Image.FromFile([You imagefile's name]);

Enjoy Smile | :)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

spidergeuse
Software Developer
United Kingdom United Kingdom
No Biography provided

Comments and Discussions

 
GeneralOn top of what Luc said... PinmvpDave Kreskowiak25-Mar-11 6:10 
Generalpuzzling PinmvpLuc Pattyn25-Mar-11 3:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 6 Apr 2008
Article Copyright 2008 by spidergeuse
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid