[Demo] winform (1) Simple drag puzzle, demowinform

[Demo] winform (1) Simple drag puzzle, demowinform

A simple Demo can be used to learn Image processing, drag events in winform, or for assignments of the majority of student parties (in fact, this is the assignment that helps the student party solve, but then I adjusted it again ......), Because it is a Demo, the code is just a little casual. below is the runtime, get a sister to enjoy the eye, the game method is to drag the randomly disrupted picture to the puzzle area, if the positions are the same, when you release the mouse, the image will be drawn to the area to be puzzles, and the area will be removed from the randomly disrupted image.

The first part is image-related components: proportional scaling and segmentation of images. The following is the relevant code:

Public static class Helpers {/// <summary> // obtain an image with proportional Scaling (obtain the picture in the middle when the height and width are different) /// </summary> /// <param name = "fromImage"> </param> /// <param name = "width"> width </param >/// <param name = "height"> height </param> /// <returns> </returns> public static Image AdjImageToFitSize (this Image fromImage, int width, int height) {Bitmap bitmap = new Bitmap (width, height); Graphics graphics = Graphics. fromImage (bitmap); Point point = new Point (0, 0); Point point2 = new Point (width, 0); Point point3 = new Point (0, height ); point [] destPoints = new Point [] {point, point2, point3}; Rectangle rect = GetImageRectangle (fromImage); graphics. drawImage (fromImage, destPoints, rect, GraphicsUnit. pixel); Image image = Image. fromHbitmap (bitmap. getHbitmap (); bitmap. dispose (); graphics. dispose (); return image;} private static Rectangle GetImageRectangle (Image fromImage) {// obtain int x = 0 at the center position; int y = 0; int height = fromImage. height; int width = fromImage. width; if (fromImage. height> fromImage. width) {height = fromImage. width; y = (fromImage. height-fromImage. width)/2;} else {width = fromImage. height; x = (fromImage. width-fromImage. height)/2;} return new Rectangle (x, y, width, height);} // <summary> // cut the image into a small image, the image sequence is horizontal and vertical. // </summary> /// <param name = "fromImage"> </param> /// <param name = "cx"> x direction cut count </param> /// <param name = "cy"> y direction cut count </param> /// <returns> </returns> public static Image [] SplitToSmallImages (this Image fromImage, int cx, int cy) {Image [] imgs = new Image [cx * cy]; int nWidth = fromImage. width/cx; int nHeight = fromImage. height/cy; Bitmap image = new Bitmap (nWidth, nHeight); Graphics graphics = Graphics. fromImage (image); for (int I = 0; I <cy; I ++) {for (int j = 0; j <cx; j ++) {graphics. drawImage (fromImage, 0, 0, new Rectangle (j * nWidth, I * nHeight, nWidth, nHeight), GraphicsUnit. pixel); Image img = Image. fromHbitmap (image. getHbitmap (); int idx = j + I * cx; img. tag = idx; imgs [idx] = img ;}} return imgs ;}}

Then there is not much to say about the interaction between clicking and dragging. You can download the code and view it, because the image is split into a one-dimensional array, here we will talk about how to obtain the corresponding two-dimensional array based on the index number. below is the relevant code snippet. In the above Code, we have used the horizontal and vertical method when cutting the image, you can obtain the two-dimensional position based on the index. That is, the horizontal position is calculated by the Index Number % Number of split blocks per line. The vertical position is calculated by the index number/number of split blocks per line, of course, the following code does not use indexes to obtain the indexes x and y for comparison, but obtains the corresponding indexes based on x and y.

Int idx = (int) e. data. getData (typeof (int); Point p = this. pnl_DragOn.PointToClient (new Point (e. x, e. y); int x = p. x/this. sideLength; // calculates the position int y = p. y/this. sideLength; // calculate the if (idx = x + this. imgNumbers * y) // determines whether the image position is consistent with the calculated position {Graphics graphics = this. pnl_DragOn.CreateGraphics (); graphics. drawImage (this. _ dragPic. image, x * this. sideLength, y * this. sideLength); this. _ dragPic. im Age = null; // After the Image is placed, remove the Image if (! This. _ splitPictureBoxes. Any (pb => pb. Image! = Null) {MessageBox. Show ("congratulations, the picture has been spelled out ");}}

Download the source code. Run Application. Run (new RandomPictureForm1 () in Program. cs to Run the Demo corresponding to this blog.