Comic Book Read with Magnifying Cursor

• Download ComicBookReader2014 (no EXE) - 257.4 KB
• Download ComicBookReader2014 - 640.6 KB
• Download Comic_Book_File - 7.9 MB

Introduction

This program reads comic book files (cbr, cbz). These files are basically compressed jpeg picture files. I wrote this program to see if I could make a magnifying cursor. I think this would help others accomplish this task. I commented all the code; so even beginners could follow along. I have also included a comic book file in the downloads.

The steps to accomplish this are:

1. Open a cbr or cbz file.
2. Un-compress image files to a temp directory using a referenced DLL, I'm using SharpCompress which can be downloaded at http://sharpcompress.codeplex.com/.
3. Read un-compressed image files into an image object and add the image object to a list of image objects, adding an image property called tag for the image filename to each image object.
4. Load the images into the GUI.
5. I added a few nice features:

• When the user clicks the mouse down over the image, the cursor turns into a magnifying window.
• When the uses navigates to a new selection, the preview pane automatically syncs the scrollbar to bring the selection into view.
• The user can view two comic book pages when the zoom is set to 1.
• I demonstrate the use of the progress bar being updated on the form from a separate class.

Background

I used this site and many more on my image resizing method.

I used the SharpCompress library to un-compress the rar and zip files.

I kept the program simple by only using one form.

I recently added the ability to view two pages at one time.

Using the Code

The method below (Figure 1) is called from the mousedown and mousemove events when the mouse is over the image. I grab a portion of the image under the mouse, I set the rectangle size of this portion based on the current image size and 20 pixels before the actual mouse point location.

I have to check my current mouse position and correct, so I do not grab anything that is beyond the boundaries of the image (this will cause an 'out of memory' error).

I send both the mouse-enter and the mouse-move events to this method, setting a flag on the mouse down event that it is OK to change the cursor. When the mouse-up event fires, the flag is set to false, and the cursor is returned to normal.

/// <summary>
/// This method Magnifys a portion of the user selected image and displays that portion as a magnified version when 
/// the mouse is held down and moved over the selected image
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
/// <param name="img">Current image</param>

private void Magnify(object sender, MouseEventArgs e, Image img)
{
    try
    {
        Point point = new Point(e.X, e.Y);
        //my feeble attempt at scaling the magnifying lens
        X_RectSize = img.Width / 10;
        Y_RectSize = img.Height / 20;
        //get copy of current image from list of images
        original = new Bitmap(img);
        //This section here is alittle dicey, I know it can be better built, 
        //the grab selection coordinates need more work.
        //set the mouse coodinates for the area to magnify
        int coor_Y = e.Y - 20;
        int coor_X = e.X - 20;
        int coor_Xx = X_RectSize;
        int coor_Yy = Y_RectSize;
        
        //check to make sure rectangle does not go out of bounds 
        //or an out of memory error will occur on the line that
        //grabs the rectangle:  
        //cropped = (Bitmap)original.Clone(srcRect, original.PixelFormat);
        
        //check left and top
        if (coor_X < 0) coor_X = 0;
        if (coor_Y < 0) coor_Y = 0;
        
        //checks bottom and right
        if ((coor_X + coor_Xx) > img.Width)   
        {
            //push back starting point of X axis
            coor_X = img.Width - X_RectSize;
        }
        if ((coor_Y + coor_Yy) > img.Height)
        {
            //push back starting point of Y axix
            coor_Y = img.Height - Y_RectSize;
        }
        
        //set size of image to grab
        srcRect = new Rectangle(coor_X, coor_Y, coor_Xx, coor_Yy);
        //grab the portion of the image that needs to be zoomed
        cropped = (Bitmap)original.Clone(srcRect, original.PixelFormat);
        
        //set new size for cursor image 
        size1.Width = (coor_Xx * 3);
        size1.Height = (coor_Yy * 2);
        
        //using the cursor method
        cropped = Utilities.ResizeImagePictureBox(cropped, size1, magnifyCursorType);
        //make cursor the new enlarged image
        this.Cursor = new Cursor(cropped.GetHicon());
        
        //using the insert method, you can comment out the two lines above and uncomment this to test
        // pictureBox1.Image = Utilities.ReplaceImagePictureBox(currentImage, size1, point, cropped);
    }
    
    catch (Exception ex)
    {
    }
    finally
    {
        original.Dispose();
        cropped.Dispose();
    }
}  

The code in Figure 2 takes the bitmap portion/rectangle and enlarges it using the Size object. I have included an option for a square or round appearance.

/// <summary>
/// Resizes bitmap for magnifying feature using as cursor
/// </summary>
/// <param name="imgToResize"></param>
/// <param name="size"></param>
/// <returns>resized bitmap</returns>
public static Bitmap ResizeImagePictureBox(Bitmap imgToResize, Size size, string cursorType)
{
    Bitmap b = new Bitmap(size.Width, size.Height);
    try
    {
        using (Graphics g = Graphics.FromImage((Image)b))
        {
            g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
            //choose either round or square cursor
            if (cursorType == "Round")
            {
                TextureBrush brush = new TextureBrush(imgToResize, 
                new Rectangle(0, 0, imgToResize.Width, imgToResize.Height));
                brush.ScaleTransform(3, 3);
                g.FillEllipse(brush, 0, 0, size.Width, size.Height);
            }
            else
            {
                g.DrawImage(imgToResize, 0, 0, size.Width, size.Height);
            }
            //cleanup
            g.Dispose();
        }
    }
    catch { }
    
    return b;
}

Points of Interest

I made a comic book reader a few years back and had tried to magnify the cursor because I wanted to see the complete page when reading them. I was pretty busy at the time and failed in getting it working properly, and forgot about the project.

Recently, my stepson is interested in Comic Books and I failed to find my old code, so I decided to write another Comic Book reader. When I came to the point of magnification, I was destined this time to succeed.

This is the product of a weekend of off and on coding and experimenting with other snippets.

I am happy with the result of this magnifying example and feel it could be useful to others.

History

I recently added the ability to view two comic book pages at one time when the zoom level is set to 1.