[C#][WPF] Canvas에 부채꼴(파이) 그리기

 

WPF에서 Canvas에 호와 부채꼴을 그리는 방법이다.

아래의 블로그에서 코드를 가져왔고 이를 사용하는 방법 및 응용을 정리하고자 한다.

 

https://icodebroker.com/archives/14322

[C#/WPF] 파이 슬라이스 그리기

 

DrawingExtension.cs

0.01MB

 

우선 위 파일을 다운로드 하여 프로젝트에 삽입한다.

namespace를 설정하는 것 또한 잊지 않는다.

 

이 클래스에는 AddPieSlice 라는 전역 함수가 있고

이 함수를 사용하여 부채꼴을 그리는 방법을 설명할 것이다.

해당 함수에 대한 자세한 설명은 출처 블로그를 확인하길 바란다.

 

Code

- xaml

부채꼴이 나타나길 원하는 위치에  Canvas를 삽입하고 이름을 설정해준다.

 

<Window x:Class="DrawPie.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DrawPie"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Canvas x:Name="canvas"/> // Canvas 삽입 및 이름 설정
    </Grid>
</Window>

 

- cs

AddPieSlice를 사용하여 부채꼴을 Canvas에 추가한다.

 

// 파이 그리기
double startAngle = 30 * (Math.PI / 180d); // 라디안 변환
double endAngle = 60 * (Math.PI / 180d);

Rect rect = new Rect(100, 100, 160, 160);

Point point1;
Point point2;

Path pie = canvas.AddPieSlice
(
	Brushes.LightGray, 	// 채우기 색
	Brushes.Gray, 		// 테두리 색
	1, 			// 테두리 굵기
	rect, 			// 부채꼴의 기준이 될 원
	startAngle, 		// 부채꼴 시작 각도
	endAngle, 		// 부채골 종료 각도
	false,
	SweepDirection.Clockwise, 	// 스윕 방향 (시계 방향)
	out point1,
	out point2
);

pie.StrokeLineJoin = PenLineJoin.Round;

 

- 결과 화면

 

반응형

 

AddPieSlice

public static Path AddPieSlice
(
	this Canvas    canvas,
	Brush          fillBrush,
	Brush          strokeBrush,
	double         strokeThickness,
	Rect           rect,
	double         angle1,
	double         angle2,
	bool           isLargeArc,
	SweepDirection sweepFirection,
	out Point      point1,
	out Point      point2
)

 

AddPieSlice의 매개 변수이다. 

매개변수를 통해 부채꼴의 모양을 정할 수 있다.

 

여기서 중요한 부분은 rect, angle1, angle2 인데,

rect는 부채꼴이 그려질 기준이 될 원이다.

이 원의 중심각으로 부터 angle1, angle2의 각도의 부채꼴이 그려진다.

따라서 부채꼴의 위치는 rect 원의 중심각으로 지정해준다고 생각하면 편하다.

 

예를 들어 캔버스의 (100, 100)에 50 크기의 부채꼴을 그리고 싶다면,

아래와 같이 rect를 설정해주어야 한다.

 

Rect rect = new Rect(50, 50, 100, 100); // top, left, width, height