WPF 응용 프로그램에서 픽셀 맞추기

아티클
08/20/2008

업데이트: 2007년 11월

WPF 그래픽 시스템에서는 해상도와 장치의 영향을 받지 않기 위해 장치 독립적 단위를 사용합니다. 각각의 장치 독립적 픽셀은 시스템의 dpi(인치당 도트 수) 설정에 맞게 자동으로 크기가 조정됩니다. 따라서 WPF 응용 프로그램에서 다양한 dpi 설정에 적합한 배율 조정이 가능하며 자동으로 dpi를 인식할 수 있습니다.

그러나 이러한 dpi 독립성은 앤티 앨리어싱으로 인해 불규칙한 가장자리 렌더링을 발생시킬 수 있습니다. 대개 흐리거나 반투명한 가장자리로 표시되는 이러한 아티팩트는 가장자리의 위치가 장치 픽셀 사이가 아닌 장치 픽셀 가운데에 있을 때 발생할 수 있습니다. 이 문제를 해결하기 위해 WPF는 픽셀 맞추기를 통해 시각적 트리의 개체 가장자리를 장치 픽셀에 맞추거나 고정시켜 앤티 앨리어싱으로 인해 생성되는 반투명 가장자리를 제거할 수 있는 방법을 제공합니다.

픽셀 맞추기는 시각적 표시의 기하 도형에 작은 오프셋을 적용하여 기하 도형을 장치 픽셀에 맞춤으로써 이러한 시각적 아티팩트가 발생하지 않도록 하는 방법입니다.

이 항목에는 다음 단원이 포함되어 있습니다.

앤티 앨리어싱된 렌더링을 위한 픽셀 맞추기
지침
비트맵 이미지
관련 항목

앤티 앨리어싱된 렌더링을 위한 픽셀 맞추기

선명한 선

픽셀 맞추기를 사용하지 않으면 가장자리가 장치 픽셀 사이에 없을 경우 앤티 앨리어싱된 렌더링된 선이 반투명하게 나타날 수 있습니다. 다음 그림에서는 장치 픽셀 가운데에 있는 단일 픽셀 너비의 앤티 앨리어싱된 선(왼쪽)과 장치 픽셀 사이에 있는 단일 픽셀 너비 선(오른쪽)의 출력을 보여 줍니다.

앤티 앨리어싱된 선 렌더링

단일 픽셀 선에 비교한 앤티 앨리어싱된 선

픽셀 맞추기를 사용하면 앤티 앨리어싱된 선이 장치 픽셀에 맞춰지거나 고정되며 반투명 선 렌더링이 제거되어 선명하게 나타납니다. 다음 예제에서는 SnapsToDevicePixels 속성이 단일 픽셀 선에 주는 영향을 보여 줍니다. 창 크기를 천천히 조정하면 해당 위치가 변경될 때 맞춰지지 않은 선(왼쪽)의 시각적 아티팩트와 고정 크기의 맞춰진 선(오른쪽)이 표시됩니다.

<Page x:Class="PixelSnapping.Lines"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Lines" Name="linesPage"
    >
  <StackPanel Width="150"  Margin="7" Orientation="Horizontal">
    <!-- Single pixel line with pixel snapping turned OFF.-->
    <Rectangle SnapsToDevicePixels="False"
       Width="45.5" Margin="10" Height="1" Fill="Red"/>
    <!-- Single pixel line with pixel snapping turned ON.-->
    <Rectangle SnapsToDevicePixels="True"
      Width="45.5" Margin="10" Height="1" Fill="Red"/>
  </StackPanel>
  <!-- Background Grid -->
  <Page.Background>
    <DrawingBrush  Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">
      <DrawingBrush.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="White">
            <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="0,0,1,1" />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
          <GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z " Brush="#CCCCFF" />
          <GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="#CCCCFF" />
        </DrawingGroup>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Page.Background>
</Page>

참고

SnapsToDevicePixels는 레이아웃 과정을 통해 실행되는 요소에만 영향을 줍니다. DrawingGroup 개체의 GuidelineSet 속성을 사용하여 Drawing에 안내선을 설정할 수 있습니다. Visual의 안내선을 수동으로 설정하려면 VisualYSnappingGuidelines 및 VisualXSnappingGuidelines 속성을 사용하여 새 안내선을 만드십시오.

픽셀 맞추기는 가로 및 세로 선만 선명하게 만들고 대각선에는 영향을 주지 않습니다.

인접 개체

