Interactive Book Search Engine Using Dot Font

이전시간에 올렸었던 DotFont를 사용한 샘플입니다. 기능은 사용자에게 키워드를 입력받고 해당하는 도서들을 검색합니다. 그리고 도서를 출력할 때 키워드를 DotFont로 변환하여 점 하나하나를 검색된 도서를 출력합니다. 아래는 시연 동영상입니다.



멤버십에서 작업을 하고있는데.. 멤버십 인터넷이 상당히 느려서 검색 결과가 약간 늦게 뜨네요.. ㅠㅠ
동영상을 끝까지 보다보면 한글도 잘표시가 되는 것을 확인 하실 수 있습니다. 이번 예제는 코드가 꾀 긴 관계로 중요한 코드만 여기서 설명하고 전체 소스코드는 첨부파일로 올리도록하도록 하겠습니다..

아래는 이번 예제에서 가장 핵심(?) 되는 부분이라고 할 수 있는 DotFont의 활용 부분입니다.

view plaincopy to clipboardprint?

1. foreach (Point Dot in DotString)   
2. {   
3.     Book BookItem = BookItems[Random.Next(0, BookItems.Count - 1)];   
4.     BitmapSource Source = BookItem.Image;   
5.     Rectangle DotItem = new Rectangle();   
6.     DotItem.Width = DotItem.Height = Random.Next(1500,2000) / 100;   
7.     DotItem.Fill = new ImageBrush(Source);   
8.     DotItem.Tag = BookItem;   
9.   
10.     DotItem.RenderTransform = new RotateTransform(Random.Next(-360, 360));   
11.     DotItem.MouseEnter += new MouseEventHandler(DotItem_MouseEnter);   
12.     DotItem.MouseLeave += new MouseEventHandler(DotItem_MouseLeave);   
13.     DotItem.MouseLeftButtonUp += new MouseButtonEventHandler(DotItem_MouseLeftButtonUp);   
14.        
15.     Canvas.SetLeft(DotItem, Dot.X - DotItem.Width / 2);   
16.     Canvas.SetTop(DotItem, Dot.Y - DotItem.Height / 2);   
17.   
18.     ResultCanvas.Children.Add(DotItem);   
19.   
20. }  

foreach (Point Dot in DotString)
{
    Book BookItem = BookItems[Random.Next(0, BookItems.Count - 1)];
    BitmapSource Source = BookItem.Image;
    Rectangle DotItem = new Rectangle();
    DotItem.Width = DotItem.Height = Random.Next(1500,2000) / 100;
    DotItem.Fill = new ImageBrush(Source);
    DotItem.Tag = BookItem;

    DotItem.RenderTransform = new RotateTransform(Random.Next(-360, 360));
    DotItem.MouseEnter += new MouseEventHandler(DotItem_MouseEnter);
    DotItem.MouseLeave += new MouseEventHandler(DotItem_MouseLeave);
    DotItem.MouseLeftButtonUp += new MouseButtonEventHandler(DotItem_MouseLeftButtonUp);
    
    Canvas.SetLeft(DotItem, Dot.X - DotItem.Width / 2);
    Canvas.SetTop(DotItem, Dot.Y - DotItem.Height / 2);

    ResultCanvas.Children.Add(DotItem);

}

DotString은 DotFont의 Raw Point가 저장된 List<Point>객체입니다. ForEach문을 사용하여 각각의 포인트들 검색한 도서를 매핑시킵니다. 여기서 BookItems는 검색된 도서가 저장되어 있는 List입니다.

기타 질문은 리플이나 메일 보내주시면 답변드리도록 하겠습니다.

PS. 코드를 보시면 중간에 OPENAPI Key를 입력하시는 부분이 있습니다. 해당 부분을 본인의 OpenAPI Key로 설정하셔야 동작됩니다.

BookSearchEngine.zip