방법: 경로 그라데이션 만들기

아티클
08/20/2008

업데이트: 2007년 11월

PathGradientBrush 클래스를 사용하면 점진적으로 변하는 색으로 도형을 채우는 방식을 사용자 지정할 수 있습니다. 예를 들어, 경로의 중앙과 경로 경계에 대해 각각 다른 색을 지정할 수 있습니다. 경로의 경계를 따라 여러 지점에 각각 별도의 색을 지정할 수도 있습니다.

참고:
GDI+에서 경로란 GraphicsPath 개체에서 유지하는 일련의 선과 곡선을 의미합니다. GDI+ 경로에 대한 자세한 내용은 GDI+의 그래픽 경로와 경로 구성 및 그리기를 참조하십시오.

경로 그라데이션으로 타원을 채우려면

아래 예제에서는 경로 그라데이션 브러시로 타원을 채웁니다. 중앙의 색은 파랑으로 설정하고 경계의 색은 바다색으로 설정합니다. 다음 그림에서는 채워진 타원을 보여 줍니다.

그라데이션 경로

기본적으로 경로 그라데이션 브러시는 경로의 경계를 벗어나지 않습니다. 경로 그라데이션 브러시를 사용하여 경로의 경계를 넘는 그림을 채울 경우 경로를 벗어나는 화면 영역은 채워지지 않습니다.

그라데이션 경로

' Create a path that consists of a single ellipse.
Dim path As New GraphicsPath()
path.AddEllipse(0, 0, 140, 70)

' Use the path to construct a brush.
Dim pthGrBrush As New PathGradientBrush(path)

' Set the color at the center of the path to blue.
pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255)

' Set the color along the entire boundary 
' of the path to aqua.
Dim colors As Color() = {Color.FromArgb(255, 0, 255, 255)}
pthGrBrush.SurroundColors = colors

e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70)

// Create a path that consists of a single ellipse.
GraphicsPath path = new GraphicsPath();
path.AddEllipse(0, 0, 140, 70);

// Use the path to construct a brush.
PathGradientBrush pthGrBrush = new PathGradientBrush(path);

// Set the color at the center of the path to blue.
pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255);

// Set the color along the entire boundary 
// of the path to aqua.
Color[] colors = { Color.FromArgb(255, 0, 255, 255) };
pthGrBrush.SurroundColors = colors;

e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70);

경계에 점을 지정하려면

아래 예제에서는 별 모양의 경로에서 경로 그라데이션 브러시를 만듭니다. 코드에서는 CenterColor 속성을 설정하여 별의 중앙 부분 색을 빨강으로 지정합니다. 그런 다음 colors 배열에 저장된 다양한 색을 points 배열에 있는 각 점에 적용하도록 SurroundColors 속성을 설정합니다. 이 코드의 마지막 문에서는 별 모양의 경로를 경로 그라데이션 브러시로 채웁니다.

' Put the points of a polygon in an array.
Dim points As Point() = { _
   New Point(75, 0), _
   New Point(100, 50), _
   New Point(150, 50), _
   New Point(112, 75), _
   New Point(150, 150), _
   New Point(75, 100), _
   New Point(0, 150), _
   New Point(37, 75), _
   New Point(0, 50), _
   New Point(50, 50)}

' Use the array of points to construct a path.
Dim path As New GraphicsPath()
path.AddLines(points)

' Use the path to construct a path gradient brush.
Dim pthGrBrush As New PathGradientBrush(path)

' Set the color at the center of the path to red.
pthGrBrush.CenterColor = Color.FromArgb(255, 255, 0, 0)

' Set the colors of the points in the array.
Dim colors As Color() = { _
   Color.FromArgb(255, 0, 0, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 0, 255), _
   Color.FromArgb(255, 255, 255, 255), _
   Color.FromArgb(255, 0, 0, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 0, 255), _
   Color.FromArgb(255, 255, 255, 255), _
   Color.FromArgb(255, 0, 0, 0), _
   Color.FromArgb(255, 0, 255, 0)}

pthGrBrush.SurroundColors = colors

' Fill the path with the path gradient brush.
e.Graphics.FillPath(pthGrBrush, path)

// Put the points of a polygon in an array.
Point[] points = {
   new Point(75, 0),
   new Point(100, 50),
   new Point(150, 50),
   new Point(112, 75),
   new Point(150, 150),
   new Point(75, 100),
   new Point(0, 150),
   new Point(37, 75),
   new Point(0, 50),
   new Point(50, 50)};

// Use the array of points to construct a path.
GraphicsPath path = new GraphicsPath();
path.AddLines(points);

// Use the path to construct a path gradient brush.
PathGradientBrush pthGrBrush = new PathGradientBrush(path);