앤티 앨리어싱은 개체 사이의 가장자리가 인접해 있고 장치 픽셀의 행이나 열 사이에 인접한 가장자리가 정확하게 맞춰지지 않는 경우 시각적 아티팩트를 발생시킬 수 있습니다. 앤티 앨리어싱된 장면은 각 개체 사이의 가장자리가 투명한 색으로 나타나는 삼투 효과를 생성하는 기본 배경색을 사용하여 가장자리를 부드럽게 만들 수 있습니다. 다음 그림에서는 이 삼투 효과를 보여 줍니다.

삼투 효과가 있는 인접 개체

인접 개체 사이의 배경 삼투 효과

픽셀 맞추기를 사용하면 삼투 효과를 제거하기 위해 인접 가장자리가 장치 픽셀에 맞춰집니다. 다음 예제에서는 SnapsToDevicePixels 속성이 인접 개체에 주는 영향을 보여 줍니다. 창 크기를 천천히 조정하면 맞춰지지 않은 사각형(왼쪽)의 삼투 문제와 맞춰진 사각형(오른쪽)이 시각적 불규칙성 없이 함께 유지되는 것을 볼 수 있습니다.

<Page x:Class="PixelSnapping.Seeping"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Seeping"
    >
  <StackPanel Orientation="Horizontal" Height="100">
    <Border  
      SnapsToDevicePixels="False"
      Margin="10" BorderThickness="1" BorderBrush="Black" Height="80" Background="White">
      <StackPanel Height="100.0">
        <Rectangle Width="20" Height="20" Fill="Red"/>
        <Rectangle Width="20" Height="20" Fill="Red"/>
        <Rectangle Width="20" Height="20" Fill="Red"/>
        <Rectangle Width="20" Height="20" Fill="Red"/>
      </StackPanel>
    </Border>
    <Border
      SnapsToDevicePixels="True"
        Margin="10" BorderThickness="1" BorderBrush="Black" Height="80" Background="White">
      <StackPanel Height="100.0">
        <Rectangle Width="20" Height="20" Fill="Red"/>
        <Rectangle Width="20" Height="20" Fill="Red"/>
        <Rectangle Width="20" Height="20" Fill="Red"/>
        <Rectangle Width="20" Height="20" Fill="Red"/>
      </StackPanel>
    </Border>
  </StackPanel>
  <!-- Background Grid -->
  <Page.Background>
    <DrawingBrush  Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">
      <DrawingBrush.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="White">
            <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="0,0,1,1" />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
          <GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z " Brush="#CCCCFF" />
          <GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="#CCCCFF" />
        </DrawingGroup>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Page.Background>
</Page>

맞춰진 사각형은 SnapsToDevicePixels 속성 값을 명시적으로 설정하지 않습니다. 모든 자식 요소에서 해당 동작이 가능하도록 이 속성을 루트에서 true로 설정하면 됩니다.

Text

WPF(Windows Presentation Foundation)는 항상 앤티 앨리어싱된 텍스트를 생성합니다. 텍스트가 정적인 경우 텍스트에는 픽셀 맞추기가 수행됩니다. 이는 문자 모양을 픽셀 모눈 위에 직접 배치하여 더 선명한 텍스트를 제공함으로써 앤티 앨리어싱된 텍스트의 모양을 선명하게 만드는 데 도움이 됩니다. 그러나 WPF(Windows Presentation Foundation)가 스크롤, 배율 조정 또는 애니메이션 효과를 준 변환과 같은 애니메이션과 유사한 이동을 감지하면 이동이 완료될 때까지 픽셀 맞추기가 해제됩니다. 애니메이션 또는 스크롤 이동이 끝나면 픽셀 맞추기의 애니메이션 효과가 천천히 돌아옵니다.

지침

근본적으로 픽셀 맞추기는 안내선에 의해 제어됩니다. 안내선은 기하 도형을 장치 픽셀 모눈에 맞게 조정하는 데 도움이 됩니다. 대부분의 경우 SnapsToDevicePixels 속성을 사용하여 픽셀 맞추기를 수행하면 원하는 결과를 얻을 수 있습니다. 그러나 이 속성을 항상 사용할 수 있는 것은 아닙니다. 특히 Drawing 개체를 사용하거나 DrawingContext를 직접 다루는 경우가 이에 해당합니다. 이러한 경우에는 픽셀 맞추기가 제공하는 원하는 선명도를 얻기 위해 안내선을 설정해야 합니다.

