How to create mirror shape on graphic

Question

I have the point list

List<Point> pointList = new List<Point>();

pointList.Add(new Point(0,0));
pointList.Add(new Point(30,0));
pointList.Add(new Point(30,-100));
pointList.Add(new Point(0,-100));

Then Draw the line

Pen pen = new Pen(Color.Red,2);

g.Drawline(pen,pointList[0],pointList[1]);

g.Drawline(pen,pointList[3],poin,tList[4]);

for this I will get the result of the left image in the link

and If I need to create the mirror to get the result of the right image in the link

is there any method that can mirror the graphic that I draw from pointlist ?

it there something like copy and flip the graphic and compound?

Thank you

Answer 1

Having a GraphicsPath, you can use the following methods to mirror the path:

GraphicsPath MirrorLeft(GraphicsPath path)
{
    var r = path.GetBounds();
    var p = (GraphicsPath)path.Clone();
    p.Transform(new Matrix(-1, 0, 0, 1, 2 * r.Left, 0));
    return p;
}
GraphicsPath MirrorRight(GraphicsPath path)
{
    var r = path.GetBounds();
    var p = (GraphicsPath)path.Clone();
    p.Transform(new Matrix(-1, 0, 0, 1, 2 * (r.Left + r.Width), 0));
    return p;
}

MirrorLeft, mirrors the path by using the left side of the path as axis, and MirrorRight uses the right side of the path as axis.

In the following picture, red arc is the original, green is mirror left, and blue is mirror right:

Here the code for above output:

protected override void OnPaint(PaintEventArgs e)
{
    e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
    using (var path1 = new GraphicsPath())
    {
        path1.AddArc(new Rectangle(100, 100, 200, 200), -90, 90);
        using (var pen1 = new Pen(Color.Red, 3))
            e.Graphics.DrawPath(pen1, path1);

        using (var path2 = MirrorLeft(path1))
        using (var pen2 = new Pen(Color.Green, 3))
            e.Graphics.DrawPath(pen2, path2);
        using (var path3 = MirrorRight(path1))
        using (var pen3 = new Pen(Color.Blue, 3))
            e.Graphics.DrawPath(pen3, path3);
    }
    base.OnPaint(e);
}

Answer 2

You can simply flip the Graphics object:

e.Graphics.DrawLines(Pens.Black, pointList.ToArray());
e.Graphics.ScaleTransform(-1, 1);
// you need to know at which x value the flipping axis should be!
e.Graphics.TranslateTransform(..., 0);
e.Graphics.DrawLines(Pens.Red, pointList.ToArray());

Note that you need to know where you want to flip (mirror-axis). For the effect you show, you need to move to the right by twice the left edge (minimum) of the figure..:

int xmin = pointList.Min(x => x.X);
int xmax = pointList.Max(x => x.X);

e.Graphics.TranslateTransform(xmin * 2, 0);

Also note that the Graphics can only display positive values unless you move the Graphics object accordingly. So without a TranslateTransform your numbers will never show. (I have changed them for the demo.)

Also note that connected lines should always be drawn with Graphics.DrawLines or else the connections will get botched with larger pen widths and/or semi-transparent colors.

As Jimi notes, if you want to continue drawing, you will want to do either a e.Graphics.ResetTransform(); after the flip, or, if you had already prepared the whole drawing by translating the canvas into the positive realm, restore the state it had before the flip. For this first store the state:

var state = e.Graphics.Save();

and afterwards restore it:

e.Graphics.Restore(state);

Do note that you need to take care that those two commands need to be matched one for one!!

Answer 3

In terms of API, this is a very broad question. All graphics related APIs have transformations. So do the classes in the System.Numerics namespace, which are used mainly in SIMD operations. In geometry terms though, the answer is clear, you need to apply the correct transformation to all points. In this particular case it's reflection.

Some APIs support reflection directly, eg Vector2.Reflect :

var points=new[]{
        new Vector2(0,0),
        new Vector2(30,0),
        new Vector2(30,-100),
        new Vector2(0,-100),                                                            
};

var reflect_y=new Vector2(1,0);
var reflected = points.Select(p=>Vector2.Reflect(p,reflect_y))            
                      .ToArray();

Printing out the reflected points produces :

0, 0
-30, 0
-30, -100
0, -100

In other cases one can calculate the transformation matrix and multiply each point by it with :

This article explains the math and shows the values to use for reflection along the X, Y axes or both. In this case the desired matrix is :

Transformations in computer graphics are applied as 3x2 matrices where the third column applies a transposition along each axis. In this case we don't want to move the result, so the third column contains 0s.

This time, Vector2.Transform is used instead of Reflect :

var reflect_y=new Matrix3x2(-1,0,0,1,0,0);
var reflected = ( from point in points
                  select Vector2.Transform(point,reflect_y)            
                ).ToArray();

In GDI+, a transformation is represented by a Matrix object. Reflect isn't available but can be replaced with Matrix.Scale when we want to reflect along the X or Y axes only. For example :

var m=new Matrix();
m.Scale(1,-1);
m.TransformVectors(points);

Will reflect an array of points by multiplying all X values by 1 and all Y values by -1.