Share via

Nasıl yapılır: Yol Gradyanı Oluşturma

  • Makale

sınıfı, PathGradientBrush bir şekli aşamalı olarak değişen renklerle doldurma yönteminizi özelleştirmenize olanak tanır. Örneğin, bir yolun merkezi için bir renk ve bir yolun sınırı için başka bir renk belirtebilirsiniz. Ayrıca, bir yolun sınırı boyunca birkaç noktanın her biri için ayrı renkler de belirtebilirsiniz.

Dekont

GDI+ dilinde yol, bir nesne tarafından GraphicsPath tutulan çizgi ve eğri dizisidir. GDI+ yolları hakkında daha fazla bilgi için bkz . GDI+ 'da Grafik Yolları ve Oluşturma ve Çizim Yolları.

Bu makaledeki örnekler, denetimin Paint olay işleyicisinden çağrılan yöntemlerdir.

Üç noktayı yol gradyanı ile doldurmak için

  • Aşağıdaki örnek, üç noktayı yol gradyan fırçasıyla doldurur. Orta renk mavi, sınır rengi ise aqua olarak ayarlanır. Aşağıdaki çizimde, dolu üç nokta gösterilmektedir.

    Gradient Path fills an ellipse.

    Varsayılan olarak, yol gradyan fırçası yol sınırının dışına genişlemez. Yol sınırını aşan bir şekli doldurmak için yol gradyan fırçasını kullanırsanız, ekranın yolun dışındaki alanı doldurulmayacak.

    Aşağıdaki çizimde, aşağıdaki koddaki e.Graphics.FillRectangle(pthGrBrush, 0, 10, 200, 40)çağrıyı Graphics.FillEllipse olarak değiştirirseniz ne olacağı gösterilmektedir:

    Gradient Path extended beyond boundary of the path.

    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)

    Yukarıdaki kod örneği, Windows Forms ile kullanılmak üzere tasarlanmıştır ve parametresi PaintEventHandlerolan e değerini gerektirirPaintEventArgs.

Sınırdaki noktaları belirtmek için

  • Aşağıdaki örnek, yıldız şeklindeki bir yoldan yol gradyan fırçası oluşturur. Kod, yıldızın CenterColor centroid'indeki rengi kırmızıya ayarlayan özelliğini ayarlar. Ardından kod, özelliği dizideki SurroundColors tek tek noktalarda points çeşitli renkler (dizide colors depolanır) belirtecek şekilde ayarlar. Son kod deyimi, yıldız şeklindeki yolu yol gradyan fırçasıyla doldurur.

    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)

  • Aşağıdaki örnek, kodda nesnesi olmayan bir GraphicsPath yol gradyanı çizer. Örnekteki belirli PathGradientBrush oluşturucu bir nokta dizisi alır ancak nesne GraphicsPath gerektirmez. Ayrıca, yolunu PathGradientBrush değil dikdörtgeni doldurmak için kullanıldığını unutmayın. Dikdörtgen, fırçayı tanımlamak için kullanılan kapalı yoldan daha büyüktür, bu nedenle dikdörtgenin bir kısmı fırça tarafından boyanmaz. Aşağıdaki çizimde dikdörtgen (noktalı çizgi) ve dikdörtgenin yol gradyan fırçasıyla boyanan bölümü gösterilmektedir:

    Gradient portion painted by the path gradient brush.

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

