Fastest Condensed Textblock Using GlyphRun

Introduction

WPF에서는 기본적으로 TextBlock나 FlowDocument 와 같은 텍스트 관련 컨트롤을 제공하고 있습니다. 이와 같은 컨트롤들은 텍스트와 관련된 일련의 과정을 개발자가 쉽게 사용할 수 있도록 고수준에서 제공되지만, 디테일한 텍스트조작을 지원하지 않습니다. 

TextBlock과 같은 고수준 컨트롤보다 좀더 디테일한 조작이 가능한 FormattedText를 제공하고 있지만, FormattedText는 WPF의 텍스트 기능 관점에서 텍스트를 그래픽 요소로 처리하기 때문에 DrawingContext의 DrawingText를 통해 텍스트를 렌더링 합니다. FormattedText에서는 텍스트의 Geometry를 생성할 수 있기 때문에 여러가지 효과(윤곽선, 모양등)를 적용하는데 용이하지만, Geometry를 생성하는데 있어 많은 처리시간이 소요 된다는 단점이 있습니다.



이번시간에 소개할 내용은 위 동영상과 같이 GlyphRun을 이용해 텍스트를 저수준에서 조작하여 빠르게 자간을 조절할 수 있는 컨트롤을 개발하는 방법에 대해 소개합니다. 

What is the GlyphRun?

GlyphRun은 단일 크기의 단일 글꼴로 구성되어 있고 단일 렌더링 스타일이 적용된 문자 모양을 나타내는 객체로, WPF의 텍스트 렌더링 계층에서 가장 하위 수준에 속하는 객체 입니다. GlyphRun은 텍스트에 대한 저수준 제어가 가능하기 때문에 각각의 문자에 대한 크기나, 위치 등을 Geometry 조작없이 제어할 수 있습니다. 하지만, TextBlock나 FormattedText와 같은 고수준 객체에서 지원하는 텍스트 기능(TextAlignment, TextWraping, TextTriming 등)을 제공하지 않기 때문에 직접 구현해야하는 단점이 있습니다.

Fastest Condensed Textblock

이번시간에는 입력된 텍스트의 자간을 저수준에서 빠르게 조작하여 출력해주는 컨트롤을 제작합니다. 이번시간에 사용하는 GlyphRun은 TextAlignment나 TextWarping과 같은 기능은 기본적으로 제공하지 않기 때문에 단일 라인 텍스트 조작을 목표로합니다.

아래 코드는 Text, FontFamily, FontSize, FontStretch 등을 DependencyProperty로 정의하고, OnPropertyChanged가 발생할경우 GlyphRun을 생성하는 코드입니다.

protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e) { // Text, FontSize, FontStrech 등이 수정되었을때 GlyphRun 다시생성 if (e.Property.OwnerType == typeof(CondensedTextBlock)) { CreateGlyphRun(); InvalidateVisual(); } base.OnPropertyChanged(e); } protected GlyphRun GlyphRun { get; set; } protected Size GlypSize { get; set; } public void CreateGlyphRun() { Typeface Typeface = FontFamily.GetTypefaces().First(); GlyphTypeface GlyphTypeface = null; Typeface.TryGetGlyphTypeface(out GlyphTypeface); // Glyp Index를 저장할 공간 ushort[] GlyphIndexes = new ushort[Text.Length]; // 문자의 이동 너비를 저장할 공간 double[] AdvanceWidths = new double[Text.Length]; double TotalWidth = 0; for (int i = 0; i < Text.Length; i++) { // Glyph Typeface로부터 입력한 텍스트의 Glyph Index를 가져온다. GlyphIndexes[i] = GlyphTypeface.CharacterToGlyphMap[Text[i]]; // Glyph Typeface로부터 입력한 Glyph Index의 기본 Width를 가져오고 FontSize와 FontStretch를 적용 AdvanceWidths[i] = GlyphTypeface.AdvanceWidths[GlyphIndexes[i]] * FontSize * FontStretch; // 텍스트 전체 크기 계산을 위한 합계산 TotalWidth += AdvanceWidths[i]; } GlypSize = new Size(TotalWidth, GlyphTypeface.Height * FontSize); GlyphRun = new GlyphRun(GlyphTypeface, 0, false, FontSize, GlyphIndexes, new Point(0, 0), AdvanceWidths, null, null, null, null, null, null); }

위 코드에서 중요한 부분은 Typeface로부터 GlyphTypeface를 생성한다음 GlyphTypeface로부터 문자 Glyph 정보를를 추출하는 과정에 있습니다. 그리고 AdvanceWidths를 통해 각문자가 할당 받는 크기를 FontSize와 FontStretch에 맞게 재조정한뒤 이를 기반으로 GlyphRun를 생성합니다.

protected override void OnRender(DrawingContext drawingContext) { // 화면에 텍스트를 렌더링 하기 위한 부분 drawingContext.DrawGlyphRun(Brushes.Black, GlyphRun); base.OnRender(drawingContext); } protected override Size ArrangeOverride(Size finalSize) { // 레이아웃 처리단계를 수행하기 위한 부분 return GlypSize; }
생성된 GlyphRun은 OnRender에서 DrawGlyphRun을 이용해 화면에 출력하고, ArrangeOverride에서 생성된 텍스트의 크기를 반환합니다. 이것으로 간단하게 GlyphRun을 이용해서 자간조절이 가능한 TextBlock을 생성해 보았습니다. GlyphRun을 이용해 자간 조절 뿐만아니라, 행간, 정렬등의 기능을 구현해보시면 이번 시간 내용을 이해하시는데 많은 도움이 될것 같습니다.