c# - GDI+ でストローク幅に沿って線形グラデーションでポリラインを描画します

Question

ストローク幅に沿って線形グラデーションを持つポリラインを描画することはできますか? つまり、黒が 0 と 100%、白が 50% のグラデーションがある場合、角度に関係なく、黒は常に線の端にあり、白は中央にあります。ある種の 3D パイプと考えてください。もちろん、線のストローク幅は少なくとも 10px です。ここでのすべての質問は、端と端の間の線を埋める方法を尋ねます。私は間違いなくそれに興味がありません。私は GDI+ を使用して C# で作業していますが、任意の .NET バージョンにすることができます。

Answer 1

私はこれがあなたが望むものだと思います：

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

エッジを滑らかにするには、アルファ透明度を使用します。

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

編集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);
            }
        }
    }