Microsoft MVP성태의 닷넷 이야기
글쓴 사람
정성태 (techsharer at outlook.com)
홈페이지
첨부 파일

WPF - Line 요소를 Canvas에 위치시켰을 때 흐림(blur) 현상

WPF 관련 업무에서 멀어지다 보니, 이젠 아래의 글을 어떻게 작성했는지 조차 기억이 가물가물합니다. ^^;

WPF/Silverlight의 그래픽 단위와 Anti-aliasing 처리를 이해하자
; https://www.sysnet.pe.kr/2/0/1281

그런데, 아래와 같은 질문이 들어왔군요. (그래서 이전에 쓴 제 글을 다시 읽어봤습니다. ^^)

안녕하세요. SnapsToDevicePixels 질문입니다.
; https://www.sysnet.pe.kr/3/0/4775

어쨌든, 위의 질문을 간단하게 재현해 보면 이렇습니다. 다음과 같은 XAML을 만들고,

<Window x:Class="SnapToPixelTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" x:Name="xWindow" Height="350" Width="300">
    <Grid x:Name="xGrid">
        <Canvas x:Name="xCanvas">
            <Line Canvas.Top="10" Canvas.Left="10" X2="50" Y2="0" Stroke="Black" StrokeThickness="1" SnapsToDevicePixels="True" />
        </Canvas>
    </Grid>
</Window>

실행해 보면, 선이 뚜렷하게 안 보이고 약간 굵으면서 흐린 부분이 보입니다. 확대해 보면 2pixel 굵기로 위는 흐리고 아래는 뚜렷합니다.

[그림 1: SnapsToDevicePixels == True인 경우, 상단 1pixel 흐리고 하단 1pixel 뚜렷함]
wpf_snap_1.png

"WPF/Silverlight의 그래픽 단위와 Anti-aliasing 처리를 이해하자" 글의 내용대로라면, 위의 코드는 소수점을 포함하는 그 어떠한 연산도 없기 때문에 흐리게 나와야 할 이유가 없습니다. 게다가 런타임 시에 위치를 보정해 주는 SnapsToDevicePixels 옵션까지 True로 설정했는데 흐리게 나오다니요????!!!!! (사실 이건 이유를 잘 모르겠습니다.)

물론, SnapsToDevicePixels 옵션을 제거하면 상황이 더 안 좋게 나옵니다.

<Canvas x:Name="xCanvas">
    <Line Canvas.Top="10" Canvas.Left="10" X2="50" Y2="0" Stroke="Black" StrokeThickness="1" />
</Canvas>

[그림 2: SnapsToDevicePixels == False인 경우, 2pixel 모두 흐림]
wpf_snap_2.png

그렇긴 한데, 저 결과는 "WPF/Silverlight의 그래픽 단위와 Anti-aliasing 처리를 이해하자" 글에 나온 대로여서 이상할 것이 없습니다.

따라서, 위의 상황에서 1pixel짜리 선을 뚜렷하게 표현하려면 정수(integer) 단위의 물리 Pixel을 맞춰주면 됩니다. 이를 위해 0.5를 보정하면,

<Canvas x:Name="xCanvas">
    <Line Canvas.Top="9.5" Canvas.Left="10" X2="50" Y2="0" Stroke="Black" StrokeThickness="1" />
</Canvas>

이렇게 잘 나옵니다.

[그림 3: 뚜렷한 1pixel]
wpf_snap_3.png

재미있는 것은 위의 코드에 SnapsToDevicePixels 옵션을 주면,

<Canvas x:Name="xCanvas">
    <Line Canvas.Top="9.5" Canvas.Left="10" X2="50" Y2="0" Stroke="Black" StrokeThickness="1" 
            SnapsToDevicePixels="True" />
</Canvas>

다시 흐려집니다.

[그림 4: 흐린 1pixel]
wpf_snap_4.png

그런데, 더 재미있는 것이 있습니다. Canvas.Top, Canvas.Left를 지정하지 않고 Line 자체의 X1, Y1과 함께 SnapsToDevicePixels 옵션을 이렇게 지정해도 뚜렷한 1pixel을 그릴 수 있습니다.

<Canvas x:Name="xCanvas">
    <Line X1="10" Y1="10" X2="50" Y2="10" Stroke="Black" StrokeThickness="1" SnapsToDevicePixels="True"  />
</Canvas>

하지만 여기다 UseLayoutRounding="True"를 주면 오히려,

<Canvas x:Name="xCanvas" UseLayoutRounding="True" >
    <Line X1="10" Y1="10" X2="50" Y2="10" Stroke="Black" StrokeThickness="1" SnapsToDevicePixels="True" />
</Canvas>

"[그림 2: SnapsToDevicePixels == False인 경우, 2pixel 모두 흐림]"처럼 2pixel 흐린 선이 나옵니다. 일단, UseLayoutRounding이 사용되면 이제 다시 소수점 처리로 들어가야 합니다. (아래에서는 SnapsToDevicePixels 유무에 상관없습니다.)

<Canvas x:Name="xCanvas" UseLayoutRounding="True">
    <Line X1="10" Y1="10.5" X2="50" Y2="10.5" Stroke="Black" StrokeThickness="1" />
</Canvas>

위의 결과는 다시 "[그림 3: 뚜렷한 1pixel]"처럼 나옵니다. 그나저나... 저런 규칙 아닌 규칙들을 다 알아야 한다는 것이 좀 우습군요.

