WPF draws smooth and continuous besell curves and wpf draws the besell

WPF draws smooth and continuous besell curves and wpf draws the besell
1. Requirements

WPF does not directly plot the vertex set into a curve. It can be drawn using the besell curve function.

The BezierSegment curve class is BezierSegment, which controls the start and end directions through two control points.

QuadraticBezierSegment, a secondary beiser, uses a control point to control the Bending Direction.

This article uses three times.

 

Image source Wikipedia

2. Ideas

Reference document is: https://www.cnblogs.com/pangliang/archive/2011/03/24/1993308.html

The idea of attention is based on the current vertex, the previous vertex, the next vertex, And the next vertex. A total of four points are used to generate a cubic besell curve.

Curve needs (start point, end point, control point 1, control point 2), the two red points identified in the figure are control points.

The Code mainly calculates two red control points.

Calculate the midpoint [orange] of adjacent points first ].

Then, shift the line in the midpoint to the adjacent position [Blue Point], and obtain the dotted line endpoint [Red ].

Red indicates the control point.

3. Main Code

 

/// <Summary> /// obtain the besell curve /// </summary> /// <param name = "currentPt"> current vertex </param> /// <param name = "lastPt"> previous vertex </param> /// <param name = "nextPt1"> next vertex 1 </param> /// <param name =" nextPt2 "> next vertex 2 </param> // <returns> </returns> private BezierSegment GetBezierSegment (Point currentPt, point lastPt, Point nextPt1, Point nextPt2) {// calculate the dot var lastC = GetCenterPoint (lastPt, currentPt); var nextC1 = GetCenter Point (currentPt, nextPt1); // betel Control Point var nextC2 = GetCenterPoint (nextPt1, nextPt2); // calculate the depth of the adjacent midpoint line and the target Point. // The effect is not very good, because it may be located on two online or line extended cables, the calculation may have an error //, so the midpoint translation method is directly used. // Var C1 = GetFootPoint (lastC, nextC1, currentPt); // var C2 = GetFootPoint (nextC1, nextC2, nextPt1 ); // calculate the midpoint var c1 = GetCenterPoint (lastC, nextC1) of the "adjacent midpoint"; var c2 = GetCenterPoint (nextC1, nextC2 ); // calculate the point displacement var controlPtOffset1 = currentPt-c1; var controlPtOffset2 = nextPt1-c2; // Shift Control Point var controlPt1 = nextC1 + controlPtOffset1; var controlPt2 = nextC1 + controlPtOffset2; // if you think the curve amplitude is too large To bring the control point closer to a certain coefficient of the current point. ControlPt1 = controlPt1 + 0 * (currentPt-controlPt1); controlPt2 = controlPt2 + 0 * (nextPt1-controlPt2); var bzs = new BezierSegment (controlPt1, controlPt2, nextPt1, true ); return bzs ;}

　　

As follows:

 

4. Download source code

Https://files.cnblogs.com/files/chlm/WPF%E5%85%89%E6%BB%91%E6%9B%B2%E7%BA%BF%E5%9B%BE.rar

Thank you for reading this article. I hope it will help you.