Microsoft MVP성태의 닷넷 이야기
글쓴 사람
정성태 (techsharer at outlook.com)
홈페이지
첨부 파일
(연관된 글이 1개 있습니다.)

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 at outlook.com

비밀번호

댓글 작성자
 




... 121  122  [123]  124  125  126  127  128  129  130  131  132  133  134  135  ...
NoWriterDateCnt.TitleFile(s)
10849정성태9/14/201557100오류 유형: 307. CLR20r3 오류 해결을 위해 mscorlib.dll을 덮어쓸때 주의할 점 [12]
10848정성태9/8/201527475VS.NET IDE: 103. Visual Studio의 Ctrl + F5 실행 동작파일 다운로드1
10847정성태9/8/201523531VS.NET IDE: 102. 목록(List) 타입의 값을 디버깅 중 Watch 창에서 확인하는 방법 [1]파일 다운로드1
10846정성태9/8/201520933오류 유형: 306. "query user" 명령어에 공백 문자가 포함된 계정을 전달하는 경우
10845정성태9/3/201522049오류 유형: 305. 윈도우 백업 시 오류 - 0x80780166
10844정성태9/2/201523246.NET Framework: 528. C# - 상호 참조하는 경우의 정적 생성자 동작 방식 [4]파일 다운로드1
10843정성태9/1/201523982VS.NET IDE: 101. Visual Studio 2015의 솔루션 탐색기가 클래스 뷰 정보로 인해 느려지는 현상
10842정성태9/1/201520978.NET Framework: 527. 닷넷 사용자 정의 예외 클래스의 최소 구현 코드 - 세 번째 이야기
10841정성태8/31/201530325개발 환경 구성: 276. Visual Studio 2013에서 C# 6과 닷넷 4.6 기능을 사용하려면?
10839정성태8/22/201528838Windows: 112. 윈도우 10에서 터치 키보드를 안 뜨게 할 수 있는 방법 [4]
10838정성태8/22/201539142오류 유형: 304. Windows 10에서 VPN 연결이 실패한다면? [3]
10837정성태8/21/201519444오류 유형: 303. Your computer is low on memory. Save your files and close these programs...
10836정성태8/21/201520444오류 유형: 302. 설치 파일 실행 시 "This app can't run on your PC" 오류가 뜬다면?
10835정성태8/21/201528890웹: 31. Microsoft Edge 브라우저를 명령행에서 띄우는 방법 [1]
10834정성태8/19/201521030.NET Framework: 526. 닷넷 - 값 형식을 new 없이 생성하면 0으로 초기화되지 않는다?
10833정성태8/18/201525656.NET Framework: 525. C# - 닷넷에서 프로세스가 열고 있는 파일 목록을 구하는 방법파일 다운로드1
10832정성태8/17/201530044디버깅 기술: 74. x64 콜 스택 인자 추적과 windbg의 Child-SP, RetAddr, Args to Child 값 확인 [8]파일 다운로드2
10831정성태8/13/201530034.NET Framework: 524. .NET 4.0과 .NET 4.5의 컴파일 결과 차이점 [1]파일 다운로드1
10830정성태8/12/201524055개발 환경 구성: 275. Web.config이 적용되지 않는 프로젝트에서 Razor 템플릿 파일의 C# 컴파일러 버전 제어 [1]
10829정성태8/10/201526150개발 환경 구성: 274. PowerShell/명령행에서 JDK/JRE를 무인(unattended)/자동 설치를 하는 방법 [3]
10828정성태8/10/201531736웹: 30. Edge 브라우저에서 "이 웹 사이트에는 Internet Explorer가 필요함" 단계를 없애는 방법 [1]
10827정성태7/8/201533071개발 환경 구성: 273. Visual Studio 2015에서 Github와 연동하는 방법 [3]
10826정성태7/8/201522733오류 유형: 301. The trust relationship between this workstation and the primary domain failed. - 두 번째 이야기
10825정성태7/8/201522304개발 환경 구성: 272. Visual Studio IDE 설치 없이 Visual Studio SDK 설치하는 방법
10824정성태7/7/201527464개발 환경 구성: 271. Team Foundation Server 2015 설치 방법 [1]
10823정성태7/7/201527946오류 유형: 300. SqlException (0x80131904): Unable to open the physical file
... 121  122  [123]  124  125  126  127  128  129  130  131  132  133  134  135  ...