2008/05/25 04:41
[세티의 실버라이트] 3. Canvas 객체에 대해서. Silverlight2008/05/25 04:41
원글출처: http://silverlight.net/quickstarts/silverlight10/canvas.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
결과는 아래의 그림과 같으며, 상단 그리고 왼쪽으로 바짝 붙어 있는 것을 볼 수 있을 겁니다.
이제 위에 제시한 코드를 이용해서 왼쪽으로 50픽셀 상단에서 하단으로 50픽셀 만큼 이동시켜 보겠습니다.
코드를 수정한 후 렌더링된 결과는 아래의 이미지와 같으며, 정확히 50픽셀 이동된 것을 확인할 수 있습니다.
다음으로 z-index에 대해 알아보도록 하겠습니다.
Canvas 엘리먼트 내에 위치한 자식 객체는 모두 순서대로 렌더링 됩니다. 젤 위에 있는 것이 먼저 렌더링 되고 나면 그 다음에 위치하는 자식 객체가 렌더링 되면서 제일 처음에 렌더링된 그림 위에 덮어쓰여 집니다. 이런 식으로 표현되는 Canvas 내의 객체에 대해 그 순서를 변경하고 싶으면 zorder를 이용해서 변경하게 됩니다.
Canvas.ZIndex라고 설정하면 되며, 값이 클수록 Canvas에서 멀어지고 값이 낮을수록 Canvas에서 가깝게 위치하게 됩니다.
먼저 3개의 원을 표시할 것이므로, Canvas의 크기를 더욱 키우도록 하겠습니다.
앞에서 만들었던 crObjS.js 에서 캔버스의 크기를 가로 500픽셀, 새로 500픽셀로 변경합니다.
그 다음에 3개의 원을 추가 합니다.
이제 브라우저를 통해 원이 잘 추가 되었는지 확인합니다.
잘 되었으면 이제 코드에 ZIndex를 설정합니다. Ellipse 엘리먼트에 Canvas.ZIndex 애트리뷰트를 설정하고 ZIndex 속성에 값을 설정하면 됩니다.
렌더링 된 결과는 다음과 같습니다.
Canvas 나 Shape 그 외 다른 많은 엘리먼트들은 높이와 넓이 속성을 가지고 있으며, 특정한 값을 할당함으로써 그것을 효과적으로 이용할 수 있습니다. 이것을 확인해보기 위해 Canvas 엘리먼트에 높이와 넓이를 주고 적절한 배경색을 주도록 하겠습니다.
위에 코드를 제시하였고, 아래는 렌더링된 결과 입니다.
위의 그림에서 빨간색 영역은 Canvas의 영역이고, 회색 부분은 호스팅된 Plug-in의 영역 입니다. Canvas와 Ellipse 객체의 기본적이 높이와 넓이 값은 모두 0 이라는 것을 참고하셨으면 합니다.
마지막으로 Canvas는 또 다른 Canvas를 포함할 수 있습니다. 그것이 가능한 이유는 Canvas 또한 또 다른 객체 이기 때문입니다.
위의 코드를 참고해서 Canvas 객체 2개를 추가합니다. 그리고 각 Canvas에 적절한 컬러를 할당합니다.
브라우저를 통해 렌더링 해보면 하단의 이미지와 같은 모양이 그려진 것을 확인할 수 있습니다.
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
Canvas 객체
(Canvas Object)
(Canvas Object)
캔버스 객체는 모양을 만들기 위한 포지션과 컨트롤들을 포함하는 객체 입니다. 모든 실버라이트 XAML 파일은 루트 엘리먼트로 캔버스를 하나씩 가지고 있습니다. 이번 강좌에서 캔버스 객체와 정의에 대해 공부해 보고, 자식 객체들에 어떻게 크기를 지정하고 포지션을 잡고 추가하는지에 대해 알아보겠습니다.
먼저 캔버스에 객체를 추가해 보도록 하겠습니다.
캔버스에 객체를 추가하기 위해서는 <canvas> 태그 사이에 추가할 다른 객체를 추가해야 합니다.
예를 들어서
먼저 캔버스에 객체를 추가해 보도록 하겠습니다.
캔버스에 객체를 추가하기 위해서는 <canvas> 태그 사이에 추가할 다른 객체를 추가해야 합니다.
예를 들어서
위의 코드를 보면 <Canvas> 테그 사이에 <Ellipse> 태그가 위치한 걸 확인할 수 있습니다. 이 Ellipse 객체는 원을 그리기 위한 객체인데 코드에 보시는 것 처럼 원 모양에 대한 속성값(Height, Width, Stroke 등)이 설정되어 있는 것을 확인할 수 있습니다. Canvas 태그는 루트 엘리먼트로서 xmlns 선언을 가지고 있게 됩니다.
Canvas에 객체를 위치 시키기 위해 필요한 속성값이 있는데 그것은 Canvas.Left, Canvas.Top, Canvas.Left가 그것입니다. Canvas의 위치 지정 속성값을 이용해서 Canvas 객체 위에 그려진 원 객체의 위치를 변경해 보도록 하겠습니다. 먼저 Ellipse 객체에 2가지 속성값 Canvas.Left와 Canvas.Top을 추가합니다.
먼저 각각 "0"을 설정해 보도록 하겠습니다.
Canvas에 객체를 위치 시키기 위해 필요한 속성값이 있는데 그것은 Canvas.Left, Canvas.Top, Canvas.Left가 그것입니다. Canvas의 위치 지정 속성값을 이용해서 Canvas 객체 위에 그려진 원 객체의 위치를 변경해 보도록 하겠습니다. 먼저 Ellipse 객체에 2가지 속성값 Canvas.Left와 Canvas.Top을 추가합니다.
먼저 각각 "0"을 설정해 보도록 하겠습니다.
결과는 아래의 그림과 같으며, 상단 그리고 왼쪽으로 바짝 붙어 있는 것을 볼 수 있을 겁니다.
이제 위에 제시한 코드를 이용해서 왼쪽으로 50픽셀 상단에서 하단으로 50픽셀 만큼 이동시켜 보겠습니다.
코드를 수정한 후 렌더링된 결과는 아래의 이미지와 같으며, 정확히 50픽셀 이동된 것을 확인할 수 있습니다.
다음으로 z-index에 대해 알아보도록 하겠습니다.
Canvas 엘리먼트 내에 위치한 자식 객체는 모두 순서대로 렌더링 됩니다. 젤 위에 있는 것이 먼저 렌더링 되고 나면 그 다음에 위치하는 자식 객체가 렌더링 되면서 제일 처음에 렌더링된 그림 위에 덮어쓰여 집니다. 이런 식으로 표현되는 Canvas 내의 객체에 대해 그 순서를 변경하고 싶으면 zorder를 이용해서 변경하게 됩니다.
Canvas.ZIndex라고 설정하면 되며, 값이 클수록 Canvas에서 멀어지고 값이 낮을수록 Canvas에서 가깝게 위치하게 됩니다.
먼저 3개의 원을 표시할 것이므로, Canvas의 크기를 더욱 키우도록 하겠습니다.
앞에서 만들었던 crObjS.js 에서 캔버스의 크기를 가로 500픽셀, 새로 500픽셀로 변경합니다.
그 다음에 3개의 원을 추가 합니다.
이제 브라우저를 통해 원이 잘 추가 되었는지 확인합니다.
잘 되었으면 이제 코드에 ZIndex를 설정합니다. Ellipse 엘리먼트에 Canvas.ZIndex 애트리뷰트를 설정하고 ZIndex 속성에 값을 설정하면 됩니다.
렌더링 된 결과는 다음과 같습니다.
Canvas 나 Shape 그 외 다른 많은 엘리먼트들은 높이와 넓이 속성을 가지고 있으며, 특정한 값을 할당함으로써 그것을 효과적으로 이용할 수 있습니다. 이것을 확인해보기 위해 Canvas 엘리먼트에 높이와 넓이를 주고 적절한 배경색을 주도록 하겠습니다.
위에 코드를 제시하였고, 아래는 렌더링된 결과 입니다.
위의 그림에서 빨간색 영역은 Canvas의 영역이고, 회색 부분은 호스팅된 Plug-in의 영역 입니다. Canvas와 Ellipse 객체의 기본적이 높이와 넓이 값은 모두 0 이라는 것을 참고하셨으면 합니다.
마지막으로 Canvas는 또 다른 Canvas를 포함할 수 있습니다. 그것이 가능한 이유는 Canvas 또한 또 다른 객체 이기 때문입니다.
위의 코드를 참고해서 Canvas 객체 2개를 추가합니다. 그리고 각 Canvas에 적절한 컬러를 할당합니다.
브라우저를 통해 렌더링 해보면 하단의 이미지와 같은 모양이 그려진 것을 확인할 수 있습니다.
'Silverlight' 카테고리의 다른 글
| [세티의 실버라이트] 4. 그림 그리기와 색칠하기 (0) | 2008/06/01 |
|---|---|
| WPF/E(코드 이름) 시작 (0) | 2008/05/26 |
| [세티의 실버라이트] 3. Canvas 객체에 대해서. (0) | 2008/05/25 |
| [세티의 실버라이트] 2. Silverlight XAML 파일 생성하기 (0) | 2008/05/20 |
| [세티의 실버라이트] 1. 실버라이트 시작하기 (0) | 2008/05/19 |
| Silverlight - Microsoft Expression Studio 2 특징 (0) | 2008/05/12 |
