WPF Korea +

'image'에 해당되는 글 2건

2009/04/12 Fixed Image Control Version 1.0 (1)
2008/07/12 C#에서 Web상의 Image불러오기

Fixed Image Control Version 1.0

안녕하세요 :) 김대욱입니다. 이번에도 포스팅이 늦어 죄송하다는 말로 시작합니다.. ㅠ

이번시간에는 WPF에서 제공되는 기본 Image Control보다 훨씬 깔끔하게 Image를 출력해주는 Fixed Image Control을 구현하는 방법에 대해 소개합니다. 아래는 구현 결과의 예로, 똑같은 내용의 텍스트가 기록된 이미지를 WPF 기본 Image Control을 사용하여 출력했을 때와 이번시간 구현하게될 FixedImage Control을 사용하여 출력했을때를 비교한 결과입니다.

한눈에 봐도 두 결과의 차이를 확인 하실 수 있는데요, 기본 Fixed ImageControl이 WPF기본 Image Control을 사용한 결과보다 훨씬 또렷한것을 확인 하실 수 있습니다. (일부러 저부분만 블러처리 한거 아니에요... ^^; )

이러한 문제는 WPF의 장점이라면 장점, 단점이라면 단점이 될 수 도 있는 WPF만의 독립적인 좌표계 덕분에(?) 객체가 흐릿하게 보여지는 것입니다. 이전에 SnapsToDevicePixels Property를 사용하여 위와 유사한 문제를 해결하는 방법에 대해 소개해 드린바 있습니다만,

SnapsToDevicePixels를 사용하여 위 문제를 해결하기 위해서는 Layout이 변경될때마다 VisualXSnappingGuidelines와 VisualYSnappingGuidelines를 직접 지정 해줘야 하는 번거러운 작업이 따르기 때문에 그닥 좋지 방법이라 할수는 없어 보입니다. (레이아웃이 죽어도 변경될일이 없고, 사용하는 장치는 항상 동일하다 하신다면 이방법을 사용하시는것도 나쁘진 않겟네요 :)

그렇다면 Fixed Image는 어떤 방식을 사용했을가요?

뭔가 엄청난 방법이 숨겨져 있지 않을가... 하셨겠지만 사실은 간단합니다. WPF에서 객체를 출력할 때 장치의 좌표에 맞춰 출력하도록 한건데요. 일종의 trade off라 할수 있겠습니다. 우리가 일반적으로 사용하는 데스크탑에서는 기본 좌표가 Pixel단위다 보니 소수점 표현이 불가능하죠. 하지만 벡터 기반의 WPF에서는 레이아웃 계산시 소수점을 사용하기 때문에 픽셀이 가운데 걸쳐 버리게되는 현상이 생깁니다. (이 내용은 이전 포스팅이나 MSDN을 참고해주세요^^ )

따라서 WPF가 객체를 (100.123, 100.678)의 위치에 출력하려고 할때 소수점을 제외한 위치인 (100, 100) 에 출력하도록 하면되겠습니다. 아래는 위에서 FixedImageControl의 소스코드입니다. 이번엔 예시를 보여드리기 위해 Image Control에 적용했지만, 위와 같은 방법을 적용한다면 Image Control이외에 다른 Control에도 적용할 수 있습니다. 코드에 대한 설명을 주석을 참고해주세요.

