Commande courbe de Bézier avec poignée de commande - historique, principe, mise en oeuvre

© 2013-2023 Conmajia
Mis à jour le 9 mars 2023
Initié le 22 février 2015

Résumé Cet article présente l'historique et les principes de base des courbes de Bézier et prend .NET Frameworks GDI+ comme exemple pour implémenter simplement un contrôle de courbe avec des poignées de contrôle et des styles extensibles.

1. Introduction

Les courbes avec poignées de contrôle sont souvent utilisées dans les logiciels de dessin pour ajuster avec précision les valeurs changeantes. Les courbes de Bézier sont dérivées d'une famille d'équations de paramètres de courbe largement utilisées dans la CAO d'ingénierie et l'infographie. Pierre Étienne Bézier (Pierre Étienne Bézier, 1910-1999) a proposé en 1962, et a développé le système de modélisation UNISURF basé sur celui-ci en 1968. Pour plus de détails sur les fonctions de Bessel, veuillez vous référer à Bessel My book "The Mathematical Foundations of the UNISURF CAD System" (Butterworths, 1986, p. 56).

1.1 Fonction de Bessel

Les fonctions de Bessel sont une famille de la forme

$$X^2{ans}^{"}+xy{\_}^{\prime }+\left(x^2-n^2\right)y=0$$

fonction, où $n$ est l'ordre. La solution de cette famille de fonctions est

$$y\left(x\right)=Un{J}_{}\left(x\right)+B{Y}_{}\left(x\right),$$

Parmi eux $J_{}\left(x\right)$ est appeléefonction de Bessel de première espèce,${Oui}_{}\left(x\right)$ est appeléefonction de Bessel de seconde espèce.

La fonction de Bessel peut être considérée comme une famille de fonctions sinusoïdales décroissantes, comme le montre la figure 1, où $J_{}\left(0\right)=1$，${Oui}_{}\left(0\right)=\infty$ .

Figure 1. Graphes des fonctions de Bessel de première et deuxième espèce

En utilisant la méthode de Frobenius pour résoudre, nous pouvons obtenir,

$$\begin{gathered} J_{}\left(x\right)=\sum _{k=0}\frac{(-1{)}^{}}{k!(n+k)\; !}{\left(\frac{}{2}\right)}^{n+2k\_} \\ \begin{array}{rl}{Oui}_{}\left(x\right)=& \frac{}{Pi}{J}_{}\left(x\right)\left[\ln \frac{}{2}+c\right]-\frac{}{Pi}\sum _{k=0}^{n-}\frac{(n-k-1)}{k!}{\left(\frac{}{2}\right)}^{2k-n}\\ & -\frac{}{Pi}\sum _{k=0}(-1{)}^k\left[\Phi \left(k\right)+F(n+k)\right]\frac{}{k!(n+k)\; !}{\left(\frac{}{2}\right)}^{2k+n}\end{array} \end{gathered}$$

où $c\stackrel{.}{=}\mathrm{0,577216}$，$\Phi \left(p\right)=1+\frac{}{2}+\frac{}{3}+\cdots +\frac{}{p}$，$p>0$，$\Phi \left(0\right)=0$ .

Il peut donc être considéré comme $X\to$L'équation asymptote de la fonction de Bessel en$\infty \; est\; approximée\; par$

$$\begin{array}{rl}{J}_{}\left(x\right)& \sim \sqrt{\frac{}{x\_}}parce\; que\left(x-\frac{}{2}-\frac{}{4}\right)\\ {Oui}_{}(x& \sim \sqrt{\frac{}{x\_}}\mathrm{péché}\left(x-\frac{}{2}-\frac{}{4}\right)\end{array}$$

De plus, la fonction de Hankel (Hankel), couramment utilisée en ingénierie, est également appelée fonction de Bessel du troisième type .

$$\begin{array}{rl}{H}_n^{(1}\left(x\right)& \equiv J_{}\left(x\right)+j{O}_{}\left(x\right)\\ H_n^{(2}(x& \equiv J_{}\left(x\right)-j{O}_{}\left(x\right)\end{array}$$

où exposant ${}^{\left(1\right)}$、${}^{\left(2\right)}$ pour les premier et deuxième types de fonctions de Bessel respectivement. Quand$X\to \infty$ ,

$$\begin{array}{rl}{H}_n^{(1}\left(x\right)& \sim \sqrt{\frac{}{x\_}}{e}^{+j\left(X-\frac{}{2}-\frac{}{4}\right)}\\ H_n^{(2}(x& \sim \sqrt{\frac{}{x\_}}{e}^{-j\left(X-\frac{}{2}-\frac{}{4}\right)}\end{array}$$

Les fonctions de Bessel du troisième type sont souvent utilisées pour traiter des problèmes d'ingénierie ou de graphisme avec plusieurs systèmes de coordonnées.

1.2 Courbe de Bézier

La base mathématique des courbes de Bézier provient en fait des polynômes de Bernstein publiés en 1912, une famille nommée d'après l'ancien mathématicien soviétique Sergei Natanovich Bernstein (Серге́й Ната́нович Бернште́йн, 1880-1968) Les polynômes de base et leurs combinaisons linéaires. chope polynômes a été proposé par l'ingénieur français Citroën Paul de Casteljau (Paul de Casteljau, 1930-2022) en 1959. Parce que cette méthode a été adoptée par Citroën Enregistré en tant que brevet, son contenu principal n'a été divulgué que dans les années 1980, alors maintenant il ressemble à $B\left(t\right)={\sum }_{je=0}^{}{b}_{}{b}_{je,}La\; courbe\; de\; forme\; de\; Bernstein\; de\; (t)$ tire son nom de la première courbe de Bézier publique, appeléecourbe de BézierOù$b_{}$pour $je$ contrôle les points,

$$b_{je,}\left(t\right)=\left(\genfrac{}{}{0ex}{}{}{je}\right)(1-t{)}^{n-je}{t}^{je},$$

est le polynôme de base de Bernstein.

1.2.1 Algorithme de De Castrio

L'algorithme de De Castrio décompose en fait une seule fonction de Bernstein en deux courbes de Bézier, $t_{}$La courbe à peut être obtenue par la relation de récurrence suivante,

$$\begin{array}{rl}{b}_{je}^{(0}& \equiv b_{},je=0,1,\cdots ,n\\ b_{je}^{(j}& \equiv b_{je}^{(j-1}(1-t_{})+b_{je+1}^{(j-1}{t}_{}\end{array}$$

Parmi eux, pour $b_{je}^{(j}$，有$je=0,1,\cdots ,n-j$，$j=1,2,\cdots ,n$ . A ce moment$t_{}$La courbe de Bézier à $B\left(t_{}\right)=b_0^{(n}$, et peut être décomposé en

$$\begin{array}{rl}& b_0^{(0},b_0^{(1},b_0^{(2},\cdots ,b_0^{(n}\\ & b_0^{(n},b_1^{(n-1},b_2^{(n-2},\cdots ,b_n^{(0}\end{array}$$

L'avantage de l'algorithme de de castrio est qu'il a les caractéristiques de la stabilité numérique, et l'inconvénient est qu'il est moins efficace que le calcul direct.Ce qui suit est une implémentation simple de l'algorithme de de castrio en langage Python, pour la référence des lecteurs ¹ .

def de_casteljau(t, coefs):
    beta = [c for c in coefs] # 此列表中的数据将于后续计算中覆盖
    n = len(beta)
    for j in range(1, n):
        for k in range(n - j):
            beta[k] = beta[k] * (1 - t) + beta[k + 1] * t
    return beta[0]

1.2.2 Courbe de Bézier ²

Comme mentionné précédemment, $La\; formule\; générale\; de\; la\; courbe\; de\; Bézier\; d\text{'}ordre\; n$ est

$$B\left(t\right)=\sum _{je=0}{b}_{}{b}_{je,}\left(t\right),$$

où $t\in [0,1]$ Évidemment, lorsque$n=1$ , une courbe de Bézier peut être obtenue

$$\begin{array}{rl}B\left(t\right)& =b_{}+(b_{}-b_{})t\\ & =(1-t)b_{}+t{\beta }_{}\end{array}$$

Son graphe est l'extrémité de $b_{}$Mouvement vers $b_{}$La ligne droite, comme le montre la figure 2, est également appelée courbe de Bézier linéaire. Notez que $b_{}$Utilisez $P_{}$signifie, le même ci-dessous.

Figure 2. Une courbe de Bézier

$n=2$时，$B\left(t\right)=(1-t{)}^2{b}_{}+2t(1\_-t)b_{}+t^2{b}_{}$est un point mobile $Q_{}$、$Q_{}$- également appelé point intermédiaire - puisque $b_{}$Mouvement vers $b_{}$forme, comme le montre la figure 3.

Figure 3. Courbe de Bézier quadratique

Les polices TrueType couramment utilisées dans les systèmes informatiques sont implémentées à l'aide de courbes de Bézier quadratiques.

quand $n=3$ ou supérieur, pour la version$n$ fois la courbe de Bézier, il faut introduire$\left(\genfrac{}{}{0ex}{}{}{n-1}\right)$ points intermédiaires La figure 4 montre le processus de construction des courbes de Bézier cubiques et quartiques.

D'abord

Deuxième

Figure 4. (A) Courbe de Bézier cubique ; (B) Courbe de Bézier quartique

Les graphiques et animations ci-dessus sont réalisés par l'algorithme De Castrio.

2 Contrôles de conception basés sur les courbes de Bézier

Tous les systèmes d'exploitation graphiques courants actuellement sur le marché ont des fonctions intégrées pour dessiner des courbes de Bézier dans leurs systèmes graphiques.En prenant Windows comme exemple, son système graphique GDI/GDI+ implémente une courbe de Bézier à quatre points, comme illustré à la figure 5. , dans la courbe de Bézier cubique, $b_{}$et $b_{}$respectivement utilisé comme $b_{}$et $b_{}$La main de contrôle de . Dans l'expression de la courbe, $b_{}$、$b_{}$、$b_{}$、$b_{}$Correspondant respectivement aux points "First", "Second", "Third" et "Fourth" sur le graphique.

Figure 5. Courbes de Bézier en infographie

2.1 Tracé d'une courbe de Bézier ³

En appelant les fonctions enveloppées dans GDI+ pour dessiner des courbes de Bézier cubiques DrawBezier,

public void DrawBezier(Pen pen,
                       Point pt1,
                       Point pt2,
                       Point pt3,
                       Point pt4);
public void DrawBezier(Pen pen,
                       PointF pt1,
                       PointF pt2,
                       PointF pt3,
                       PointF pt4);
public void DrawBezier(Pen pen,
                       float x1,
                       float y1,
                       float x2,
                       float y2,
                       float x3,
                       float y3,
                       float x4,
                       float y4);

Les utilisateurs peuvent facilement dessiner la courbe de Bézier souhaitée sur le formulaire. La figure 6 est dessinée avec le code suivant.

private void Exercise_Paint(object sender, PaintEventArgs e)
{
    
    
        Pen penCurrent = new Pen(Color.Blue);
        Point pt1 = new Point(20, 12),
                    pt2 = new Point(88, 246),
                    pt3 = new Point(364, 192),
                    pt4 = new Point(250, 48);

        e.Graphics.DrawBezier(penCurrent, pt1, pt2, pt3, pt4);
}

Figure 6. Courbe de Bézier tracée par GDI+

2.2 Définir la courbe de Bézier dans le contrôle graphique

Afin de réaliser la fonction d'interaction graphique entre l'utilisateur et le contrôle, il faut d'abord gérer les points de contrôle de la courbe de Bézier cubique. S'il est exprimé dans le concept de "Modèle-Vue-Contrôle" (MVC), le contrôle graphique de la courbe de Bézier ici Il peut être conçu selon les chapitres suivants.

2.2.1 Modèle

On peut voir dans les chapitres précédents que la courbe de Bézier cubique a 2 extrémités et 2 points intermédiaires, comme le montre la figure 7, qui sont respectivement nommés points d'ancrage (anchor) et points de poignée (handler).

Figure 7. Les extrémités du contrôle de la courbe de Bézier, les points de contrôle de la figure sont les points de poignée décrits dans le texte

Les extrémités de la courbe de Bézier sont définies comme suit :

// 贝塞尔曲线点
public class BezierPoint {
    
    
	public Point Anchor {
    
     get; set; }
	public Point Handler {
    
     get; set; }
}

L'extrémité de chaque courbe de Bézier contient un point d'ancrage et le point de poignée correspondant, c'est-à-dire $(b_{},b_{})$ ou$(b_{},b_{})$ Alors un segment de courbe de Bézier cubique peut être défini comme :

// 贝塞尔曲线段
public class BezierSegment {
    
    
    public BezierPoint Begin;
    public BezierPoint End;
}

En modifiant la position du point d'ancrage et la position du point de la poignée, une courbe de Bézier de n'importe quelle forme peut être réalisée, et son effet d'utilisation doit être comme indiqué dans l'animation de la figure 8.

Figure 8. Apparence de contrôle de courbe de Bézier contrôlable et démonstration interactive

2.2.2 Vues

L'apparence de la courbe est indépendante des extrémités de la courbe et elle peut être dessinée à l'aide d'un moteur de rendu évolutif indépendant, tel que le moteur de rendu simple suivant :

public class BezierRenderer {
    
    
    public void DrawSegment(Graphics g, BezierSegment s, Color color) {
    
    
    using (Pen p = new Pen(color)) {
    
    
        g.DrawBezier(
            p,
            s.Begin.Anchor,
            s.Begin.Handler,
            s.End.Anchor,
            s.End.Handler);
    }
    public void DrawHandle(Graphics g, Point pt, bool solid, Color color) {
    
    
        if (solid)
            using (SolidBrush b = new SolidBrush(color))
                g.FillRectangle(b, pt.X - 2, pt.Y - 2, 4, 4);
        else
            using (Pen p = new Pen(color))
                g.DrawRectangle(b, pt.X - 2, pt.Y - 2, 4, 4);
    }
    public void DrawBar(Graphics g, Point pt1, Point pt2, Color color) {
    
    
        using (Pen p = new Pen(color))
            g.DrawLine(p, pt1, pt2);
    }
}

Ce moteur de rendu permet uniquement de personnaliser la couleur de chaque point et la couleur de la ligne de connexion entre le point de la poignée et le point d'ancrage. Voici un exemple d'utilisation :

// 画曲线
renderer.DrawSegment(g, s, Color.DimGray);

// 画锚点，灰色
renderer.DrawHandle(g, s.Begin.Anchor, false, Color.DimGray);
renderer.DrawHandle(g, s.End.Anchor, false, Color.DimGray);

// 画手柄点，黑色
renderer.DrawBar(g, s.Begin.Anchor, s.Begin.Handler, Color.Black);
renderer.DrawHandle(g, s.Begin.Handler, false, Color.Black);
renderer.DrawBar(g, s.End.Anchor, s.End.Handler, Color.Black);
renderer.DrawHandle(g, s.End.Handler, false, Color.Black);

// 被选中的手柄点为实心
if (target != null)
    renderer.DrawHandle(g, target.Handler, true, Color.Black);

De cette manière, une courbe de Bézier peut être dessinée, comme illustré à la figure 9. Notez que le point d'ancrage et le point de la poignée coïncident à ce moment, ce qui ressemble à une courbe de Bézier.

Figure 9. La courbe de Bézier dessinée dans le contrôle graphique, le point d'ancrage coïncide avec le point de la poignée

2.2.3 Contrôle

Ce qui précède a réalisé le stockage des données et l'expression d'apparence du segment de courbe de Bézier. Ajoutez-y maintenant des fonctions de contrôle, c'est-à-dire la possibilité de modifier les données. Ici, le curseur de la souris est utilisé pour interagir. La logique d'interaction simple peut être considérée comme suit :

1. Appuyez sur le bouton de la souris, si le point tombe sur une extrémité (ou dans son voisinage), le point doit être marqué comme sélectionné
2. Déplacez le curseur de la souris, si une extrémité est sélectionnée, modifiez les coordonnées de l'extrémité en fonction de la position du curseur
3. Relevez le bouton de la souris pour annuler toutes les sélections de points de terminaison

De cette façon, le contrôle doit être traité dans les événements MouseDown, MouseMoveet MouseUpdu contrôle. Une implémentation simple est illustrée ci-dessous. Notez que la partie sur le déplacement ici ne considère que le point de la poignée, et en fait, le point d'ancrage doit être considéré dans la réalisation complète.

Tout d'abord, utilisez la zone de surveillance du point chaud (c'est-à-dire le voisinage mentionné au point 1) pour élargir légèrement la sélection afin de réduire la difficulté de sélection du curseur. En outre, définissez un pointeur pour pointer vers le point de terminaison sélectionné.

Rectangle rectBegin, rectEnd;
BezierPoint target = null;

Commencez maintenant à gérer les événements d'interaction avec la souris.

// MouseDown，若落点位于某端点邻域内，则将其标记为已选中
if (rectBegin.Contains(e.Location))
    target = s.Begin;
else if (rectEnd.Contains(e.Location))
    target = s.End;

// MouseMove，若有选中状态的端点，则用光标位置更新其坐标
if (target != null) 
	target.ControlPoint = e.Location;

// MouseUp，取消选择
target = null;

De cette manière, la commande de courbe de Bézier représentée sur la figure 8 peut être réalisée.

2.4 Effets supplémentaires

Si vous modifiez le rendu, vous pouvez obtenir plus d'effets d'image, tels que la courbe colorée illustrée à la figure 10.

Figure 10. Démonstration de l'effet d'exécution du contrôle après modification du moteur de rendu

Résumer

La courbe de Bézier est un outil graphique puissant. Dans les systèmes d'exploitation informatiques modernes, il est facile d'implémenter des contrôles de courbe de Bézier interactifs et extensibles en appelant des fonctions de dessin du système. Ce document présente les fonctions de Bézier, les courbes et les méthodes de calcul et de conception associées fournissent une implémentation simple basée sur Windows GDI+ et montrez comment modifier l'apparence des contrôles via le moteur de rendu. Les utilisateurs peuvent connecter plusieurs points d'ancrage pour obtenir des effets de courbe complexes de n'importe quelle échelle. En outre, ils peuvent également utiliser Une méthode de dessin plus efficace optimise le contrôle et ajoute un mécanisme de gestion d'événements personnalisé au contrôle afin qu'il puisse être utilisé dans la pratique commerciale.

(sur)

© 2013-2023 Conmajia

---

1. Voir Algorithme de De Castrio ↩︎

2. Voir courbes de Bézier ↩︎

3. Voir Formes GDI+ : Courbes de Bézier ↩︎