Search code examples
c#pictureboxgraphicspath

Drawing pictureBox c#


i'm trying to make a customized picturebox that looks like this -

enter image description here

So far, all i've made is - enter image description here

using this code -

    protected void UpdateRegion()
    {
        var path = new GraphicsPath();
        Point[] points =
        {
            new Point( 0, 0),
            new Point(0, ClientSize.Height-80),
            new Point(80 , ClientSize.Height),
            new Point(ClientSize.Width-80, ClientSize.Height),
            new Point(ClientSize.Width,  ClientSize.Height-80),
            new Point(ClientSize.Width , 0)
        };
        path.AddPolygon(points);
        path.FillMode = FillMode.Winding;
        this.Region = new Region(path);
    }

Solution

  • Here you go:

    enter image description here

            GraphicsPath path = new GraphicsPath();
            path.FillMode = FillMode.Winding;
    
            int cut = 80;
            Rectangle cr = panel1.ClientRectangle;
    
            Point[] points =
            {
                new Point(0, cr.Height - cut),
                new Point(0, 0),
                new Point(cr.Width, 0),
                new Point(cr.Width, cr.Height - cut),
                new Point(cr.Width - cut, cr.Height),
                new Point(cut, cr.Height),
                new Point(0, cr.Height - cut),
            };
            path.AddPolygon(points);
    
            Rectangle arcRect = new Rectangle(0, cr.Height - 2 * cut, 2 * cut, 2 * cut);
            path.AddArc(arcRect, 90f, 90f);
    

    An arc is defined by the bounding rectangle, which in our case has twice the size of the cut. It starts at 90° clockwise from the x-axis and goes for (at least) 90° more.

    You can add it to a GraphicsPath or draw it with a Graphics object.

    Here is a quote from MSDN:

    If there are previous lines or curves in the figure, a line is added to connect the endpoint of the previous segment to the beginning of the arc.

    The arc is traced along the perimeter of the ellipse bounded by the specified rectangle. The starting point of the arc is determined by measuring clockwise from the x-axis of the ellipse (at the 0-degree angle) by the number of degrees in the start angle. The endpoint is similarly located by measuring clockwise from the starting point by the number of degrees in the sweep angle. If the sweep angle is greater than 360 degrees or less than -360 degrees, the arc is swept by exactly 360 degrees or -360 degrees, respectively.

    Mote that I have added the bounding rectangle of the arc for demonstration only. The code does not include it.

    For rounded cuts at other corners you nee to chang&expand the points array and add more/other arcs.

    The other corners arcs take these Rectangles:

     Rectangle arcRectTL = new Rectangle(0, 0, 2 * cut, 2 * cut);
     Rectangle arcRectTR = new Rectangle(cr.Width - 2 * cut, 0, 2 * cut, 2 * cut);
     Rectangle arcRectBR = new Rectangle(cr.Width - 2*cut, cr.Height - 2*cut, 2*cut, 2*cut);
    

    The starting angles are respectively: 180°, 270° and 0°.

    The sizes and the sweeping angle stay the same.