如何在WPF中仅绘制Bezier曲线的一部分？

Question

I have a requirement to draw small curved arrows. I can work out the angle of the arrowhead OK, and I was going to use Beziers to define the path segments. However, what I would really like to do is to calculate an invisible curved path between start and end, and only stroke the path from a small distance after the start and just before the end.

This would leave a suitable gap between any objects at the start and end points. Any suggestions?

Answer 1

I think I may have hit upon a possible solution, after a lot of head scratching. Say you have a Bezier curve ABCD, where B & C are the control points and A & D the start and end points. And you want to start and end a standoff distance X from A and D:

1. Generate the Initial Bezier

2. Call GetFlattenedPathGeometry to convert it into a series of small segments

3. Sum up to get the length of the Bezier and divide into X to get the fraction length F from beginning and end

4. Call PathGeometry.GetPointAtFractionLength on the original Bezier, passing in F and 1-F. This will yield a start/end point and a tangent vector for each end of the shortened Bezier

5. Add the start/end point to the tangent vector to get the corresponding control point

6. Generate a new Bezier using these points, which should stand off the original start and end points by X

See any problem with this approach?

Answer 2

Arrows generally don't have insanely messed up curves, they have pretty smooth curves, with the t values near the ends behaving as pure cubics (since the Bezier function is dominated by (1-t)³ at the start coordinate, and by t³ at the end coordinate), so near the end points you can "guestimate" the "t" value you need to plug in to get a coordinate near the need by using the cube root:

// let's say we want "10% away from the end"
desiredDistance = 0.9;

// then the guestimate for the "t" value is simply the cube root of 0.9
probablyT = Math.pow(desiredDistance, 1/3);

// and the point we want to cut at is at that "t" value
cutPoint = get(probablyT, pts);

// and we can split up the curve into two segments at that "t" value
curves = split(probablyT, pts);

// and then keep the segment we need for the arrow
arrowcurve = curves[0];

See http://jsbin.com/dovodibaze/edit?js,output for how well this approximates distances near the end point (and how this clearly only works near the end point you're guessing for =)

With that probablyT value you can split your original curve, draw the "first" curve that you get from that split (covering the original t=0 to t=near-the-end segment) and then draw your arrow head at the original end point.