Comment puis-je dessiner une section d'une courbe de Bézier dans WPF?

Question

J'ai besoin de dessiner de petites flèches courbées. Je peux travailler sur l'angle de la pointe de flèche OK, et j'allais utiliser Béziers pour définir les segments de chemin. Cependant, ce que je voudrais vraiment faire est de calculer un chemin incurvé invisible entre le début et la fin, et seulement le chemin à partir d'une petite distance après le début et juste avant la fin.

Ceci laisserait un espace approprié entre tous les objets au début et à la fin. Aucune suggestion?

Answer 1

Je pense que je peux avoir trouvé une solution possible, après beaucoup de grattage de la tête. Disons que vous avez une courbe de Bézier A-B-C-D, où B & C sont les points de contrôle et A & D les points de début et de fin. Et vous voulez commencer et mettre fin à une distance de sécurité X de A et D:

1. Générer l'initiale Bézier

2. Appel GetFlattenedPathGeometry pour le convertir en une série de petits segments

3. Somme pour obtenir la longueur du Bézier et diviser en X pour obtenir la longueur de la fraction F à partir du début et de la fin

4. Appelez PathGeometry.GetPointAtFractionLength sur l'original Bézier, en passant par F et 1-F. Cela donnera un point de départ/fin et un vecteur de tangente pour chaque extrémité de la Bézier

5. raccourci Ajouter début/point final au vecteur de tangente pour obtenir le point de contrôle correspondant

6. Générer une nouvelle Bézier en utilisant ces points, qui devraient se tenir à l'écart des points de début et de fin d'origine par X

Vous voyez un problème avec cette approche?

Answer 2

Les flèches n'ont généralement pas de courbes folles, elles ont des courbes assez lisses, avec les valeurs t près des extrémités se comportant comme des cubes purs (puisque la fonction de Bézier est dominée par (1-t) ³ au début et par T³ à la fin de coordonnées), si près des points d'extrémité, vous pouvez « guestimate » la valeur « t » vous devez brancher pour obtenir une coordonnée à proximité du besoin en utilisant la racine cubique:

// 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]; 

Voir http://jsbin.com/dovodibaze/edit?js,output pour savoir comment cela se rapproche des distances proches du point final (et comment cela ne fonctionne clairement que près du point final que vous devinez =)

Avec cette valeur probablyT vous pouvez diviser votre courbe d'origine, dessinez la "première" courbe que vous obtenez de cette division (couvrant l'original t = 0 à t = près du segment de fin), puis dessinez votre tête de flèche au point de fin original.