[WPF] : Draw Shapes! 그림 그리기

이번에는 Shape 클래스를 이용하여 타원, 사각형, 다각형, 선, 폴리라인을 그려볼 것이다!

Shape 클래스는 라인, 폴리라인, 다각형, 타원, 직사각형, 패치에 상속되어 도형을 그릴 수 있도록 해준다.

패치 일부분을 정의 하기 위해 Geometry 클래스가 사용 되기 때문에 그림상에 포함되어있다.

▲ Shape 클래스 상속 구조

 

 

그림을 그릴 때 사용하는 두 가지의 큰 클래스는 Shape와 Geometry 두 가지이다.

Shape : 브러쉬가 연결되어 있어 화면으로 표시 됨

Geometry :  UI 속성에 정보를 제공하는 데 도움이 되지 않는 경우 단순히 공간 영역만 정의, 화면 표시 안 됨

 

아무튼 이런거 아무도 궁금해 하지 않을 거 안다!

나도 안 궁금하기 때문!

 

 

 

 

 

 

 

 

---

도형 그리기

 

도형을 선언 하는 것은 아주 간단하다.

기본 틀은 간단한 형태이다.

   var 변수명 = new 도형이름 영어로();  

간단한 형태이다.

var ellipse1 = new Ellipse();		// 타원
var rectangle1 = new Rectangle();	// 사각형
var polygon1 = new Polygon();		// 다각형
var line1 = new Line();			// 선
var polyline1 = new Polyline();		// 폴리라인

 

 

 

---

 

도형 속성 정하기

1. 도형 색깔 채우기 및 외곽선

// 도형 채우기 및 선 그리기
도형.Fill = new SolidColorBrush(Colors 속성);   // 채우기
도형.Stroke = new SolidColorBrush(Colors 속성); // 선 색
도형.StrokeThickness = 3; 	// 선 두께

Colors 속성이란!?

Colors.red : 이미 정의된 속성을 불러 오기

Colors..FromArgb(byte Alpha, byte Red, byte Green, byre Blue) :

투명도와 RGB값을 0~255부터의 값을 통해 설정 가능하다.

 

 

 

 

 

2. 둥근 사각형 만들기

사각형이름.RadiusX = 50;
사각형이름.RadiusY = 10;

 

 

 

3.크기 지정

도형.Width = 200;
도형.Height = 100;

 

 

 

---

라인 그리기

 

1. 기본적인 라인 그리기

var line1 = new Line();
line1.Stroke = new SolidColorBrush(Colors.Red);
line1.X1 = 100;	// x포인트 1
line1.Y1 = 300; // y포인트 1

line1.X2 = 400; // x포인트 2
ilne2.Y2 = 200; // y포인트 2

 

 

 

 

 

 

2. 포인트 찍기/ 다각형, 폴리라인 그리기

다각형 / 폴리라인 / 베지어 곡선을 그리기 위해서는 좌표 점을 찍을 필요가 있다.

Add를 이용해 좌표점을 추가하고,

마지막에 좌표를 적용할 도형의 Points에 대입해주면 된다.

var points = new PointCollection();
points.Add(new Point(10, 200));
points.Add(new Point(60, 140));
points.Add(new Point(130, 140));
points.Add(new Point(180, 200));
다각형/폴리라인.Points = points;

 

 

 

---

도형 출력하기

 

도형을 정의하고 속성을 지정했다면 출력을 해야지!

 

1. Xaml에 <Grid>태그 이름 짓기

    <Grid x:Name="layoutRoot"> </Grid>

2. 출력하기

layoutRoot.Children.Add(각 도형, 라인의 변수명);

 

 

 

 

 

---

난 트러블 메이커~

예에아

다음에는 아마 베지어 곡선을 힘이 남아돈다면 정리할 것이다.

미래의 나 녀석 이 글보다

https://docs.microsoft.com/ko-kr/windows/uwp/design/controls-and-patterns/shapes

이게 더 도움 될 듯 싶다.