[C#] 마우스 위치에 따라 3배 확대 이미지 보여주는 프로그램 (feat. 반투명 사각형 그리기)

마우스 위치에 따라 오른쪽에 3배 확대된 이미지를 보여주는 프로그램.

기존에 마우스 휠 이벤트에 따른 Zoom In/Out 포스팅과 비슷한 맥락인데,

이것은 비율은 3배로 고정해두고 Image Rectangle X, Y 값만 변경해주는 것으로

이전 포스팅보다 훨씬 간단하다.

 

이전 포스팅.

2018.11.22 - [IT] - [C#] 마우스 휠 이벤트에 따른 확대, 축소 (+ 마우스 위치 확대)(+21.02.22 재수정)

 

아래에 전체 소스코드와 실행 동영상을 첨부했다.

 

여담.

예제에 쓰인 키보드 이미지는 내가 DROP 사이트에서 구매하고 조립한 직교 배열 PLANCK키보드 : )

검은색 키보드는 키크론K6 갈축 키보드. 맥용으로 최고다. bb

마우스 포인터 위치에 따른 확대 이미지 X, Y 위치 계산

 

전체 소스코드.

 

메인폼 로드 시 확대하려는 이미지와

마우스 포인터에 따라 위치를 표시해 줄 반투명 사각형 이미지를 로드해준다.

 

확대하려는 이미지의 사이즈를 1000x1000으로 변경해주었는데,

이는 이미지 사이즈가 너무 크게되면 마우스 이동 시 조금 버벅거리는 현상이 생기기 때문이다.

각자 PC 사양에 따라 다르지만 나는 임의로 변경해주었다.

 

컬러 투명도 조절하기.

Color.FromArgb(0x70, Color.White)

컬러 색상 설정할 때 위와같이 파라미터를 설정해줄 수 있는데, 위의 0x70 값이 투명도 조절 값이다. 70% 투명도.

 

MouseMove 이벤트에서 마우스 위치에 따라 이미지 Rectangle X, Y 값을 변경하여 주고,

각각의 PictureBox에 연결된 Paint 이벤트에서 이미지 위치를 새로 그려준다.

짧은 코드라 각각의 주석을 참고하여 확인 가능합니다.

private int ratio = 3;
private Bitmap img, rectBmp;
private Rectangle zoomImgRect, rectRect;
 
public Form1()
{
    InitializeComponent();
 
    // 확대하려는 이미지 로드
    Bitmap origin = new Bitmap(@"D:\Keyboard.jpg");
    img = new Bitmap(origin, 1000, 1000);
    pictureBox1.BackgroundImage = img;
 
    // 이미지 레이아웃 설정
    pictureBox1.BackgroundImageLayout = ImageLayout.Stretch;
    pictureBox2.BackgroundImageLayout = ImageLayout.Stretch;
 
    // 3배 (ratio) 확대 이미지 Rectangle
    zoomImgRect = new Rectangle(0, 0, pictureBox1.Width * ratio, pictureBox1.Height * ratio);
 
    // 반투명 사각형 그리기 (투명도 70%, 흰색)
    rectBmp = new Bitmap(150, 150);
    using (Graphics g = Graphics.FromImage(rectBmp))
    {
        using (SolidBrush brush = new SolidBrush(Color.FromArgb(0x70, Color.White)))
        {
            RectangleF rect = new RectangleF(0, 0, 150, 150);
            g.FillRectangle(brush, rect);
        }
    }
    // 반투명 사각형 이미지 Rectangle
    rectRect = new Rectangle(pictureBox1.Width / 2 - 75, pictureBox1.Height / 2 - 75, 150, 150);
 
    // pictureBox1 위에서 마우스 이동시 pictureBox2 새로 그리기 위한 이벤트 연결
    pictureBox1.MouseMove += pictureBox1_MouseMove;
    pictureBox1.Paint += pictureBox1_Paint;
    pictureBox2.Paint += pictureBox2_Paint;
}
 
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
    DetailPosition(e.X, e.Y);
    ShowDetail(e.X, e.Y);
}
 
public void DetailPosition(int x, int y)
{
    // pictureBox1 마우스 위치기준 반투명 사각형 X, Y 값 변경
    rectRect.X = x - 75;
    rectRect.Y = y - 75;
    pictureBox1.Invalidate();
}
 
public void ShowDetail(int x, int y)
{
    // pictureBox2 마우스 위치기준 imgRect X, Y 값 변경
    zoomImgRect.X = -ratio * (x - 75);
    zoomImgRect.Y = -ratio * (y - 75);
    pictureBox2.Invalidate();
}
 
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
    // 반투명 사각형 이미지 rectRect 값 적용해서 그리기
    e.Graphics.DrawImage(rectBmp, rectRect);
}
 
private void pictureBox2_Paint(object sender, PaintEventArgs e)
{
    // 확대 이미지 imgRect 값 적용해서 그리기
    e.Graphics.DrawImage(img, zoomImgRect);
}

 

실행 동영상.