// Set the color at the center of the path to red.
pthGrBrush.CenterColor = Color.FromArgb(255, 255, 0, 0);

// Set the colors of the points in the array.
Color[] colors = {
   Color.FromArgb(255, 0, 0, 0),
   Color.FromArgb(255, 0, 255, 0),
   Color.FromArgb(255, 0, 0, 255), 
   Color.FromArgb(255, 255, 255, 255),
   Color.FromArgb(255, 0, 0, 0),
   Color.FromArgb(255, 0, 255, 0),
   Color.FromArgb(255, 0, 0, 255),
   Color.FromArgb(255, 255, 255, 255),
   Color.FromArgb(255, 0, 0, 0),  
   Color.FromArgb(255, 0, 255, 0)};

pthGrBrush.SurroundColors = colors;

// Fill the path with the path gradient brush.
e.Graphics.FillPath(pthGrBrush, path);

다음 예제에서는 코드에서 GraphicsPath 개체 없이 경로 그라데이션을 그립니다. 이 예제에서는 특정 PathGradientBrush 생성자에 점의 배열을 전달하지만 GraphicsPath 개체는 필요 없습니다. 또한 PathGradientBrush는 경로가 아니라 사각형을 채우는 데 사용됩니다. 브러시를 정의하는 데 사용된 닫힌 경로보다 사각형이 크므로 사각형의 일부가 브러시로 칠해지지 않습니다. 아래 그림에서는 사각형 전체 및 사각형에서 경로 그라데이션 브러시로 칠해지는 부분을 보여 줍니다. 사각형 전체는 점선으로 표시되어 있습니다.

그라데이션

' Construct a path gradient brush based on an array of points.
Dim ptsF As PointF() = { _
   New PointF(0, 0), _
   New PointF(160, 0), _
   New PointF(160, 200), _
   New PointF(80, 150), _
   New PointF(0, 200)}

Dim pBrush As New PathGradientBrush(ptsF)

' An array of five points was used to construct the path gradient
' brush. Set the color of each point in that array.  
'Point (0, 0) is red
'Point (160, 0) is green
'Point (160, 200) is green
'Point (80, 150) is blue
'Point (0, 200) is red
Dim colors As Color() = { _
   Color.FromArgb(255, 255, 0, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 0, 255), _
   Color.FromArgb(255, 255, 0, 0)}
pBrush.SurroundColors = colors

' Set the center color to white.
pBrush.CenterColor = Color.White

' Use the path gradient brush to fill a rectangle.
e.Graphics.FillRectangle(pBrush, New Rectangle(0, 0, 160, 200))

// Construct a path gradient brush based on an array of points.
PointF[] ptsF = {
   new PointF(0, 0), 
   new PointF(160, 0), 
   new PointF(160, 200),
   new PointF(80, 150),
   new PointF(0, 200)};

PathGradientBrush pBrush = new PathGradientBrush(ptsF);

// An array of five points was used to construct the path gradient
// brush. Set the color of each point in that array.
Color[] colors = {
   Color.FromArgb(255, 255, 0, 0),  // (0, 0) red
   Color.FromArgb(255, 0, 255, 0),  // (160, 0) green
   Color.FromArgb(255, 0, 255, 0),  // (160, 200) green
   Color.FromArgb(255, 0, 0, 255),  // (80, 150) blue
   Color.FromArgb(255, 255, 0, 0)}; // (0, 200) red

pBrush.SurroundColors = colors;

// Set the center color to white.
pBrush.CenterColor = Color.White;

// Use the path gradient brush to fill a rectangle.
e.Graphics.FillRectangle(pBrush, new Rectangle(0, 0, 160, 200));

경로 그라데이션을 사용자 지정하려면

경로 그라데이션 브러시를 사용자 지정하는 방법 중 하나는 FocusScales 속성을 설정하는 것입니다. 이 속성에서는 주 경로 안에 있는 내부 경로를 지정합니다. 중점 뿐만 아니라 내부 경로의 모든 부분이 중앙 색으로 채워집니다.

아래 예제에서는 타원형 경로를 기반으로 경로 그라데이션 브러시를 만듭니다. 코드에서는 경계의 색을 파랑으로, 중앙의 색을 바다색으로 설정한 다음 경로 그라데이션 브러시를 사용하여 타원형 경로를 채웁니다.

그런 다음, 경로 그라데이션 브러시의 포커스 배율을 설정합니다. x 포커스 배율을 0.3으로, y 포커스 배율을 0.8로 설정합니다. 코드에서는 FillPath 이후의 호출에서 첫 번째 타원의 오른쪽에 있는 타원을 채울 수 있도록 먼저 Graphics 개체의 TranslateTransform 메서드를 호출합니다.

