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!

@AviralSingh : I have gone through that link, but unfortunately that is not what i want to achieve. May be if some amendments in the above code, because that is completely different from the requirement. — Lokesh
Thanks @Naren for this link, It actually Zooms on a particular region. But the problem with that approach is that its only recreating a particular region on image but no scaling the image. Therefore after zooming we will not be having the complete image in the picture box. Due to this, user will not be able to explore all other parts of the image when zoom is realized. — Lokesh

Lokesh Lokesh · Accepted Answer · 2013-10-09T09:48:40

1

votes

PictureEdit control provided by DevExpress 13.2

Zoom Image in Picture Box

1 Answers