public class FixedImageControl : Image
{

// WPF에서의 좌표와 Device좌표의 차이
    private Point Offset { get; set; }

public FixedImageControl()
    {
        // 레이아웃이 변경될때 발생하는 이벤트
        LayoutUpdated += new EventHandler(FixedImageControl_LayoutUpdated);
    }

// 레이아웃이 변경될때 발생하는 이벤트
    void FixedImageControl_LayoutUpdated(object sender, EventArgs e)
    {

// 객체의 WPF Offset과 Device Offset의 차이가 임계치 이상 발생하면
        // 화면을 다시 그립니다.

Point CurrentOffset = GetOffset();

double Threshold = 0.001;   // 1 / 100 Pixel
        double DeltaX, DeltaY;
        DeltaX = CurrentOffset.X - Offset.X;
        DeltaY = CurrentOffset.Y - Offset.Y;
        if ((((DeltaX < Threshold) && (DeltaX > -Threshold)) == false) ||
            (((DeltaY < Threshold) && (DeltaY > -Threshold)) == false))
        {
            InvalidateVisual();
        }
  
    }

protected override void OnRender(DrawingContext dc)
    {
        // 객체의 WPF Offset과 Device Offset의 차이를 계산 한뒤
        // DrawingContext에 TranslateTransform을 적용합니다.
        
        Offset = GetOffset();
        dc.PushTransform(new TranslateTransform(Offset.X, Offset.Y));

base.OnRender(dc);
    }

private Point GetOffset()
    {
        Point Offset = new Point();

PresentationSource Source = PresentationSource.FromVisual(this);
        if (Source != null)
        {
            Visual RootVisual = Source.RootVisual;

/////////////////////////////////////////////////////////////////////////////
            // STEP #1. RootVisaul로부터의 객체의 Offset을 가져옵니다.
            /////////////////////////////////////////////////////////////////////////////

// 객체의 시작 위치(0,0)를 RootVisual로부터의 위치로 계산합니다.
            Offset = this.TransformToAncestor(RootVisual).Transform(new Point(0, 0));

// WPF에서 사용하는 좌표를 Device 좌표로 변환합니다.
            Offset = Source.CompositionTarget.TransformToDevice.Transform(Offset);

/////////////////////////////////////////////////////////////////////////////
            // STEP #2. Device 좌표에는 소수점 계산이 불가능하므로 Offset을 반올림을 합니다.
            /////////////////////////////////////////////////////////////////////////////
            Offset.X = Math.Round(Offset.X);    // - Offset.X;
            Offset.Y = Math.Round(Offset.Y);    // - Offset.Y;

/////////////////////////////////////////////////////////////////////////////
            // STEP #3. 위 계산을 다시한번 거꾸로 진행한뒤 최종 Offset을 가져옵니다.
            /////////////////////////////////////////////////////////////////////////////

// 소수점이 없어진 Offset을 다시 WPF에서 사용하는 좌표로 변환합니다.
            Offset = Source.CompositionTarget.TransformFromDevice.Transform(Offset);

// RootVisual의 좌표를 객체의 좌표로 변환합니다.
            Offset = RootVisual.TransformToDescendant(this).Transform(Offset);

}

return Offset;
    }

}

위 코드중에서 가장 중요한 부분은 객체가 출력될때의 좌표가 소수점에 해당되는지, 소수점이라면 정수로 변환하기 위해 어느정도 이동을 해야하는지를 계산하는 GetOffset부분과 Rendering 시에 TranslateTransform을 Push해주는 부분이 가장중요하다고 생각되니 이부분을 중심으로 살펴보시면 이해하시는데 큰 어려움은 없으실것 같습니다.

그럼 오늘 포스팅은 여기까지로 하고, 이번 포스팅에 대한 질문이나 기타 문의는 이메일 또는 댓글로 남겨주시면 답변해드리도록하겠습니다. 그럼 좋은밤되세요~ 뿅~ :)

아래 첨부파일은 FixedImageControl의 전체소스코드와 샘플 프로젝트파일입니다.

FixedImage.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Posted by 곡스

TAG c#, image, WPF, WPF Image

Trackback 0 Comment 1

C#에서 Web상의 Image불러오기

멤버십에서 도서 관리 Application을 구현하면서, 바코드를 생성해야 하는 부분이 있었는데,
바코드 생성과 관련된 부분까지 구현하기에는 큰 의미가 없을 것 같아, 고민하던 중,
웹 상에서 무료로 제공해주는 바코드 생성 프로그램이 있다는 걸 확인하고 이를 사용하여 바코드를 생성했습니다.

그런데, 바코드 생성 프로그램이 Web Application이다 보니 생성된 바코드가 웹 상에 표시되기 때문에 이를
제가 개발한 Application에 출력하기 위해서는 매번 '다른 이름으로 저장'으로 저장한 뒤, 그림을 로드 하여 출력 방법 밖에 없었습니다.

귀찮은걸 무지무지무지 * 10000 싫어하는 저로써는 Web상의 Image를 Application에 직접 출력 하도록 하는 기능을 생각했고, 아래와 같이 함수를 만들어 간단하게 구현 해보았습니다.

public Bitmap BitmapFromURL(string URL)
{
try
{
WebClient Downloader = new WebClient();
Stream ImageStream = Downloader.OpenRead(URL);
Bitmap DownloadImage = Bitmap.FromStream(ImageStream) as Bitmap;
return DownloadImage;
}
catch (Exception)
{
return null;
}
}