Dot Font Maker

Basic Concept

기본개념 주어진 모양에 대해 HitTest를 열심히 수행하여,
주어진 모양 위에 존재하는 점들의 리스트를 추출합니다.

추출한 점들을 XML로 생성하여 DotFont 개념으로 활용합니다.

Import XAML

외부 XAML 파일을 불러들여 Dot를 추출할 대상으로 삼습니다.
이 예제에서는 가능하면 300x300 이하의 Visual 객체를 품고있는 XAML 파일을 사용해 주십시오.

XAML 파일의 예

1. Rect300.xaml

<Grid Height="300" Width="300" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <Rectangle Fill="Blue"/>
</Grid>

invalid-file

2. Octo.xaml

<Grid Height="300" Width="300" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <Path HorizontalAlignment="Stretch" Margin="6.96099996566772,5.4980001449585,9.08100032806396,6.89200019836426" VerticalAlignment="Stretch" Data="M270.00015,291.00095 C257.27469,294.68719 223.39499,264.90533 205.81969,256.12411 C190.81198,248.62575 157.36313,200.96284 88.999947,247.00099 C64.318466,263.62234 75.038261,251.83934 36.999886,283.00119 C15.326254,300.75668 -4.0001645,294.00125 18.999863,263.0011 C41.999889,232.00093 67.00029,202.00053 67.00029,202.00053 C67.00029,202.00053 114.00027,179.00043 61.000294,179.00043 C8.0003204,179.00043 -13.999672,141.00024 34.000305,150.00029 C82.000282,159.00034 90.00061,152.00031 90.00061,152.00031 C90.00061,152.00031 96.023254,150.46558 90.045967,141.50612 C83.61409,131.86528 79,123 79,123 C79,123 37,55 95,21 C153,-13 187.00024,21 191.00026,24 C195.00027,27 223.00035,66.999825 196.00027,120 C169.0002,173.00017 230.00034,148.00009 230.00034,148.00009 L257.0004,132.00021 C257.0004,132.00021 320.00058,94.000038 273.00046,150.00031 L244.00014,184.00046 C210.00009,214.0006 232.00012,220.00063 245.00014,233.00069 C258.00015,246.00075 282.72562,287.3147 270.00015,291.00095 z" Stretch="Fill" Stroke="#FFFFFFFF" StrokeThickness="20"/>
</Grid>

invalid-file

Live Demo



1. Font Name을 입력합니다.
2. Sampling Dot Pitch를 확인합니다.
3. (옵션) Randomize 여부를 결정합니다.
4. Generate 버튼을 누릅니다.
5. 허한 부분은 Manual Mode를 On한 상태에서 수동으로 Click하여 점을 추가합니다.
6. XML 데이터를 얻습니다.

Source

invalid-file

Tip

TextBlock으로 생성한 글자는 눈에 보이는 부분만 HitTest에서 잡히는 것이 아닙니다.
여백부분도 HitTest에서 추출되어 다음과 같은 결과를 보이게 됩니다.

때문에 TextBlock에 대해서 Dot를 추출하고 싶으신 분은 Expression Blend에서 미리 Path로 변환하셔야 합니다.
Expression Blend에서 TextBlock을 선택하고 [Object-Path-Convert to Path]를 수행하십시오.

Epilogue

동적으로 TextBlock에 대한 Path를 공급받으시려면, 웹서비스에서 WPF의 라이브러리를 이용하여,
TextBlock을 Path로 컨버팅한 다음 Path 데이터를 Return 받는 아이디어(Boxmile의 조언)도 있습니다.
한글같이 일일이 Static xml 데이터로 폰트를 준비해 놓기 어려운 경우에 더 유용합니다.
이것은 다음에 시간적 여유가 있을 때 한번 시도해 보려고 합니다.

또, 아예 TextDragon처럼 Dot Font Maker에서도 Path자체를 그릴 수 있게 지원하면,
바로 Path를 그리고, 그 Path로 부터 Dot를 추출할 수 있도록 할 수도 있겠습니다.

이름이 Dot Extractor였어도 될 뻔했습니다.
하지만 Dot Font Maker라고 부르고 싶네요.

'이런 걸 왜 실버라이트로 짰담'하시는 분들 계실지 모릅니다만, 왜~ 있잖아요. 개발자적인 습성!
무엇을 짜던 간에 그 순간 자기가 가장 익숙한 언어로 짜고 싶어하는 것. ^^

여튼 차후 공개될 DotFont를 사용한 응용작 기대해 주세요. ^^