Zoom Image in Picture Box

Question

I am creating an application, in which user will be able to Upload an image and then Zoom in and Out the image on a particular location (current mouse pointer).

Also user should be able to drag the image to see other parts of the image when the image is zoomed.

I have implemented some functionality to achieve it but i am scaling the complete image. I want to know that how i can scale a particular portion of image, or scale the complete image and then point to that location where my current mouse pointer is placed.

Code:

private void DisplayIsdDiagram(BO.IsdDiagram IsdDiagram)
{
    DoubleBuffered = true;
    zoomFac = 1;
    translateX = 0;
    translateY = 0;
    transStartX = 0f;
    transStartY = 0f;

    picIsdDiagram.BorderStyle = BorderStyle.Fixed3D;
    bmp = new Bitmap(Image.FromStream(new MemoryStream(IsdDiagram.Image.ToArray())));

    if (bmp.Width > bmp.Height)
    {
        ratio = (float)picIsdDiagram.Width / (float)bmp.Width;
        translateRatio = (float)bmp.Width / (float)picIsdDiagram.Width;
    }
    else
    {
        ratio = (float)picIsdDiagram.Height / (float)bmp.Height;
        translateRatio = (float)bmp.Height / (float)picIsdDiagram.Height;
    }

    //picIsdDiagram.Image = bmp;

    picIsdDiagram.Refresh();
    picIsdDiagram.MouseWheel += new MouseEventHandler(picIsdDiagram_MouseWheel);
}

private void picIsdDiagram_MouseWheel(object sender, MouseEventArgs e)
{
    IsZooming = true;

    if (e.Delta < 0)
    {
        if (zoomFac > 1)
            zoomFac = zoomFac - (float)0.1;
    }
    else
    {
        if (zoomFac <= 5)
            zoomFac = zoomFac + (float)0.1;
    }

    picIsdDiagram.Refresh();
    IsZooming = false;
}

private void picIsdDiagram_MouseDown(object sender, MouseEventArgs e)
{
    IsZooming = false;
    IsMouseDown = true;

    transStartX = e.X;
    transStartY = e.Y;
}

private void picIsdDiagram_MouseUp(object sender, MouseEventArgs e)
{
    IsZooming = false;
    IsMouseDown = false;

    translateX = translateX + ((e.X - transStartX) * (translateRatio / zoomFac));
    translateY = translateY + ((e.Y - transStartY) * (translateRatio / zoomFac));

    picIsdDiagram.Refresh();
}

private void picIsdDiagram_Paint(object sender, PaintEventArgs e)
{
    Graphics g = e.Graphics;

    g.ScaleTransform(ratio * zoomFac, ratio * zoomFac);

    if (IsZooming == false && IsMouseDown == true)
        g.TranslateTransform(translateX, translateY);

    g.DrawImage(bmp, 0, 0);
}

I tried to get the current mouse position from MouseHover event and tried to Translate the picture when only Zoom is done, but that is not working.

Also the Picture Box has some other multiple Picture boxes inside it, to show some representation on the big image. While scaling the Big Image, small images (inside images) should not be scaled. Although there position needs to be recalculated to show them at their real places even after zooming on the Big image.

So in above i am facing two problems:

1) To Zoom an Image at any particular location (current mouse pointer) by scrolling.

2) To regenerate the coordinates of the sub images while zooming and translating.

Any help that can guide me in correct direction.

Also if by any other means, i could be able to achieve this functionality.

Application : Windows

Control : Picture Box (Please suggest if any other control can be used, if not possible with this)

Language : C#

Waiting for response!

Answer 1

由DevExpress 13.2提供的PictureEdit控件