Yol gradyanlarını özelleştirmek için

  • Yol gradyan fırçasını özelleştirmenin bir yolu, özelliğini FocusScales ayarlamaktır. Odak ölçekleri, ana yolun içinde yer alan bir iç yol belirtir. Orta renk, yalnızca orta noktada değil, bu iç yolun içinde her yerde görüntülenir.

    Aşağıdaki örnek, eliptik yolu temel alan bir yol gradyan fırçası oluşturur. Kod, sınır rengini maviye ayarlar, orta rengi aqua olarak ayarlar ve ardından yol gradyan fırçasını kullanarak eliptik yolu doldurur.

    Ardından kod, yol gradyan fırçasının odak ölçeklerini ayarlar. x odak ölçeği 0,3 ve y odak ölçeği 0,8 olarak ayarlanır. Kod, sonraki çağrının TranslateTransform ilk üç noktanın sağında yer alan bir üç noktayı doldurması için FillPath nesnesinin Graphics yöntemini çağırır.

    Odak ölçeklerinin etkisini görmek için merkezini ana üç noktayla paylaşan küçük bir elips düşünün. Küçük (iç) üç nokta, yatay olarak 0,3 kat ve dikey olarak 0,8 faktörüyle ölçeklendirilmiş ana üç noktadır (merkezi hakkında). Dış elips sınırından iç elips sınırına doğru ilerlerken, renk maviden su rengine yavaş yavaş değişir. İç üç noktanın sınırından paylaşılan merkeze doğru ilerlediğinizde renk deniz mavisi kalır.

    Aşağıdaki çizimde aşağıdaki kodun çıkışı gösterilmektedir. Soldaki üç nokta yalnızca orta noktada su şeklindedir. Sağdaki üç nokta iç yolun içinde her yerde su şeklindedir.

Gradient effect of focus scales

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)

İlişkilendirme ile özelleştirmek için

  • Yol gradyan fırçasını özelleştirmenin bir diğer yolu da ilişkilendirme renklerinden oluşan bir dizi ve ilişkilendirme konumları dizisi belirtmektir.

    Aşağıdaki örnek, üçgeni temel alan bir yol gradyan fırçası oluşturur. Kod, yol gradyan fırçasının özelliğini bir ilişkilendirme renkleri dizisi (koyu yeşil, su, mavi) ve bir ilişkilendirme konumları dizisi (0, 0,25, 1) belirtmek için ayarlar InterpolationColors . Üçgenin sınırından orta noktaya doğru ilerlerken, renk koyu yeşilden aqua'ya ve ardından aqua'dan maviye doğru yavaş yavaş değişir. Koyu yeşilden aqua'ya değişim, koyu yeşilden maviye olan mesafenin yüzde 25'inde gerçekleşir.

    Aşağıdaki çizimde özel yol gradyan fırçasıyla doldurulmuş üçgen gösterilmektedir.

    Triangle filled with custom path gradient brush.

    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)

Orta noktayı ayarlamak için

  • Varsayılan olarak, yol gradyan fırçasının orta noktası, fırçayı oluşturmak için kullanılan yolun merkezindedir. Sınıfın özelliğini PathGradientBrush ayarlayarak merkez noktasının CenterPoint konumunu değiştirebilirsiniz.

    Aşağıdaki örnek, üç nokta temelinde yol gradyan fırçası oluşturur. Üç noktanın merkezi (70, 35) konumundadır, ancak yol gradyan fırçasının orta noktası (120, 40) olarak ayarlanır.

    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)

    Aşağıdaki çizimde, dolgulu üç nokta ve yol gradyan fırçasının orta noktası gösterilmektedir:

    Gradient Path with filled ellipse and center point.

  • Yol gradyan fırçasının orta noktasını, fırçayı oluşturmak için kullanılan yolun dışındaki bir konuma ayarlayabilirsiniz. Aşağıdaki örnek, önceki kodda özelliğini ayarlama CenterPoint çağrısının yerini alır.

    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)

    Aşağıdaki çizimde bu değişikliğin çıkışı gösterilmektedir:

    Gradient Path with center point outside the path.

    Yukarıdaki çizimde, üç noktanın en sağındaki noktalar saf mavi değildir (çok yakın olsalar da). Gradyandaki renkler, dolgunun rengin saf mavi (0, 0, 255) olacağı noktaya (145, 35) ulaşmış gibi konumlandırılır. Ancak bir yol gradyan fırçası yalnızca yolunun içinde boyandığından dolgu hiçbir zaman (145, 35) ulaşmaz.

Kod Derleniyor

Yukarıdaki örnekler Windows Forms ile kullanılmak üzere tasarlanmıştır ve olay işleyicisinin Paint parametresi olan öğesini gerektirir.PaintEventArgse

Ayrıca bkz.