'TileImage'에 해당되는 글 1건

  1. 2011.03.22 Create Tile Image in Silverlight(or Siverlight for WP7)

Introduction

WPF의 경우 이미지나 드로잉객체를 바둑판형식으로 출력하기 위한 TileBrush를 제공하고있지만 Silverlight에서는 TileMode를 지원하고 있지 않아 Shader를 이용하거나 여러개의 객체를 생성하여 바둑판형식의 출력을 구현해 사용했습니다. 하지만 Windows Phone7과 같이 Shader등을 사용할 수 없는 제약 적인 환경에서는 다른 방법으로 구현해야 합니다.

여러개의 객체를 바둑판식으로 배열하는 방법에 대해 생각해 볼 수 있겠지만, 이는(동적으로 생성했다 할지라도) 렌더링에 필요한 모든 과정(레이아웃,렌더링 등)의 연산이 매번 필요하기 퍼포먼스나 관리 측면에서 효율적이라 하긴 어렵습니다. 이번시간에는 이와같은 환경에서 동적으로 Tile Image를 생성하여 바둑판식 출력을 구현하는 방법에 대해 소개합니다. 아래는 이번시간에 구현하게될 결과물이며 WindowsPhone7에서 동일한 코드로 사용이 가능합니다.

Create Tile Image Generator

먼저 Tile Image를 생성할때 필요한 요소들에 대해 정리해보면 아래와 같습니다.

1. Source Image : Tile Image를 생성할때 사용할 소스 이미지 입니다.
2. Tile Size(Width, Height) : Tile Image를 생성할때 Tile 하나의 크기 입니다.
3. Margin XY : Tile 간의 간격을 지정합니다.
4. Result Size : 최종적으로 생성될 Tile Image의 크기입니다.

위와 같은 내용을 파라미터로 받아 타일이미지를 생성하는 메서드를 구현하면 아래와 같이 구현할 수 있습니다.

Create Tile Panel

위에서 Tile Image를 생성했으면 이제 입력받은 데이터들을 이용해 UI에 출력할 수 있는 TIle Panel을 아래와 같이 구현할 수 있습니다. 각 Property들은 값이 변경되었을때 OnPropertyChanged를 호출하게 되며 이때 UpdateTile을 호출하여 TileImage를 생성하게 됩니다.


이상으로 이번시간 포스팅을 마치며 기타 궁금하신점이나 문의 사항은 메일이나 댓글로 남겨주시면 답변드리도록 하겠습니다. 아래는 이번시간에 사용한 전체 소스코드입니다. 감사합니다.

신고