Drawing 및 DrawingContext 개체에 안내선을 설정하려면 GuidelineSet 클래스를 사용합니다. 이 클래스를 사용하면 DrawingGroup에 적용하거나 이후의 그리기 명령을 위해 DrawingContext로 푸시할 수 있는 가로 및 세로 안내선을 만들 수 있습니다. 안내선은 장치 픽셀에 맞춰야 하는 선이 무엇인지 그리기에 알려 줍니다. GuidelineSet 사용 방법의 자세한 예제는 방법: Drawing에 GuidelineSet 적용을 참조하십시오.

가로 및 세로 안내선 컬렉션을 변경하여 Visual 수준에서 안내선을 설정할 수도 있습니다. 이러한 컬렉션에는 VisualYSnappingGuidelines 및 VisualXSnappingGuidelines 속성을 통해 액세스할 수 있습니다.

비트맵 이미지

WPF는 dpi에 독립적이므로 비트맵 기반 UI가 원하지 않는 표시 결과를 생성할 수 있습니다. 앤티 앨리어싱된 장면은 단편적인 픽셀 맞춤 문제로 인해 이미지를 흐리게 만들 수 있습니다. 이는 특히 인접한 대비 요소(예: 교대로 반복되는 검은색 및 흰색 선)가 있는 단일 픽셀 선과 같이 고주파 변경이 있는 이미지에서 분명하게 나타납니다. 다음 그림에서는 맞춰진 이미지(오른쪽)와 장치 픽셀에 맞춰지지 않도록 오프셋된 이미지(오른쪽)의 이미지 품질 차이를 보여 줍니다.

장치 픽셀에 대한 이미지 맞춤

장치 픽셀이 맞춰지지 않아 흐리게 표시된 이미지

UI에서 이미지의 일반적인 시나리오는 아이콘을 나타내는 이미지를 다른 개체 내에 놓는 것입니다. 일반적으로 아이콘은 고주파 변경이 있는 작은 이미지이므로 앤티 앨리어싱으로 인해 생성되는 시각적 아티팩트를 방지하기 위해 응용 프로그램의 레이아웃을 조정해야 할 수 있습니다.

이미지를 가운데에 적절하게 배치하려면 이미지의 픽셀 너비와 높이가 짝수인 경우 컨테이너의 너비와 높이가 짝수여야 합니다. 이미지의 픽셀 너비와 높이가 홀수인 경우에는 포함하는 요소의 너비와 높이도 홀수여야 합니다.

다음 예제에서는 Image를 포함하는 두 개의 Border 개체를 만듭니다. 위쪽 테두리는 이미지의 너비 및 높이와 일치하는 짝수 너비 및 높이를 가집니다. 아래쪽 테두리는 홀수 너비 및 높이를 가집니다.

다음 그림에서는 이 예제의 출력과 컨테이너 크기가 이미지에 주는 영향을 보여 줍니다.

테두리 내에서 가운데에 맞춰진 이미지

<Page x:Class="PixelSnapping.Images"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Images"
    >
  <StackPanel>
    <!-- Image has a pixel dimension of 144x96. -->
    <!-- Because the image has a even width and height, 
         an even border width and height allows the image to proper center. 
    -->
    <Border HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" Height="100">
      <Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="sharpness.png" Stretch="None"/>
    </Border>
    <!-- Image has a pixel dimension of 144x96. -->
    <!-- Because the image has a even width and height, 
         an odd border width and height causes the image to soften. 
    -->
    <Border HorizontalAlignment="Left" VerticalAlignment="Top" Width="201" Height="101">
      <Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="sharpness.png" Stretch="None"/>
    </Border>
  </StackPanel>
  <!-- Grid Background -->
  <Page.Background>
    <DrawingBrush  Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">
      <DrawingBrush.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="White">
            <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="0,0,1,1" />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
          <GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z " Brush="#CCCCFF" />
          <GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="#CCCCFF" />
        </DrawingGroup>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Page.Background>
</Page>

단순히 컨테이너 개체의 크기를 조정한다고 해서 장치 픽셀 맞춤이 보장되지는 않습니다. 응용 프로그램의 전체 레이아웃이 이미지 맞춤에 영향을 줄 수 있습니다. 디스플레이 dpi(인치당 도트 수)도 이미지 맞춤에 영향을 줍니다. 위 예제에서는 디스플레이가 96dpi(인치당 도트 수)로 설정된 경우에만 이미지 맞춤이 작동합니다. 다른 모든 설정에서는 디스플레이 설정을 수용할 수 있도록 레이아웃을 조정해야 합니다. WPF(Windows Presentation Foundation) 응용 프로그램에서는 가능하면 고주파 이미지를 사용하지 말아야 합니다.