주 타원과 중점이 동일한 작은 타원을 생각해 보면 포커스 배율의 효과를 쉽게 이해할 수 있습니다. 작은 타원(안쪽 타원)은 주 타원의 중점을 기준으로 가로로 0.3, 세로로 0.8배 축소된 타원입니다. 바깥쪽 타원의 경계에서 안쪽 타원의 경계로 가면서 색이 파랑에서 바다색으로 점차 변합니다. 안쪽 타원의 경계에서 공유 중점까지는 변하지 않고 바다색이 유지됩니다.

다음 그림에서는 아래 코드를 실행한 결과를 보여 줍니다. 왼쪽 타원에서는 중점만 바다색이고 오른쪽 타원에서는 내부 경로 안쪽의 모든 곳이 바다색입니다.

그라데이션

' Create a path that consists of a single ellipse.
Dim path As New GraphicsPath()
path.AddEllipse(0, 0, 200, 100)

' Create a path gradient brush based on the elliptical path.
Dim pthGrBrush As New PathGradientBrush(path)

' Set the color along the entire boundary to blue.
' Changed variable name from color
Dim blueColor As Color() = {Color.Blue}
pthGrBrush.SurroundColors = blueColor

' Set the center color to aqua.
pthGrBrush.CenterColor = Color.Aqua

' Use the path gradient brush to fill the ellipse. 
e.Graphics.FillPath(pthGrBrush, path)

' Set the focus scales for the path gradient brush.
pthGrBrush.FocusScales = New PointF(0.3F, 0.8F)

' Use the path gradient brush to fill the ellipse again.
' Show this filled ellipse to the right of the first filled ellipse.
e.Graphics.TranslateTransform(220.0F, 0.0F)
e.Graphics.FillPath(pthGrBrush, path)

// Create a path that consists of a single ellipse.
GraphicsPath path = new GraphicsPath();
path.AddEllipse(0, 0, 200, 100);

// Create a path gradient brush based on the elliptical path.
PathGradientBrush pthGrBrush = new PathGradientBrush(path);

// Set the color along the entire boundary to blue.
Color[] color = { Color.Blue };
pthGrBrush.SurroundColors = color;

// Set the center color to aqua.
pthGrBrush.CenterColor = Color.Aqua;

// Use the path gradient brush to fill the ellipse. 
e.Graphics.FillPath(pthGrBrush, path);

// Set the focus scales for the path gradient brush.
pthGrBrush.FocusScales = new PointF(0.3f, 0.8f);

// Use the path gradient brush to fill the ellipse again.
// Show this filled ellipse to the right of the first filled ellipse.
e.Graphics.TranslateTransform(220.0f, 0.0f);
e.Graphics.FillPath(pthGrBrush, path);

보간을 사용하여 사용자 지정하려면

삽입할 색의 배열과 삽입할 위치의 배열을 지정하여 경로 그라데이션 브러시를 사용자 지정할 수도 있습니다.

아래 예제에서는 삼각형을 기반으로 경로 그라데이션 브러시를 만듭니다. 이 코드에서는 경로 그라데이션 브러시의 InterpolationColors 속성을 설정하여 보간 색의 배열(진한 녹색, 바다색, 파랑)과 보간 위치의 배열(0, 0.25, 1)을 지정합니다. 삼각형의 경계에서 중점으로 가면서 진한 녹색에서 바다색으로 점차 변한 다음 바다색에서 파랑으로 변합니다. 진한 녹색에서 바다색으로 변해가는 거리는 진한 녹색에서 파랑으로 변해가는 전체 거리의 25%입니다.

아래 그림에서는 사용자 지정 경로 그라데이션 브러시로 채운 삼각형을 보여 줍니다.

그라데이션 경로

' Vertices of the outer triangle
Dim points As Point() = { _
   New Point(100, 0), _
   New Point(200, 200), _
   New Point(0, 200)}

' No GraphicsPath object is created. The PathGradientBrush
' object is constructed directly from the array of points.
Dim pthGrBrush As New PathGradientBrush(points)

' Create an array of colors containing dark green, aqua, and  blue.
Dim colors As Color() = { _
   Color.FromArgb(255, 0, 128, 0), _
   Color.FromArgb(255, 0, 255, 255), _
   Color.FromArgb(255, 0, 0, 255)}

' Dark green is at the boundary of the triangle.
' Aqua is 40 percent of the way from the boundary to the center point.
' Blue is at the center point.
Dim relativePositions As Single() = { _
   0.0F, _
   0.4F, _
   1.0F}

Dim colorBlend As New ColorBlend()
colorBlend.Colors = colors
colorBlend.Positions = relativePositions
pthGrBrush.InterpolationColors = colorBlend

