2008/06/01 15:55
[세티의 실버라이트] 4. 그림 그리기와 색칠하기 Silverlight2008/06/01 15:55
원글출처: http://silverlight.net/quickstarts/silverlight10/drawing.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
이전 강좌에서는 Canvas 객체를 이용한 표현에 대해 살펴보았습니다. 이번 강좌에서는 모양을 나타내기 위해 필요한 객체와 요소들을 알아보도록 하겠습니다.
먼저 실버라이트는 원, 직사각형, 라인, 선분을 이어 만든 도형, 다각형, 그리고 경로 엘리먼트들이 모두 기본적으로 Vector 그래픽 으로 제공됩니다. 이 엘리먼트들은 shape 엘리먼트로 잘 알려져 있습니다.
먼저 가장 기본적인 shapes에 대해 살펴보겠습니다.
실버라이트가 제공하는 가장 기본적인 shape는 원, 직사각형, 그리고 선 입니다.
타원(Ellipse) 엘리먼트는 달걀 모양의 타원이나 정확한 원을 기술하는데 필요한 엘리먼트 입니다.
가로, 세로 높이를 설정하기 위해 Width와 Height를 설정합니다.
직사각형 엘리먼트는 정사각형이나 직사각형을 기술하는데 필요한 엘리먼트 입니다. 이것 또한 가로, 세로 높이를 설정하기 위해서는 Width와 Height를 설정하며, RadiusX, RadiusY 값을 이용하여 사각형 모서리의 휘어짐을 결정합니다.
Line 객체의 경우 높이, 넓이를 나타내는 Width, Height 대신에 X1, Y1, X2, Y2를 사용합니다.
다음의 코드는 Canvas 객체에 Ellipse, Rectangle, Line 객체를 이용해서 그린 것 입니다.
추가적으로 Ellipse, Line 그리고 Rectangle 엘리먼트들에 대해 실버라이트는 3개의 다른 shape 엘리먼트를 제공합니다. 그것은 Polygon, Polyline, Path 입니다.
보통 우리가 도형을 그릴 때 점(포인트)를 찍고 그 점을 하나의 선으로 연결해서 그림을 그리게 됩니다. Polyline 객체는 여러 개의 점(포인트)를 선으로 연결하여 모양을 만들어 내며, 닫혀진 형태가 아닌 열린 형태의 모양을 만들게 됩니다. 그러나 이것과는 다르게 Polygon 객체는 닫힌 모양을 만들어 내게 됩니다.
다음의 코드를 이용하여 어떤 결과가 렌더링 되는지 직접 실습해 보도록 하겠습니다.
먼저 코드를 보면 Polyline과 Polygon 객체의 경우 그것이 각각 가지는 포인트의 숫자는 모두 동일합니다.
그러나 생성된 그림의 결과를 놓고 본다면 polygon은 자동으로 닫힌 모양으로 만들어내고, Polyline은 열린 모양으로 만들어진다는 것을 확인할 수 있습니다.
마지막으로 Path 엘리먼트는 커브나 호를 포함하는 복합적인 모양을 표현할 때 사용할 수 있습니다. 이러한 표현을 위해 특별한 애트리뷰트 문법을 사용해야 하는데 그것은 Data 라고 불리는 속성값으로 할 수 있습니다.
아래의 코드는 복합적인 모양 표현을 위해 Data 애트리뷰트를 사용한 예 입니다.
보통 이런 복합적 모양의 그림을 마크업으로 그리기 위해서는 Path Markup 문법을 알아야 하는데 이것은 매우 번거롭고 귀찮은 작업이므로 개발툴을 이용하여 직접 작업하는 것이 좋습니다.
만일 Path Markup 문법에 대해 자세히 알고 싶다면 다음의 링크에서 보다 상세한 정보를 얻을 수 있을 것 입니다.
주소참고 : Path Markup Syntax 에 대해 공부하기
실버라이트에서 모양을 만들 때 대부분 이 모양을 만들어 내는 엘리먼트들은 2개의 Part를 가지는데 하나는 stroke이고 또 다른 하나는 Fill 속성 입니다. 아래의 그림은 사각형이 가지는 Stroke와 Fill 속성을 표시한 그림입니다.
하지만 모든 모양이 하나의 Fill과 하나의 Stroke를 가지는 것은 아닙니다. Line의 경우 하나의 stroke만 가지며, Fill 속성을 설정한다고 해서 Line에 어떤 효과를 주는 것은 아닙니다.
모양을 그릴 때 Stroke와 Fill 속성과 더불어 Brush 효과를 추가로 설정할 수 있습니다. Brush 객체는 총 5가지의 타입을 가지고 있으며, 이것을 사용하여 원하는 것을 표현할 수 있습니다. 5가지 타입은 다음과 같습니다.
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
그림 그리기와 색칠하기
(Drawing and painting)
(Drawing and painting)
이전 강좌에서는 Canvas 객체를 이용한 표현에 대해 살펴보았습니다. 이번 강좌에서는 모양을 나타내기 위해 필요한 객체와 요소들을 알아보도록 하겠습니다.
먼저 실버라이트는 원, 직사각형, 라인, 선분을 이어 만든 도형, 다각형, 그리고 경로 엘리먼트들이 모두 기본적으로 Vector 그래픽 으로 제공됩니다. 이 엘리먼트들은 shape 엘리먼트로 잘 알려져 있습니다.
먼저 가장 기본적인 shapes에 대해 살펴보겠습니다.
실버라이트가 제공하는 가장 기본적인 shape는 원, 직사각형, 그리고 선 입니다.
타원(Ellipse) 엘리먼트는 달걀 모양의 타원이나 정확한 원을 기술하는데 필요한 엘리먼트 입니다.
가로, 세로 높이를 설정하기 위해 Width와 Height를 설정합니다.
직사각형 엘리먼트는 정사각형이나 직사각형을 기술하는데 필요한 엘리먼트 입니다. 이것 또한 가로, 세로 높이를 설정하기 위해서는 Width와 Height를 설정하며, RadiusX, RadiusY 값을 이용하여 사각형 모서리의 휘어짐을 결정합니다.
Line 객체의 경우 높이, 넓이를 나타내는 Width, Height 대신에 X1, Y1, X2, Y2를 사용합니다.
다음의 코드는 Canvas 객체에 Ellipse, Rectangle, Line 객체를 이용해서 그린 것 입니다.
추가적으로 Ellipse, Line 그리고 Rectangle 엘리먼트들에 대해 실버라이트는 3개의 다른 shape 엘리먼트를 제공합니다. 그것은 Polygon, Polyline, Path 입니다.
보통 우리가 도형을 그릴 때 점(포인트)를 찍고 그 점을 하나의 선으로 연결해서 그림을 그리게 됩니다. Polyline 객체는 여러 개의 점(포인트)를 선으로 연결하여 모양을 만들어 내며, 닫혀진 형태가 아닌 열린 형태의 모양을 만들게 됩니다. 그러나 이것과는 다르게 Polygon 객체는 닫힌 모양을 만들어 내게 됩니다.
다음의 코드를 이용하여 어떤 결과가 렌더링 되는지 직접 실습해 보도록 하겠습니다.
먼저 코드를 보면 Polyline과 Polygon 객체의 경우 그것이 각각 가지는 포인트의 숫자는 모두 동일합니다.
그러나 생성된 그림의 결과를 놓고 본다면 polygon은 자동으로 닫힌 모양으로 만들어내고, Polyline은 열린 모양으로 만들어진다는 것을 확인할 수 있습니다.
마지막으로 Path 엘리먼트는 커브나 호를 포함하는 복합적인 모양을 표현할 때 사용할 수 있습니다. 이러한 표현을 위해 특별한 애트리뷰트 문법을 사용해야 하는데 그것은 Data 라고 불리는 속성값으로 할 수 있습니다.
아래의 코드는 복합적인 모양 표현을 위해 Data 애트리뷰트를 사용한 예 입니다.
보통 이런 복합적 모양의 그림을 마크업으로 그리기 위해서는 Path Markup 문법을 알아야 하는데 이것은 매우 번거롭고 귀찮은 작업이므로 개발툴을 이용하여 직접 작업하는 것이 좋습니다.
만일 Path Markup 문법에 대해 자세히 알고 싶다면 다음의 링크에서 보다 상세한 정보를 얻을 수 있을 것 입니다.
주소참고 : Path Markup Syntax 에 대해 공부하기
실버라이트에서 모양을 만들 때 대부분 이 모양을 만들어 내는 엘리먼트들은 2개의 Part를 가지는데 하나는 stroke이고 또 다른 하나는 Fill 속성 입니다. 아래의 그림은 사각형이 가지는 Stroke와 Fill 속성을 표시한 그림입니다.
하지만 모든 모양이 하나의 Fill과 하나의 Stroke를 가지는 것은 아닙니다. Line의 경우 하나의 stroke만 가지며, Fill 속성을 설정한다고 해서 Line에 어떤 효과를 주는 것은 아닙니다.
모양을 그릴 때 Stroke와 Fill 속성과 더불어 Brush 효과를 추가로 설정할 수 있습니다. Brush 객체는 총 5가지의 타입을 가지고 있으며, 이것을 사용하여 원하는 것을 표현할 수 있습니다. 5가지 타입은 다음과 같습니다.
- SolidColorBrush
- LinearGradientBrush
- RadialGradienBrush
- ImageBrush
- VideoBrush
특정한 색상을 어떤 영역에 사용하기 위해선 SolidColorBrush를 사용합니다. XAML은 SolidColorBrush를 생성하기 위해 몇 가지 방법을 제공합니다.
"Black", "Gray"와 같은 직접적인 이름을 사용하는 방법
6진수 사용(#rrggbb or #0033FF)
8진수 사용(#aarrggbb or #990033FF)
또한 8 비트 컬러 표현을 위해 3~4 진수 표현법도 사용될 수 있겠지만 이것은 일반적으로 잘 사용되지는 않습니다.
실버라이트는 또한 선 또는 곡선 형태의 그라디에이션을 지원합니다. 보통 그라디에이션을 표현하기 위해서는 2개의 경사도만 필요한데, 이러한 경사도를 여러개 추가해서 더욱 다양한 그라디에이션 표현을 가능하게 합니다.
이러한 그라디에이션을 표현하는 타입은 LinearGradientBrush와 RadialGrandienBrush 입니다.
LinearGradientBrush 은 StartPoint와 EndPoint 속성을 사용하여 표현하게 됩니다.
반면에 RadialGradienBrush는 기본적으로 원의 중심에서 부터 그림을 그려나가기 시작합니다. GradientOrign, Center, RadiusX, RadiusY 속성을 이용하여 표현을 하게 됩니다.
마지막으로 ImageBrush를 이용하여 이미지를 그릴수도 있습니다. 기본적으로 이미지는 모양의 모든 전체 영역에 Fill이 적용되어 있습니다. 그러나 Stretch 속성을 이용하여 서로 다른 설정을 할 수 잇습니다.
'Silverlight' 카테고리의 다른 글
| [세티의 실버라이트] 6. Images (2) | 2008/06/01 |
|---|---|
| [세티의 실버라이트] 5. 공통 그래픽 속성 (0) | 2008/06/01 |
| [세티의 실버라이트] 4. 그림 그리기와 색칠하기 (0) | 2008/06/01 |
| WPF/E(코드 이름) 시작 (0) | 2008/05/26 |
| [세티의 실버라이트] 3. Canvas 객체에 대해서. (0) | 2008/05/25 |
| [세티의 실버라이트] 2. Silverlight XAML 파일 생성하기 (0) | 2008/05/20 |
