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

아티클
05/04/2023

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

참고

GDI+에서 경로는 GraphicsPath 개체에 의해 유지되는 선과 곡선의 시퀀스입니다. GDI+ 경로에 대한 자세한 내용은 GDI+의 그래픽 경로 및 경로 구성 및 그리기를 참조하세요.

이 문서의 예는 컨트롤의 Paint 이벤트 처리기에서 호출되는 메서드입니다.

타원을 경로 그라데이션으로 채우려면 다음을 수행합니다.

다음 예제에서는 경로 그라데이션 브러시로 타원을 채웁니다. 가운데 색은 파란색으로 설정되고 경계 색은 하늘색으로 설정됩니다. 다음 그림에서는 채워진 타원을 보여 줍니다.

그라데이션 경로는 타원을 채웁니다.

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

다음 그림은 다음 코드에서 Graphics.FillEllipse 호출을 e.Graphics.FillRectangle(pthGrBrush, 0, 10, 200, 40)으로 변경하면 어떻게 되는지 보여 줍니다.

경로의 경계를 넘어 확장된 그라데이션 경로.

public void FillEllipseWithPathGradient(PaintEventArgs e)
{
    // 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);
}

' 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)

앞의 코드 예제는 Windows Forms와 함께 사용하도록 설계되었으며 PaintEventHandler의 매개 변수인 PaintEventArgs e가 필요합니다.

경계에 점을 지정하려면 다음을 수행합니다.

다음 예제에서는 별 모양의 경로에서 경로 그라데이션 브러시를 생성합니다. 이 코드는 별의 중심에서 색을 빨간색으로 설정하는 CenterColor 속성을 설정합니다. 그런 다음, 코드는 points 배열의 개별 지점에서 다양한 색(colors 배열에 저장됨)을 지정하도록 SurroundColors 속성을 설정합니다. 마지막 코드 문은 별 모양의 경로를 경로 그라데이션 브러시로 채웁니다.

public void ConstructBrushFromStarShapedPath(PaintEventArgs e)
{
    // 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);
}

' 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)

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

경로 그라데이션 브러시로 그린 그라데이션 부분.

public void DrawPathGradentWthoutGraphicsPath(PaintEventArgs e)
{
    // 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));
}

' 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))

경로 그라데이션을 사용자 지정하려면 다음을 수행합니다.

경로 그라데이션 브러시를 사용자 지정하는 한 가지 방법은 해당 FocusScales 속성을 설정하는 것입니다. 포커스 스케일링은 기본 경로 내부에 있는 내부 경로를 지정합니다. 가운데 색은 중심점이 아닌 해당 내부 경로 내의 모든 위치에 표시됩니다.

다음 예제에서는 타원 경로를 기반으로 경로 그라데이션 브러시를 만듭니다. 이 코드는 경계 색을 파란색으로 설정하고, 가운데 색을 하늘색으로 설정한 다음, 경로 그라데이션 브러시를 사용하여 타원형 경로를 채웁니다.

다음으로, 코드는 경로 그라데이션 브러시의 포커스 스케일링을 설정합니다. x 포커스 스케일링은 0.3으로 설정되고 y 포커스 스케일링은 0.8로 설정됩니다. 코드는 Graphics 개체의 TranslateTransform 메서드를 호출하여 FillPath에 대한 후속 호출은 첫 번째 타원의 오른쪽에 있는 타원을 채웁니다.

포커스 스케일링의 효과를 보려면 중심을 주 타원과 공유하는 작은 타원을 상상해 보세요. 작은(내부) 타원은 가로로 0.3의 배율로, 세로로 0.8의 배율로 스케일링된 주 타원(중심을 기준으로)입니다. 외부 타원의 경계에서 내부 타원의 경계로 이동하면 색이 파란색에서 하늘색으로 점진적으로 변합니다. 내부 타원의 경계에서 공유된 중심으로 이동하면 색이 하늘색으로 유지됩니다.

다음 그림에서는 다음 코드의 출력을 보여 줍니다. 왼쪽의 타원은 중심점에서만 하늘색입니다. 오른쪽의 타원은 내부 경로 내부의 모든 곳에서 하늘색입니다.

포커스 스케일링의 그라데이션 효과

public void CustomizePathGradientBrush(PaintEventArgs e)
{
    // 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);
}

' 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)

보간을 사용하여 사용자 지정하려면 다음을 수행합니다.

경로 그라데이션 브러시를 사용자 지정하는 또 다른 방법은 보간 색 배열과 보간 위치 배열을 지정하는 것입니다.

다음 예제에서는 삼각형을 기반으로 경로 그라데이션 브러시를 만듭니다. 이 코드는 경로 그라데이션 브러시의 InterpolationColors 속성을 설정하여 보간 색 배열(진한 녹색, 하늘색, 파란색) 및 보간 위치 배열(0, 0.25, 1)을 지정합니다. 삼각형 경계에서 중심점으로 이동하면 진한 녹색에서 하늘색으로, 그리고 하늘색에서 파란색으로 색이 점진적으로 변합니다. 진한 녹색에서 하늘색으로의 변화는 진한 녹색에서 파란색으로의 거리의 25 %에서 발생합니다.

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

사용자 지정 경로 그라데이션 브러시로 채운 삼각형.

public void CustomizeWithInterpolation(PaintEventArgs e)
{
    // 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);
}

' 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)

중심점을 설정하려면 다음을 수행합니다.

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

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

public void SetCenterPoint(PaintEventArgs e)
{
    // 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);
}

' 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)

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

채워진 타원과 중심점이 있는 그라데이션 경로.

경로 그라데이션 브러시의 중심점을 브러시를 생성하는 데 사용된 경로 외부 위치로 설정할 수 있습니다. 다음 예제에서는 이전 코드에서 CenterPoint 속성을 설정하는 호출을 대체합니다.

public void SetCenterPointOutsidePath(PaintEventArgs e)
{
    // 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(145, 35);

    // 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);
}

pthGrBrush.CenterPoint = New PointF(145, 35)

다음 그림은 이 변경 사항이 적용된 출력을 보여 줍니다.

경로 외부에 중심점이 있는 그라데이션 경로.

앞의 그림에서 타원의 맨 오른쪽에 있는 점들은 파란색에 매우 가깝지만 순수한 파란색이 아닙니다. 그라데이션의 색은 채우기가 순수한 파란색(0, 0, 255)인 점(145, 35)에 도달한 것처럼 배치됩니다. 그러나 경로 그라데이션 브러시는 경로 내부만 칠하기 때문에 채우기는 (145, 35)에 도달하지 않습니다.

코드 컴파일

이전 예제는 Windows forms에서 사용하도록 설계되었으며 Paint 이벤트 처리기의 매개 변수인 PaintEventArgse가 필요합니다.

참고 항목

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