在GDI +中沿着它的笔划宽度绘制一条带有线性渐变的折线

时间:2012-09-13 12:35:33

标签: c# .net graphics gdi+ gradient

是否可以绘制沿其笔划宽度具有线性渐变的折线?也就是说,如果你有一个黑色在0和100%以及白色50%的渐变,黑色将始终位于线的边缘而白色位于中间,无论角度如何。可以把它想象成某种3D管道。当然,该线的笔划宽度至少为10px。这里的所有问题都询问如何在它的两端填补一条线。我绝对不会对此感兴趣。我使用GDI +在C#中工作,可以是任何.NET版本。

1 个答案:

答案 0 :(得分:7)

我认为这就是你想要的:

Screenshot

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }

    private void Form1_Paint(object sender, PaintEventArgs e)
    {
        e.Graphics.SmoothingMode=SmoothingMode.AntiAlias;

        DrawPipe(e.Graphics, 10f, new PointF(10, 10), new PointF(250, 80), Color.White, Color.Black);

        DrawPipe(e.Graphics, 10f, new PointF(15, 60), new PointF(280, 120), Color.BlueViolet, Color.Black);
    }

    private void DrawPipe(Graphics g, float width, PointF p1, PointF p2, Color mid_color, Color edge_color)
    {
        SizeF along=new SizeF(p2.X-p1.X, p2.Y-p1.Y);
        float mag=(float)Math.Sqrt(along.Width*along.Width+along.Height*along.Height);
        along=new SizeF(along.Width/mag, along.Height/mag);
        SizeF perp=new SizeF(-along.Height, along.Width);

        PointF p1L=new PointF(p1.X+width/2*perp.Width, p1.Y+width/2*perp.Height);
        PointF p1R=new PointF(p1.X-width/2*perp.Width, p1.Y-width/2*perp.Height);
        PointF p2L=new PointF(p2.X+width/2*perp.Width, p2.Y+width/2*perp.Height);
        PointF p2R=new PointF(p2.X-width/2*perp.Width, p2.Y-width/2*perp.Height);

        GraphicsPath gp=new GraphicsPath();
        gp.AddLines(new PointF[] { p1L, p2L, p2R, p1R});
        gp.CloseFigure();

        Region region=new Region(gp);
        using(LinearGradientBrush brush=new LinearGradientBrush(
            p1L, p1R, Color.Black, Color.Black))
        {                
            ColorBlend color_blend=new ColorBlend();
            color_blend.Colors=new Color[] { edge_color, mid_color, edge_color };
            color_blend.Positions=new float[] { 0f, 0.5f, 1f };
            brush.InterpolationColors=color_blend;
            g.FillRegion(brush, region);
        }
    }
}

修改1

另一种方法是使用PathGradientBrush

GraphicsPath gp = new GraphicsPath();
gp.AddLines(new PointF[] { p1, p1L, p2L, p2, p2R, p1R });
gp.CloseFigure();

Region region = new Region(gp);
using (PathGradientBrush brush = new PathGradientBrush(gp))
{
    brush.CenterColor = mid_color;
    brush.SurroundColors = new Color[] 
    {
        mid_color, edge_color,edge_color,mid_color,edge_color,edge_color
    };          
    g.FillRegion(brush, region);
}

修改2

要使边缘更平滑,请使用一些Alpha透明度:

using(LinearGradientBrush brush=new LinearGradientBrush(
    p1L, p1R, Color.Black, Color.Black))
{
    ColorBlend color_blend=new ColorBlend();
    color_blend.Colors=new Color[] { 
        Color.FromArgb(0, edge_color), edge_color, mid_color, 
        edge_color, Color.FromArgb(0, edge_color) };
    color_blend.Positions=new float[] { 0f, 0.1f, 0.5f, 0.9f, 1f };
    brush.InterpolationColors=color_blend;
    g.FillRegion(brush, region);
}

Screenshot2

编辑3 对于一些工件,通过在第一个然后是线

之间渲染圆来绘制多条线
    private void DrawPipes(Graphics g, float width, PointF[] points, Color mid_color, Color edge_color)
    {
        for (int i = 0; i < points.Length; i++)
        {
            using (GraphicsPath gp = new GraphicsPath())
            {
                gp.AddEllipse(points[i].X - width / 2, points[i].Y - width / 2, width, width);

                using (PathGradientBrush brush = new PathGradientBrush(gp))
                {
                    brush.CenterColor = mid_color;
                    brush.SurroundColors = new Color[] { edge_color };
                    brush.CenterPoint = points[i];
                    g.FillPath(brush, gp);
                }
            }
            if (i > 0)
            {
                DrawPipe(g, width, points[i - 1], points[i], mid_color, edge_color);
            }
        }
    }

Screenshot