Polyline following a curved path - wpf

Question

I code a diagram editor and I draw some curved links that perfectly works from quadratic bezier segment (see picture) :
I search the best way (and if it's possible) to draw "spike" curved link. Approximatively like this (in blue) :
I have no idea where to start, I read few articles on drawingbrush or "how to draw a curved text" but it doesn't seems to be what I need...
Thanks for your help or advises ! :)
Just to complete few remarks, the bezier is made with quadrametricBezier class from 3 points. Thanks to all of you !

Answer 1

I don't think there's a built-in way in WPF to do that. You'll have to calculate the coordinates yourself and draw the lines yourself (e.g. using DrawingVisual).
To calculate the coordinates, you would have to:
Step 1 Sample points along the bezier curve.
A bezier curve with 4 control points has the formula:
curve(t) = t^3 p1 + 3 t^2 (1-t) p2 + 3 t (1-t)^2 p3 + (1-t)^3 p4
d/dt curve(t) = 3 p3 - 3 p4 + 6 p2 t - 12 p3 t + 6 p4 t + 3 p1 t^2 - 9 p2 t^2 + 9 p3 t^2 - 3 p4 t^2
With these formulas, you can calculate points on the curve, and their tangent directions. Rotating the tangent direction by 90° (i.e. swap X/Y and change the sign of Y) gives the normal direction.
However, these points are not equidistant:
So if you used these points directly, you'd get a curve where some of the "spikes" are shorter than others:
Step 2: Get equidistant points along the curve
You now have a list of points along the curve. You can calculate the euclidean distance between each point and the next. Summing all those distances up gives the total length of the curve.
Let's say you want spikes that are (roughly) 10 pixels wide. Then you need n=round(TotalLength / 10) points. The points are at s(i) = TotalLength / n * i.
So if you want to e.g. find the value of t for the 3rd equidistant point, you'd calculate s(3) = TotalLength / n * 3. Then you'd iterate over the set of sampled points, summing up the distances as you go, until you reach a point that has a total distance along the curve > s(3). Now you know the points immediately before and after the point you're looking for, and you can use the rule of three to calculate the t in between.
Now you have a set of points that are the same distance apart along the curve:
Step 3: Drawing the spikes
This is the easiest part: At each of your equidistant points, calculate the normal (using the derivative formula above). Divide that normal by its length to get the unit normal. Then add to each even point +d * UnitNormal and to each odd point -d * UnitNormal, where d is the "depth" of the spike, i.e. the distance of the tip to the curve.

Answer 2

Assuming that you already have computed Bezier curve, desired curve is a sum of triangle wave multiplied to normal vector to the Bezier curve with the Bezier curve. The only thing you should take into account that the Bezier curve is a parametric curve with parameter t in [0, 1]. Then you need Bezier curve length function L(t) and to plug that into triangle wave equation instead of t.
Triangle wave also can be expressed through modulo operation
TW(t) = M * abs(mod(q * L(t), n * 2 - 2) - n + 1) + 1
where
M - a magnitude of the wave,
q - a scaling factor along path,
n - period of a curve,
t - parameter of a Bezier curve,
L(t) - length function of Bezier curve.
Resulting curve:
C(t) = TW(t) * B_normal(t) + B(t)
where B_normal(t) is a normal vector to a Bezier curve at point t.

Answer 3

For those that can be interested by the WPF solution, I finally code this (not very optimized) based on the QuadraticBezierSegment and PathGeometry classes.
Thanks very much to all of you. :)
public partial class MainWindow : Window
{
int orientation = 1;
int compt = 0;
int SpikeWidth = 5;
int SpikeHeigth = 3;
public MainWindow()
{
InitializeComponent();
Polyline wave = new Polyline();
wave.Stroke = Brushes.Blue;
wave.StrokeThickness = 2;
PathGeometry pg = BezierPath.Data.GetFlattenedPathGeometry();
double CurveLenght = GetLength(pg, PathFigure.StartPoint);
double NbrPoint = (Math.Round(CurveLenght / SpikeWidth));
for (int i = 0; i <= NbrPoint; i++)
{
//Calcul de T
double t = SpikeWidth * i / CurveLenght;
Point TangentPoint;
Point PointToDraw;
pg.GetPointAtFractionLength(t, out PointToDraw, out TangentPoint);
// Calcul de l'angle
double a = Math.Atan2(TangentPoint.Y, TangentPoint.X);
a += Math.PI / 2;
//Alterner un point sur deux de chaque coté de la courbe
if (compt % 2 == 0)
orientation = 1;
else
orientation = -1;
//Calcul du point et ajout à la polyligne.
//Point calculation and added to the polyline.
wave.Points.Add(new Point(Math.Cos(a) * SpikeHeigth * orientation + PointToDraw.X, Math.Sin(a) * SpikeHeigth * orientation + PointToDraw.Y));
//Compte le nombre de passage pour l'orientation
compt += 1;
}
//Traçage sur la canvas
cv.Children.Add(wave);
}
private double GetLength(PathGeometry pg, Point startPoint)
{
PolyLineSegment pls = pg.Figures[0].Segments[0] as PolyLineSegment;
double distance = 0;
foreach (Point pt in pls.Points)
{
distance += Math.Sqrt((startPoint.X - pt.X).Pow(2) + (startPoint.Y - pt.Y).Pow(2));
startPoint = pt;
}
return distance;
}
}
<Canvas x:Name="cv">
<Path Stroke="Black" x:Name="BezierPath">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure x:Name="PathFigure" StartPoint="10,400">
<PathFigure.Segments>
<PathSegmentCollection>
<QuadraticBezierSegment x:Name="BezierSegment" Point1="50,80" Point2="400,400">
</QuadraticBezierSegment>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>