달력

06

« 2008/06 »

  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 29
  • 30
  •  
  •  
  •  
  •  
  •  
2008/06/01 17:37

[세티의 실버라이트] 6. Images Silverlight2008/06/01 17:37

원글출처: http://silverlight.net/quickstarts/silverlight10/image.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.


이미지
(Images)


앞에서 우리는 실버라이트에서 사용 가능한 여러가지 엘리먼트들을 살펴 보았습니다. 기억해 두셔야 할 점은 앞 강좌에서 다룬 실버라이트 엘리먼트가 전부는 아니라는 점 입니다.
매우 기초적인 내용을 다루었고, 그러하기 때문에 알아야 할 것들이 그 만큼 많음을 기억해주셨으면 합니다.

자아~ 아무튼 부지런히 공부해 봅시다.^^
이번 강좌에서는 Image와 관련된 엘리먼트와 기능에 대해 간단하게 배워볼까 합니다. 실버라이트에서 Image 엘리먼트는 비트맵 이미지를 보여주는데 사용됩니다. 다시 말해 Image 엘리먼트는 실버라이트에서 JPG 그리고 PNG 이미지를 보여주기 위한 방법을 제공하며, 이미지를 보여 주기 위해서 Image 엘리먼트에 간단하게 Source 속성을 설정하기만 하면 됩니다.

사용자 삽입 이미지
사용자 삽입 이미지


이미지를 다른 크기로 보여주길 원할 때 Stretch 속성에 적절한 값을 설정하면 되는데 그 값은 None, Fill, Uniform, UniformToFill 입니다. 아래의 코드를 통해 각각 어떤 모양으로 렌더링 되는지 확인해보면 명확히 알 수 있습니다.
사용자 삽입 이미지
                                            (이미지 출처 : http://www.silverlight.net)

'Silverlight' 카테고리의 다른 글

[세티의 실버라이트] 8. 미디어  (2) 2008/06/09
[세티의 실버라이트] 7. 텍스트  (0) 2008/06/04
[세티의 실버라이트] 6. Images  (2) 2008/06/01
[세티의 실버라이트] 5. 공통 그래픽 속성  (0) 2008/06/01
[세티의 실버라이트] 4. 그림 그리기와 색칠하기  (0) 2008/06/01
WPF/E(코드 이름) 시작  (0) 2008/05/26
TAG fill, image, NONE, Silverlight 2.0, uniform, UniformToFill, 세티의 실버라이트, 실버라이트 2.0
Trackback (0) : Comment (2)
Posted by -세티-
2008/06/01 16:48

[세티의 실버라이트] 5. 공통 그래픽 속성 Silverlight2008/06/01 16:48

원글출처: http://silverlight.net/quickstarts/silverlight10/visual.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

공통 그래픽 속성
(Common graphic properties)


모든 실버라이트에서 사용되는 Canvas, shapes, MediaElement, TextBox와 같은 UIElement 객체들은 속성을 사용합니다. 아래의 객체는 모든 그래픽에서 사용되는 공통 속성 입니다.

  • the Opacity property
  • the OpacityMask property
  • the Clip property
  • the RenderTransform property

이 객체들에 대해서 하나씩 알아보도록 하겠습니다.

먼저 Opacity 속성 입니다.
Opacity 속성은 UIElement의 알파값 이나 슬라이드 값을 조정하여 활성화 시켜줍니다. Opacity 속성값에는 0에서 1사이의 값을 설정하게 되며 0을 설정하게 되면 완전 투명하게 됩니다. 기본적으로 Opacity 값은 1.0을 설정하고 있습니다. 아래의 코드는 Opacity 설정에 대한 예제 코드이며, 렌더링된 결과 입니다.

사용자 삽입 이미지
사용자 삽입 이미지


OpacityMask 속성값은 UIElement의 어떤 특정 부분에 대한 알파값을 조정합니다. 예를 들어서 OpacityMask 값을 사용하면 오른쪽에서 왼쪽으로 진행되면서 점차 희미해지는 객체를 만들 수 있습니다. 객체에서 OpacityMask를 사용하게 된다면 LinearGradientBrush, RadialGradientBrush, ImageBrush를 대부분 사용할 수 있습니다.
아래의 코드와 렌더링 결과물은 OpacityMask를 사용했을 때 어떻게 그려지는 지에 관한 것입니다.
사용자 삽입 이미지
사용자 삽입 이미지


다음으로 Clip 속성을 살펴 보겠습니다.
Clip 속성은 엘리먼트에 의해 그려진 어떤 한 부분을 선택할 때 사용됩니다.Clip 속성을 사용하기 위해서는 Geometry 객체를 사용해야 합니다. Geometry는 선택된 나머지 영역을 hidden 처리 하게 됩니다. 아래의 코드는 RectangleGeometry를 사용하여 Ellipse 엘리먼트를 Clip한 것입니다.
사용자 삽입 이미지
사용자 삽입 이미지


마지막으로 RenderTransform 속성은 Transform 객체를 사용하며,  엘리먼트를 다양한 각도로 움직이고 조정합니다. 이런 것을 가능하게 하는 Transform은 RotateTransform, SkewTransform, ScaleTransform, TranslateTransform 등이 있습니다. 아래의 코드는 여러가지 Transform을 렌더링 하는 예제 입니다.
사용자 삽입 이미지

사용자 삽입 이미지

이상으로 공통 그래픽 속성에 대해 간략하게 살펴봤습니다. 역시 코드를 눈으로 보는 것 보다는 직접 단 한번이라도 코딩을 해보시고 그 결과를 확인하는 것이 무엇이든 가장 빠르고 쉽게 익히는 비결인 것 같습니다.
귀찮더라도 꼭 한번 코딩을 해보십시오.

'Silverlight' 카테고리의 다른 글

[세티의 실버라이트] 7. 텍스트  (0) 2008/06/04
[세티의 실버라이트] 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
TAG clip, Common Graphic property, Opacity, OpacityMask, RenderTransform, Silverlight 2.0, 세티의 실버라이트, 실버라이트 2.0
Trackback (0) : Comment (0)
Posted by -세티-
2008/06/01 15:55

[세티의 실버라이트] 4. 그림 그리기와 색칠하기 Silverlight2008/06/01 15:55

원글출처: http://silverlight.net/quickstarts/silverlight10/drawing.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
그림 그리기와 색칠하기
(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
TAG Brushes, Drawing, Ellipse, fill, Line, LinearGradientBrush, painting, painting shape, path, RadialGradientBrush, Rectangle, shape elements, Shapes, Silverlight 2.0, Stroke, 세티의 실버라이트, 실버라이트 2.0
Trackback (0) : Comment (0)
Posted by -세티-