C＃画线平行于折线

Question

I'm creating a program in wpf that draws polyline as well as a line an offset away which is parallel. It works perfectly for the first set of parallel lines, but on each following line the right line is off angled(Shown in red) .

Code so far:

        private void DrawingCanvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) {
        if (polylineLeft != null) {
            var canvas = (Canvas)sender;
            leftSegment.Points[1] = e.GetPosition(canvas);

            var distance = (leftSegment.Points[0] - leftSegment.Points[1]).Length;

            if (distance >= 20) {

                polylineLeft.Points.Add(leftSegment.Points[1]);
                //calculate second line
                var L = Math.Sqrt((leftSegment.Points[0].X - leftSegment.Points[1].X) * 
                    (leftSegment.Points[0].X - leftSegment.Points[1].X) + 
                    (leftSegment.Points[0].Y - leftSegment.Points[1].Y) * 
                    (leftSegment.Points[0].Y - leftSegment.Points[1].Y));
                var x1p = leftSegment.Points[0].X + width * (leftSegment.Points[1].Y-leftSegment.Points[0].Y) / L;
                var x2p = leftSegment.Points[1].X + width * (leftSegment.Points[1].Y-leftSegment.Points[0].Y) / L;
                var y1p = leftSegment.Points[0].Y + width * (leftSegment.Points[0].X-leftSegment.Points[1].X) / L;
                var y2p = leftSegment.Points[1].Y + width * (leftSegment.Points[0].X-leftSegment.Points[1].X) / L;
                if (!initialLeftPoint) {
                    polylineRight.Points.Clear();
                    polylineRight.Points.Add(new Point(x1p, y1p));
                    initialLeftPoint = true;
                }
                polylineRight.Points.Add(new Point(x2p, y2p));
                leftSegment.Points[0] = leftSegment.Points[1];
                rightSegment.Points[0] = rightSegment.Points[1];
            } else {
                if (polylineLeft.Points.Count < 2) {
                    canvas.Children.Remove(polylineLeft);
                }

                polylineLeft = null;
                polylineRight = null;
                leftSegment.Points.Clear();
                rightSegment.Points.Clear();
                canvas.Children.Remove(leftSegment);
                canvas.Children.Remove(rightSegment);
            }
        }
    }

How do I ensure that on my second line, (Red) it is parallel with the main line (Green)?

Answer 1

One part of the problem is quite easy to solve with the help of the WPF Vector structure. Given a line segment between the two Points p1 and p2 , you could calculate the normal vector like this:

Point p1 = ...
Point p2 = ...
var v = p2 - p1;
var n = new Vector(v.Y, -v.X);
n.Normalize();
// now n is a Vector of length 1, perpendicular to the line p1-p2

You could now create a parallel line segment (given by Points p3 and p4 ) like this:

var distance = 20d;
var p3 = p1 + n * distance;
var p4 = p3 + v;

However, the above code creates a parallel line segment of the same length as the original one. This may not be exactly what you want, as I guess you want to create a "parallel polyline". If that is the case, things get a bit more complicated because you would also have to calculate the intersections between adjacent segments of the parallel polyline. It may even happen that some of these segments disappear during these calculations.