' Fill a rectangle that is larger than the triangle
' specified in the Point array. The portion of the
' rectangle outside the triangle will not be painted.
e.Graphics.FillRectangle(pthGrBrush, 0, 0, 200, 200)

// Vertices of the outer triangle
Point[] points = {
   new Point(100, 0),
   new Point(200, 200),
   new Point(0, 200)};

// No GraphicsPath object is created. The PathGradientBrush
// object is constructed directly from the array of points.
PathGradientBrush pthGrBrush = new PathGradientBrush(points);

Color[] colors = {
   Color.FromArgb(255, 0, 128, 0),    // dark green
   Color.FromArgb(255, 0, 255, 255),  // aqua
   Color.FromArgb(255, 0, 0, 255)};   // blue

float[] relativePositions = {
   0f,       // Dark green is at the boundary of the triangle.
   0.4f,     // Aqua is 40 percent of the way from the boundary
             // to the center point.
   1.0f};    // Blue is at the center point.

ColorBlend colorBlend = new ColorBlend();
colorBlend.Colors = colors;
colorBlend.Positions = relativePositions;
pthGrBrush.InterpolationColors = colorBlend;

// Fill a rectangle that is larger than the triangle
// specified in the Point array. The portion of the
// rectangle outside the triangle will not be painted.
e.Graphics.FillRectangle(pthGrBrush, 0, 0, 200, 200);

중점을 설정하려면

기본적으로 경로 그라데이션 브러시의 중점은 브러시를 만드는 데 사용되는 경로의 중앙입니다. PathGradientBrush 클래스의 CenterPoint 속성을 설정하여 중점의 위치를 변경할 수 있습니다.

아래 예제에서는 타원을 기반으로 경로 그라데이션 브러시를 만듭니다. 이 예제에서는 타원의 중점이 (70, 35)이지만 경로 그라데이션 브러시의 중점을 (120, 40)으로 설정합니다.

' Create a path that consists of a single ellipse.
Dim path As New GraphicsPath()
path.AddEllipse(0, 0, 140, 70)

' Use the path to construct a brush.
Dim pthGrBrush As New PathGradientBrush(path)

' Set the center point to a location that is not
' the centroid of the path.
pthGrBrush.CenterPoint = New PointF(120, 40)

' Set the color at the center of the path to blue.
pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255)

' Set the color along the entire boundary 
' of the path to aqua.
Dim colors As Color() = {Color.FromArgb(255, 0, 255, 255)}
pthGrBrush.SurroundColors = colors

e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70)

// Create a path that consists of a single ellipse.
GraphicsPath path = new GraphicsPath();
path.AddEllipse(0, 0, 140, 70);

// Use the path to construct a brush.
PathGradientBrush pthGrBrush = new PathGradientBrush(path);

// Set the center point to a location that is not
// the centroid of the path.
pthGrBrush.CenterPoint = new PointF(120, 40);

// Set the color at the center of the path to blue.
pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255);

// Set the color along the entire boundary 
// of the path to aqua.
Color[] colors = { Color.FromArgb(255, 0, 255, 255) };
pthGrBrush.SurroundColors = colors;

e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70);

아래 그림에서는 채워진 타원과 경로 그라데이션 브러시의 중점을 보여 줍니다.

그라데이션 경로

경로 그라데이션 브러시의 중점을 브러시를 만드는 데 사용한 경로 밖에 있는 위치로 설정할 수도 있습니다. 다음 예제에서는 위 코드의 CenterPoint 속성을 설정하도록 호출을 바꿉니다.
```
pthGrBrush.CenterPoint = New PointF(145, 35)
```
```
pthGrBrush.CenterPoint = new PointF(145, 35);
```
이렇게 변경한 결과가 아래 그림에 나와 있습니다.

그라데이션 경로

위 그림의 타원에서 가장 오른쪽에 있는 점들은 순수한 파랑과 매우 가깝긴 해도 순수한 파랑이 아닙니다. 순수한 파랑(0, 0, 255)이 되는 점(145, 35)까지 그라데이션에서 색을 채운 것처럼 보이지만, 경로 그라데이션 브러시에서는 경로 안쪽만 칠하기 때문에 (145, 35)까지 색이 칠해지지는 않습니다.

참고 항목

기타 리소스

그라데이션 브러시를 사용하여 도형 채우기

다음을 통해 공유

방법: 경로 그라데이션 만들기

경로 그라데이션으로 타원을 채우려면

경계에 점을 지정하려면

경로 그라데이션을 사용자 지정하려면

보간을 사용하여 사용자 지정하려면

중점을 설정하려면

참고 항목

기타 리소스

추가 리소스