Control de curva Bezier con manija de control: historia, principio, implementación

© 2013-2023 Conmajia
Actualizado el 9 de marzo de 2023
Iniciado el 22 de febrero de 2015

Resumen Este artículo presenta la historia y los principios básicos de las curvas de Bezier, y toma .NET Frameworks GDI+ como ejemplo para implementar de forma sencilla un control de curva con tiradores de control y estilos extensibles.

1. Introducción

Las curvas con manijas de control se utilizan a menudo en el software de dibujo para ajustar con precisión los valores que cambian continuamente. Las curvas de Bezier se derivan de una familia de ecuaciones de parámetros de curva ampliamente utilizadas en CAD de ingeniería y gráficos por computadora. Pierre Étienne Bézier (Pierre Étienne Bézier, 1910-1999) propuso en 1962, y desarrolló el sistema de modelado UNISURF basado en él (1968).Para obtener detalles sobre las funciones de Bessel, consulte el libro de Bessel My "The Mathematical Foundations of the UNISURF CAD System" (Butterworths, 1986, p. 56).

1.1 Función de Bessel

Las funciones de Bessel son una familia de la forma

$$X^2{años}^{"}+x{y}^{\prime }+\left(X^2-{norte}^2\right)y=0$$

función, donde $n$ es el orden. La solución de esta familia de funciones es

$$y\left(x\right)=AJ{\_}_{}\left(X\right)+POR{\_}_{}\left(X\right),$$

Entre ellos $j_{}\left(x\right)$ se llamafunción de Bessel de primer tipo,$Y_{}\left(x\right)$ se denominafunción de Bessel de segunda clase.

La función de Bessel se puede considerar como una familia de funciones de seno en descomposición, como se muestra en la Figura 1, donde $j_{}\left(0\right)=1$，$Y_{}\left(0\right)=\infty$ .

Figura 1. Gráficas de funciones de Bessel de primera y segunda clase

Usando el método de Frobenius para resolver, podemos obtener,

$$\begin{gathered} j_{}\left(X\right)=\sum _{k=0}\frac{(-1)\_{}^{}}{k!(n+k)!}{\left(\frac{}{2}\right)}^{n+2k} \\ \begin{array}{rl}{Y}_{}\left(X\right)=& \frac{}{Pi}{j}_{}\left(X\right)\left[\mathrm{en}\frac{}{2}+do\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}$$

donde $C\stackrel{.}{=}0.577216$，$\Phi \left(pag\right)=1+\frac{}{2}+\frac{}{3}+\cdots +\frac{}{pag}$，$pag>0$，$\Phi \left(0\right)=0$ _

Entonces se puede considerar como $X\to$La ecuación asíntota de la función de Bessel en$\infty \; se\; aproxima\; como$

$$\begin{array}{rl}{j}_{}\left(X\right)& \sim \sqrt{\frac{}{x\_\_}}\mathrm{porque}\left(X-\frac{}{2}-\frac{}{4}\right)\\ Y_{}(x& \sim \sqrt{\frac{}{x\_\_}}\mathrm{pecado}\left(X-\frac{}{2}-\frac{}{4}\right)\end{array}$$

Además, la función de Hankel (Hankel), que se usa comúnmente en ingeniería, también se denomina función de Bessel de tercer tipo .

$$\begin{array}{rl}{H}_{norte}^{(1}\left(X\right)& \equiv j_{}\left(X\right)+j{Y}_{}\left(X\right)\\ H_{norte}^{(2}(x& \equiv j_{}\left(X\right)-j{Y}_{}\left(x\right)\end{array}$$

donde superíndice ${}^{\left(1\right)}$、${}^{\left(2\right)}$ para el primer y segundo tipo de funciones de Bessel respectivamente Cuando$X\to \infty$ ,

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

Las funciones de Bessel del tercer tipo se utilizan a menudo para tratar problemas gráficos o de ingeniería con múltiples sistemas de coordenadas.

1.2 Curva de Bézier

La base matemática de las curvas de Bezier en realidad proviene de los polinomios de Bernstein publicados en 1912, una familia que lleva el nombre del antiguo matemático soviético Sergei Natanovich Bernstein (серге́й нататнович б. stein polinomios fue propuesto por el ingeniero francés de Citroen Paul de Casteljau (Paul de Casteljau, 1930-2022) en 1959. Debido a que este método fue adoptado por Citroen Registrado como patente, su contenido principal no se reveló hasta la década de 1980, por lo que ahora parece $segundo\left(t\right)={\sum }_{yo=0}^{}{b}_{}{b}_{yo,}La\; curva\; de\; forma\; de\; Bernstein\; de\; (t)$ lleva el nombre de la primera Bezier pública, llamadacurva de Bezier.Donde$b_{}$por $controlo$ puntos,

$$b_{yo,}\left(t\right)=\left(\genfrac{}{}{0ex}{}{}{i}\right)(1-t{)}^{norte-yo}{t}^{yo},$$

es el polinomio base de Bernstein.

1.2.1 Algoritmo de De Castrio

El algoritmo de De Castrio en realidad descompone una sola función de Bernstein en dos curvas de Bezier, $t_{}$La curva at puede obtenerse mediante la siguiente relación de recurrencia,

$$\begin{array}{rl}{b}_i^{(0}& \equiv b_{},i=0,1,\cdots ,norte\\ b_i^{(j}& \equiv b_i^{(j-1}(1-t_{})+b_{yo+1}^{(j-1}{t}_{}\end{array}$$

Entre ellos, para $b_i^{(j}$，有$i=0,1,\cdots ,norte-j$ ,$j=1,2,\cdots ,N.$ En este momento$t_{}$La curva de Bezier en $segundo\_{\_}_{})=b_0^{(n}$, y se puede descomponer en

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

La ventaja del algoritmo de de castrio es que tiene las características de estabilidad numérica, y la desventaja es que es menos eficiente que el cálculo directo.La siguiente es una implementación simple del algoritmo de de castrio en lenguaje Python, para referencia de los lectores ¹ .

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 Curva de Bézier ²

Como se mencionó anteriormente, $La\; fórmula\; general\; de\; la\; curva\; de\; Bézier\; de\; orden\; n$ es

$$segundo\left(t\right)=\sum _{yo=0}{b}_{}{b}_{yo,}\left(t\right),$$

donde $t\in [0,1]$ Obviamente, cuando$norte=1$ , se puede obtener una curva de Bezier

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

Su gráfico es el punto final de $b_{}$Movimiento a $b_{}$La línea recta, como se muestra en la Figura 2, también se llama curva de Bezier lineal. Tenga en cuenta que $b_{}$Usar ${PAG}_{}$significa, lo mismo a continuación.

Figura 2. Una curva de Bezier

$norte=2$ , segundo$segundo\left(t\right)=(1-t{)}^{2b}{\_}_{}+2t(1\_-t){segundo}_{}+t^{2b}{\_}_{}$es un punto en movimiento $q_{}$、$q_{}$- también conocido como punto intermedio - ya que $b_{}$Movimiento a $b_{}$formulario, como se muestra en la figura 3.

Figura 3. Curva de Bézier cuadrática

Las fuentes TrueType comúnmente utilizadas en los sistemas informáticos se implementan mediante curvas Bezier cuadráticas.

cuando $norte=3$ o superior, para construir$n$ veces la curva de Bezier, es necesario introducir$\left(\genfrac{}{}{0ex}{}{}{norte-1}\right)$ puntos intermedios La figura 4 demuestra el proceso de construcción de curvas de Bézier cúbicas y cuarticas.

Primero

Segundo

Figura 4. (A) Curva de Bézier cúbica, (B) Curva de Bézier cuartica

Los gráficos y animaciones anteriores se realizan mediante el algoritmo de De Castrio.

2 Controles de diseño basados ​​en curvas Bezier

Todos los sistemas operativos de gráficos comunes actualmente en el mercado tienen funciones integradas para dibujar curvas de Bezier en sus sistemas de gráficos Tomando Windows como ejemplo, su sistema de gráficos GDI/GDI+ implementa una curva de Bezier de cuatro puntos como se muestra en la Figura 5. Eso es , en la curva de Bezier cúbica, $b_{}$y $b_{}$utilizados respectivamente como $b_{}$y $b_{}$La mano de control de En la expresión de la curva, $b_{}$、$b_{}$、$b_{}$、$b_{}$Correspondientes a los puntos "Primero", "Segundo", "Tercero" y "Cuarto" del gráfico respectivamente.

Figura 5. Curvas de Bezier en gráficos por computadora

2.1 Dibujar una curva Bezier ³

Al llamar a las funciones envueltas en GDI+ para dibujar curvas Bezier cúbicas 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);

Los usuarios pueden dibujar fácilmente la curva Bezier deseada en el formulario.La figura 6 se dibuja con el siguiente código.

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);
}

Figura 6. Curva de Bezier dibujada por GDI+

2.2 Definir la curva Bezier en el control gráfico

Para realizar la función de interacción gráfica entre el usuario y el control, primero maneje los puntos de control de la curva Bézier cúbica. Si se expresa en el concepto de "Modelo-Vista-Control" (MVC), el control gráfico de la curva Bézier aquí puede diseñarse de acuerdo con los siguientes capítulos.

2.2.1 Modelo

Se puede ver en los capítulos anteriores que la curva de Bézier cúbica tiene 2 puntos finales y 2 puntos intermedios, como se muestra en la Figura 7, que se denominan puntos de anclaje (anclaje) y puntos de control (manejador) respectivamente.

Figura 7. Los puntos finales en el control de la curva Bezier, los puntos de control en la figura son los puntos de manejo descritos en el texto

Los puntos finales de la curva de Bézier se definen de la siguiente manera:

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

El punto final de cada curva de Bezier contiene un punto de anclaje y el punto de control correspondiente, es decir, $({segundo}_{},b_{})$ o$({segundo}_{},b_{})$ Entonces, un segmento de curva Bézier cúbico se puede definir como:

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

Al cambiar la posición del punto de anclaje y la posición del punto de control, se puede realizar una curva Bezier de cualquier forma, y ​​su efecto de uso debe ser como se muestra en la animación de la Figura 8.

Figura 8. Aspecto del control de la curva Bezier controlable y demostración interactiva

2.2.2 Vistas

La apariencia de la curva es independiente de los puntos finales de la curva y se puede dibujar utilizando un renderizador escalable independiente, como el siguiente renderizador simple:

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);
    }
}

Este renderizador solo brinda la capacidad de personalizar el color de cada punto y el color de la línea de conexión desde el punto de control hasta el punto de anclaje. Aquí hay un ejemplo de cómo usarlo:

// 画曲线
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 esta forma, se puede dibujar una curva Bezier, como se muestra en la Figura 9. Tenga en cuenta que el punto de anclaje y el punto de control coinciden en este momento, lo que se parece a una curva Bezier.

Figura 9. La curva Bezier dibujada en el control de gráficos, el punto de anclaje coincide con el punto de control

2.2.3 Mando

Lo anterior ha realizado el almacenamiento de datos y la expresión de apariencia del segmento de la curva de Bezier. Ahora agregue funciones de control, es decir, la capacidad de modificar datos. Aquí, el cursor del mouse se usa para interactuar. La lógica de interacción simple puede considerarse como sigue:

1. Presione el botón del mouse, si el punto cae en un punto final (o dentro de su vecindad), el punto debe marcarse como seleccionado
2. Mueva el cursor del mouse, si se selecciona un punto final, modifique las coordenadas del punto final de acuerdo con la posición del cursor
3. Levante el botón del mouse para cancelar todas las selecciones de puntos finales

De esta manera, el control debe procesarse en los eventos MouseDown, MouseMovey MouseUpdel control. A continuación se muestra una implementación simple. Tenga en cuenta que la parte sobre el movimiento aquí solo considera el punto de control y, de hecho, el punto de anclaje debe considerarse en la implementación completa.

Primero, use el área de monitoreo del punto de acceso (es decir, el vecindario mencionado en 1) para expandir ligeramente la selección para reducir la dificultad de la selección del cursor. Además, defina un puntero para apuntar al punto final seleccionado.

Rectangle rectBegin, rectEnd;
BezierPoint target = null;

Ahora maneje los eventos de interacción del mouse.

// 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 esta forma, se puede realizar el control de la curva de Bezier que se muestra en la Figura 8.

2.4 Efectos adicionales

Si modifica el renderizador, puede obtener más efectos de imagen, como la curva de color que se muestra en la Figura 10.

Figura 10. Demostración del efecto de ejecución del control después de cambiar el renderizador

Resumir

La curva de Bezier es una poderosa herramienta gráfica. En los sistemas operativos de las computadoras modernas, es fácil implementar controles de curva de Bezier interactivos y extensibles llamando a las funciones de dibujo del sistema. Este documento presenta las funciones de Bezier, las curvas y los métodos de computación y diseño relacionados brindan una implementación simple basada en Windows GDI+, y demostrar cómo cambiar la apariencia de los controles a través del renderizador. Los usuarios pueden conectar múltiples puntos de anclaje para lograr efectos de curvas complejas de cualquier escala. Además, también pueden usar Un método de dibujo más eficiente optimiza el control y agrega un mecanismo de manejo de eventos personalizado al control para que pueda ser utilizado en la práctica comercial.

(encima)

© 2013-2023 Conmajía

---

1. Ver Algoritmo de De Castrio . ↩︎

2. Ver curvas de Bézier . ↩︎

3. Ver Formas GDI+: Curvas Bezier ↩︎