C# PictureBox 이미지 마우스로 클릭하여 이동하기(돋보기 기능)

안녕하세요 마블랑입니다.

 

정확히 어떤 프로그램인지는 기억이 안나지만 돋보기 기능이 있어 작은 이미지를 확대해서 보여주는 프로그램이 있었습니다.

 

그 기능과 유사하게 PictureBox에 이미지를 올리고 사이즈 변동없이 마우스를 이용하여 이미지를 이동시키는 프로그램을 구현 해보려고 합니다.

 

 

 

먼저 사이즈가 굉장히 큰 이미지를 준비하여 주세요 ^^

 

이미지가 크면 클수록 이 프로그램이 유용합니다.

 

이미지를 구하였으면 이제 C# 프로젝트에 이미지를 등록하겠습니다.

 

프로젝트의 Properties 를 클릭하여 주세요 

왼쪽 메뉴에 리소스 항목이 있습니다. 이것을 클릭해 주세요

처음 리소스를 열면 아래와 같이 문자열로 되어있는데 이것을 이미지로 변경해주시면 됩니다.

 

그리고 난뒤에 리소스 추가의 기존 파일 추가를 눌러주시고 이미지를 업로드 하겠습니다.

화면과 같이 이미지가 올라간것이 보입니다.

 

picture 박스의 이미즈는 이렇게 올리지 않아도 되지만 C# 프로젝트 단위로 관리하는 것이 유용할거 같아 이 방법에 대해 추가하였습니다.

 

그럼 이제 메인폼에 PictureBox 컨트롤을 추가하고서 화면을 원하는대로 구현해주세요 

 

그 뒤에 코드를 작성하면 됩니다 

 

using System;
using System.Drawing;
using System.Windows.Forms;

namespace WindowsForms_Test_002_2
{
    public partial class Form1 : Form
    {
        private Bitmap image;

        private Point pntCurrentPicbox;
        private Point pntMouseClick;

        private bool bIsClick = false;

        int nPictureBoxX;
        int nPictureBoxY;

        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {

            image = new Bitmap(WindowsForms_Test_002_2.Properties.Resources.background);

            nPictureBoxX = pictureBox1.Size.Width;
            nPictureBoxY = pictureBox1.Size.Height;
        }

        private void PictureBox1_Paint(object sender, PaintEventArgs e)
        {
            if (image != null)
            {
                e.Graphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
                e.Graphics.Clear(Color.White);
                e.Graphics.DrawImage(image, pntCurrentPicbox);
                pictureBox1.Focus();
            }
        }

        private void PictureBox1_MouseDown(object sender, MouseEventArgs e)
        {
            bIsClick = true;

            pntMouseClick.X = e.X;
            pntMouseClick.Y = e.Y;
        }

        private void PictureBox1_MouseMove(object sender, MouseEventArgs e)
        {
            if (bIsClick)
            {
                pntCurrentPicbox.X = pntCurrentPicbox.X + e.X - pntMouseClick.X;
                pntCurrentPicbox.Y = pntCurrentPicbox.Y + e.Y - pntMouseClick.Y;

                if (pntCurrentPicbox.X > 0)
                {
                    pntCurrentPicbox.X = 0;
                }
                if (pntCurrentPicbox.Y > 0)
                {
                    pntCurrentPicbox.Y = 0;
                }

                if (pntCurrentPicbox.X + image.Width < nPictureBoxX)
                {
                    pntCurrentPicbox.X = nPictureBoxX - image.Width;
                }
                if (pntCurrentPicbox.Y + image.Height < nPictureBoxY)
                {
                    pntCurrentPicbox.Y = nPictureBoxY - image.Height;
                }

                pntMouseClick = e.Location;

                pictureBox1.Invalidate();
            }
        }

        private void PictureBox1_MouseUp(object sender, MouseEventArgs e)
        {
            bIsClick = false;
        }
    }
}

 

메인폼의 이벤트 먼저 설명을 하면 Load 이벤트에서 picturebox에 이미지를 셋팅합니다. 그리고 컨트롤의 크기를 전역변수로 저장합니다.

 

picturebox 컨트롤 이벤트는 PictureBox1_Paint, PictureBox1_MouseDown, PictureBox1_MouseMove, PictureBox1_MouseUp 를 각각 추가해줍니다.

 

Paint는 이미지가 추가 되었을 때 컨트롤에 이미지를 표시하는 것이고, MouseDown은 마우스 클릭시 현재 마우스 위치를 저장하는 이벤트 입니다.

 

MouseMove 에서는 현재 위치만큼 picturebox 내의 이미지의 표시되는 부분을 옮기는 부분입니다. 만약 이미지가 끝이라면 이동이 되지 않게 처리를 해두었습니다.

 

MouseUp은 마우스 클릭상태가 아니니 이미지 이동을 중지하는 이벤트 입니다.

 

 

이벤트의 기능을 알고 있으면 내용을 이해하는데 어렵지 않다고 생각합니다.

 

구현을 먼저 해본뒤에 분석을 하면 내용 이해를 쉽게 하실거 같습니다.

 

이상 마블랑이었습니다. 읽어주셔서 고맙습니다.