CODEWITHSUNDEEP
c#wpfcanvascurve
bassplayer142
bassplayer142

Reputation: 380

WPF c# Drawing Thick curve with Lines or Alternative

I'm currently plotting XY data on a canvas and drawing a curve with it. So far it is simple and working for a thin line but when I increase the thickness a peculiar effect happens due to how the lines are drawn to form a curve.

I've attached an example image that shows a nice smooth line that works fine when the line is thin. But when the line is thicker you can obviously see the problem.

  1. Is there a way to connect these endpoints to make a nice smooth line?

  2. If not, is there another drawing tool that is useful in creating a nice line?

I'm not happy about the implementation as is because quickly the canvas becomes cluttered by hundreds if not thousands of line objects on the Canvas. This seems like an awful way of doing this but I haven't found a better way as of yet. I'd much rather go with another route that would create a single curve object.

Any help is appreciated as always.

Thanks!

    Point previousPoint;

    public void DrawLineToBox(DrawLineAction theDrawAction, Point drawPoint)
    {
        Line myLine = new Line();

        myLine.Stroke = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0));
        myLine.StrokeThickness = 29;

        if(theDrawAction == DrawLineAction.KeepDrawing)
        {
            myLine.X1 = previousPoint.X;        //draw from this point
            myLine.Y1 = previousPoint.Y;
        }
        else if(theDrawAction == DrawLineAction.StartDrawing)
        {
            myLine.X1 = drawPoint.X;            //draw from same point
            myLine.Y1 = drawPoint.Y;
        }

        myLine.X2 = drawPoint.X;                //draw to this point
        myLine.Y2 = drawPoint.Y;

        canvasToDrawOn.Children.Add(myLine);    //add to canvas

        previousPoint.X = drawPoint.X;          //set current point as last point
        previousPoint.Y = drawPoint.Y;


    }

enter image description here

Upvotes: 0

Views: 1751

Answers (1)

fang
fang

Reputation: 3623

Try adding the following two lines:

myLine.StrokeStartLineCap = PenLineCap.Round;
myLine.StrokeEndLineCap = PenLineCap.Round;

Also, you really should use the Polylne or Path object to do what you are currently doing. Personally, I always set StrokeStartLineCap and StrokeEndLineCap to PenLineCap.Round and StrokeLineJoin to PenLineJoin.Round for the Polyline objects I used.

Upvotes: 3

Related Questions