파일 불러오기, 이미지 출력 및 이동하기

파일 오픈은 OpenFileDialog를 사용하면 아래와 같이 파일열기 창이 알아서 뜬다.

여기서 파일을 선택하고 열기를 누르면 해당 경로가 FileName으로 자동으로 들어간다.

파일을 선택하고 이미지를 출력한 모습

이미지 출력에는 이미지파일의 포맷에 따라 여러가지 방법이 있는데

png를 출력하기 위해 아래와같이 pngBitmapDecoder를 사용하였다. 

이후 새로운 Image를 생성하고 Source를 넣어준 후 canvas의 자식으로 넣어주면 이미지가 정상적으로 출력된다.

Tag는 추후 파일주소를 찾기위해 임의로 작성해주었다.

private void button_fileopen_Click(object sender, RoutedEventArgs e)
{
    OpenFileDialog openDialog = new OpenFileDialog();
 
     if(openDialog.ShowDialog() == true)
    {
        if(File.Exists(openDialog.FileName))
        {
            Stream imageStreamSource = new FileStream(openDialog.FileName, FileMode.Open, FileAccess.Read, FileShare.Read);
            PngBitmapDecoder decoder = new PngBitmapDecoder(imageStreamSource, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
            BitmapSource bitmapSource = decoder.Frames[0];
                    
            myImage = new Image();
            myImage.Source = bitmapSource;
            myImage.Width = 200;
                    
            myImage.Tag = System.IO.Path.GetFullPath(openDialog.FileName);
            canvas.Children.Add(myImage);
        }
    }
}

png 외 다른 포맷을 출력하고 싶다면 아래 사이트에서 참고하기를 바란다.

https://docs.microsoft.com/ko-kr/dotnet/framework/wpf/graphics-multimedia/how-to-encode-and-decode-a-png-image

이미지의 이동은 마우스 오른쪽을 눌렀을때 해당 이미지 위에 있다면 그 이미지를 잡아 이동할 수 있게 하였다.

private void canvas_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
    mRightClicked = true;
 
    var nowPosition = e.GetPosition(canvas);
 
    int count = canvas.Children.Count;
    for(int i = 0; i < count; i++)
    {
        // 이미지가 아니면 널이 들어옴
        Image im = canvas.Children[i] as Image;
        if(im != null)
        {
            if (im.Margin.Left < nowPosition.X && im.Margin.Left + im.ActualWidth > nowPosition.X)
            {
                if (im.Margin.Top < nowPosition.Y && im.Margin.Top + im.ActualHeight > nowPosition.Y)
                {
                    imageMoved = true;
                    findImage = im;
                }
            }
        }
    }
}

캔버스의 자식수만큼 for문을 돌면서 Image인 것들만 확인하여 마우스가 이미지 위에 있다면 

그 중 하나만을 집어(findImage에 넣어줌. 전역변수) 이동할 수 있게 하였다.

MouseMove에서 아래와 같이 이동함

if (imageMoved)
{
    double imageleft = nowPosition.X - findImage.ActualWidth / 2;
    double imagetop = nowPosition.Y - findImage.ActualHeight / 2;
    findImage.Margin = new Thickness(imageleft, imagetop, 0, 0);
}

마우스를 떼면 역시나 전부 초기화 시켜주었다.

private void canvas_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
{
    mRightClicked = false;
 
    imageMoved = false;
    findImage = null;
}