绘制具有透明背景的形状

Question

I have a program with a lot of straight lines which represent pipes (oil pipes). The lines are user controls where the line is drawn in the Paint event of each control with the following sample code for a vertical line:

e.Graphics.DrawLine(linePen, new Point(0, 0), new Point(0, this.Height));

The issue is that I want to display the flow direction of the oil in the pipes, and therefore need to add an arrow somehow. StartCap and EndCap don't work here for the following reason:

The user control itself must be exactly the width of the line (pipe) to not have any "dead" area around the line, which will overlap other user controls on my form later on. If using StartCap or EndCap, and a line width of eg 2 pixel, the user control must be wider for the arrow (StartCap or EndCap) to be drawn.

The easy way would be to make the "empty" area transparent, but after googling for a very long time I gave up; there doesn't seem to be a reliable way to achieve this with a user control.

Then I thought I could just make a separate user control that would only draw the arrow, but I then still have the problem with the undrawn area covering the other user controls.

Does anyone have a suggestion how to either:

• make the user control area that is not drawn on transparent?
• some other approach to achieve the above?

As my "pipes" are only 2 pixel wide there is no possibility to draw anything inside the line/pipe :(

Any suggestions/comments are much appreciated!

Answer 1

There is a way to make a Control's Background transparent in winforms (with overlapping each other). However moving the control at runtime may make it flicker. Another choice is using Region to specify the region for your control so that it has theoretically any shape. This is what I can do for you, just a demo:

public partial class VerticalArrow : UserControl
{
    public VerticalArrow()
    {
        InitializeComponent();
        Direction = ArrowDirection.Up;                       
    }
    public enum ArrowDirection
    {
        Up,
        Down
    }
    ArrowDirection dir;
    public ArrowDirection Direction
    {
        get { return dir; }
        set
        {
            if (dir != value)
            {
                dir = value;
                UpdateRegion();
            }
        }
    }
    //default values of ArrowWidth and ArrowHeight
    int arrowWidth = 14;
    int arrowHeight = 18;
    public int ArrowWidth
    {
        get { return arrowWidth; }
        set
        {
            if (arrowWidth != value)
            {
                arrowWidth = value;
                UpdateRegion();                    
            }
        }
    }
    public int ArrowHeight
    {
        get { return arrowHeight; }
        set
        {
            if (arrowHeight != value)
            {
                arrowHeight = value;
                UpdateRegion();
            }
        }
    }
    //This will keep the size of the UserControl fixed at design time.
    protected override void SetBoundsCore(int x, int y, int width, int height, BoundsSpecified specified)
    {
        base.SetBoundsCore(x, y, Math.Max(ArrowWidth, 4), height, specified);
    }        
    private void UpdateRegion()
    {            
        GraphicsPath gp = new GraphicsPath();
        int dx = ArrowWidth / 2 - 1;
        int dy = ArrowHeight / 2;
        Point p1 = new Point(dx, Direction == ArrowDirection.Up ? dy : 1);
        Point p2 = new Point(ArrowWidth - dx, Direction == ArrowDirection.Up ? dy + 1: 1);
        Point p3 = new Point(ArrowWidth - dx, Direction == ArrowDirection.Up ? ClientSize.Height : ClientSize.Height - dy);
        Point p4 = new Point(dx, Direction == ArrowDirection.Up ? ClientSize.Height : ClientSize.Height - dy);
        Point q1 = Direction == ArrowDirection.Up ? new Point(0, ArrowHeight) : new Point(0, ClientSize.Height - ArrowHeight);
        Point q2 = Direction == ArrowDirection.Up ? new Point(dx, 0) : new Point(dx, ClientSize.Height);
        Point q3 = Direction == ArrowDirection.Up ? new Point(ArrowWidth, ArrowHeight) : new Point(ArrowWidth, ClientSize.Height - ArrowHeight);
        if (Direction == ArrowDirection.Up) gp.AddPolygon(new Point[] { p1, q1, q2, q3, p2, p3, p4 });
        else gp.AddPolygon(new Point[] {p1,p2,p3,q3,q2,q1,p4});
        Region = new Region(gp);
    }
    protected override void OnSizeChanged(EventArgs e)
    {
        UpdateRegion();
        base.OnSizeChanged(e);
    }
}

And here is the result:

You can use BackColor to change the color of the arrow. If we just need to draw the arrow, the code would be simpler, especially with the help of System.Drawing.Drawing2D.AdjustableArrowCap and deal with properties CustomStartCap and CustomEndCap . However as for your requirement, using Region is almost the best choice in many cases.

UPDATE

If you want the solution using transparent Background in which we use Pen and CustomLineCap instead of clipping Region , the VerticalArrow has to inherit from Control . Here is the code:

public class VerticalArrow : Control
{
    public VerticalArrow()
    {
        Width = 30;
        Height = 100;
        Direction = ArrowDirection.Up;
        ArrowHeight = 4;
        ArrowWidth = 4;
        TrunkWidth = 2;
        SetStyle(ControlStyles.Opaque, true);            
    }
    protected override CreateParams CreateParams
    {
        get
        {
            CreateParams cp = base.CreateParams;
            cp.ExStyle |= 0x20;
            return cp;
        }
    }
    public ArrowDirection Direction { get; set; }
    public int ArrowHeight { get; set; }
    public int ArrowWidth { get; set; }
    public int TrunkWidth { get; set; }
    Point p1, p2;
    public enum ArrowDirection
    {
        Up,
        Down,
        UpDown
    }
    protected override void OnSizeChanged(EventArgs e)
    {
        p1 = new Point(Width / 2, 0);
        p2 = new Point(Width / 2, Height);
        base.OnSizeChanged(e);
    }
    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);
        using (Pen p = new Pen(ForeColor))
        {                
            using (AdjustableArrowCap cap = new AdjustableArrowCap(ArrowWidth, ArrowHeight))
            {
                if (Direction == ArrowDirection.Up || Direction == ArrowDirection.UpDown) p.CustomStartCap = cap;
                if (Direction == ArrowDirection.Down || Direction == ArrowDirection.UpDown) p.CustomEndCap = cap;
            }
            p.Width = TrunkWidth;
            e.Graphics.DrawLine(p, p1, p2);
        }
    }
}

Screenshot:

To change Arrow color change the ForeColor .