(첨부파일은 질문 글의 소스 코드를 1pixel 뚜렷한 걸로 바꾼 것입니다.)




여기서 힘든 부분이 있습니다. UseLayoutRounding은 하위 요소로 상속되기 때문에 Canvas를 사용하는 상단 중에 하나라도 설정되어 있으면 저렇게 소수점 처리를 해야 합니다. 휴~~~ 좀 좋은 방법 없을까요? 저도 이젠 피곤해지는군요. ^^;




[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]

[연관 글]





[최초 등록일: ]
[최종 수정일: 11/13/2016 ]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:techsharer@outlook.com

비밀번호

댓글 쓴 사람
 




... [46]  47  48  49  50  51  52  53  54  55  56  57  58  59  60  ...
NoWriterDateCnt.TitleFile(s)
11152정성태10/19/20196532VC++: 107. VirtualAlloc, HeapAlloc, GlobalAlloc, LocalAlloc, malloc, new의 차이점
11151정성태10/19/20196630VC++: 106. DLL 개발자가 주의해야 할 Secure CRT 함수 사용파일 다운로드1
11150정성태2/21/20174750.NET Framework: 645. Visual Studio Fakes 기능에서 Shim... 클래스가 생성되지 않는 경우
11149정성태2/21/20177038오류 유형: 378. A 64-bit test cannot run in a 32-bit process. Specify platform as X64 to force test run in X64 mode on X64 machine.
11148정성태2/20/20176132.NET Framework: 644. AppDomain에 대한 단위 테스트 시 알아야 할 사항
11147정성태2/19/20177585오류 유형: 377. Windows 10에서 Fake 어셈블리를 생성하는 경우 빌드 시 The type or namespace name '...' does not exist in the namespace 컴파일 오류 발생
11146정성태2/19/20176630오류 유형: 376. Error VSP1033: The file '...' does not contain a recognized executable image. [2]
11145정성태2/16/20176313.NET Framework: 643. 작업자 프로세스(w3wp.exe)가 재시작되는 시점을 알 수 있는 방법 - 두 번째 이야기 [4]파일 다운로드1
11144정성태2/6/20179215.NET Framework: 642. C# 개발자를 위한 Win32 DLL export 함수의 호출 규약 (부록 1) - CallingConvention.StdCall, CallingConvention.Cdecl에 상관없이 왜 호출이 잘 될까요?파일 다운로드1
11143정성태2/5/20176647.NET Framework: 641. [Out] 형식의 int * 인자를 가진 함수에 대한 P/Invoke 호출 방법파일 다운로드1
11142정성태10/19/201910897.NET Framework: 640. 닷넷 - 배열 크기의 한계 [2]파일 다운로드1
11141정성태3/21/20177664.NET Framework: 639. C# 개발자를 위한 Win32 DLL export 함수의 호출 규약 (4) - CLR JIT 컴파일러의 P/Invoke 호출 규약 [1]파일 다운로드1
11140정성태1/27/20176189.NET Framework: 638. RSAParameters와 RSA파일 다운로드1
11139정성태2/6/20176640.NET Framework: 637. C# 개발자를 위한 Win32 DLL export 함수의 호출 규약 (3) - x64 환경의 __fastcall과 Name mangling [1]파일 다운로드1
11138정성태1/20/20176294VS.NET IDE: 113. 프로젝트 생성시 부터 "Enable the Visual Studio hosting process" 옵션을 끄는 방법 - 두번째 이야기 [3]
11137정성태1/20/20175688Windows: 135. AD에 참여한 컴퓨터로 RDP 연결 시 배경 화면을 못 바꾸는 정책
11136정성태3/12/20206389오류 유형: 375. Hyper-V 내에 구성한 Active Directory 환경의 시간 구성 방법 - 두 번째 이야기
11135정성태1/20/20175768Windows: 134. Windows Server 2016의 작업 표시줄에 있는 시계가 사라졌다면?
11134정성태1/20/201710321.NET Framework: 636. System.Threading.Timer를 이용해 타이머 작업을 할 때 유의할 점 [5]파일 다운로드1
11133정성태2/6/20177382.NET Framework: 635. C# 개발자를 위한 Win32 DLL export 함수의 호출 규약 (2) - x86 환경의 __fastcall [1]파일 다운로드1
11132정성태3/25/201712409.NET Framework: 634. C# 개발자를 위한 Win32 DLL export 함수의 호출 규약 (1) - x86 환경에서의 __cdecl, __stdcall에 대한 Name mangling파일 다운로드1
11131정성태1/13/20178246.NET Framework: 633. C# - IL 코드 분석을 위한 팁 [2]
11130정성태1/11/20176939.NET Framework: 632. x86 실행 환경에서 SECURITY_ATTRIBUTES 구조체를 CreateEvent에 전달할 때 예외 발생파일 다운로드1
11129정성태6/30/20208745.NET Framework: 631. async/await에 대한 "There Is No Thread" 글의 부가 설명 [4]파일 다운로드1
11128정성태1/9/20178044.NET Framework: 630. C# - Interlocked.CompareExchange 사용 예제 [3]파일 다운로드1
11127정성태1/8/20176314기타: 63. (개발자를 위한) Visual Studio의 "with MSDN" 라이선스 설명
... [46]  47  48  49  50  51  52  53  54  55  56  57  58  59  60  ...