Qt 中实现任意阶贝塞尔曲线绘制 & 动态调节

矫情吗；* 2022-10-22 04:18 359阅读 0赞

### **【写在前面】** ###

Qt 中有相当方便的绘制接口 ( 由 QPainter 提供 ) 。

例如贝塞尔曲线的 API：

QPainterPath 的 quadTo() 和 cubicTo() 然后使用 QPainter::drawPath()。

然而，美中不足的是，Qt 的贝塞尔曲线只支持二次和三次，对于更高阶的似乎就无能为力了。

即便多个 quadTo() 或 cubicTo() 连用的效果也非常不理想。

因此，我想到利用贝塞尔的公式生成曲线点，然后用直线来连接，即可实现**「 N阶贝塞尔曲线绘制 」**。

--------------------

### **【正文开始】** ###

先来看看效果图：

![20210404003559215.gif][]

可以看到，生成的曲线是相当平滑的，我也比较满意。

接下来，讲解其实现：

首先是贝塞尔曲线的生成：

/**
     * @brief createNBezierCurve 生成N阶贝塞尔曲线点
     * @param src 源贝塞尔控制点
     * @param dest 目的贝塞尔曲线点
     * @param precision 生成精度
     */
    static void createNBezierCurve(const QList<QPointF> &src, QList<QPointF> &dest, qreal precision)
    {
        if (src.size() <= 0) return;
    
        //清空
        QList<QPointF>().swap(dest);
    
        for (qreal t = 0; t < 1.0000; t += precision) {
            int size = src.size();
            QVector<qreal> coefficient(size, 0);
            coefficient[0] = 1.000;
            qreal u1 = 1.0 - t;
    
            for (int j = 1; j <= size - 1; j++) {
                qreal saved = 0.0;
                for (int k = 0; k < j; k++){
                    qreal temp = coefficient[k];
                    coefficient[k] = saved + u1 * temp;
                    saved = t * temp;
                }
                coefficient[j] = saved;
            }
    
            QPointF resultPoint;
            for (int i = 0; i < size; i++) {
                QPointF point = src.at(i);
                resultPoint = resultPoint + point * coefficient[i];
            }
    
            dest.append(resultPoint);
        }
    }

关于贝塞尔曲线的公式原理，这里给一篇文章链接：[https://blog.csdn.net/zhulichen/article/details/82888295][https_blog.csdn.net_zhulichen_article_details_82888295]。

有兴趣的可以看看，也没多大难度。

既然生成了曲线点 ( QList<QPointF> &dest 中 ) ，接下来就是绘制和动态调节部分。

如前面所说，使用直线直接连接曲线点即可，具体操作如下：

void BezierCurve::paintEvent(QPaintEvent *event)
    {
        Q_UNUSED(event);
    
        /** 首先绘制控制点 */
        QPainter painter(this);
        painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
        painter.save();
        painter.setBrush(QBrush(Qt::red));
        QFontMetrics metrics(painter.font());
        for (auto i = 0; i < d->m_controlPoints.size(); i++) {
            painter.setPen(Qt::red);
            painter.drawEllipse(d->m_controlPoints.at(i), 10.0, 10.0);
            painter.setPen(Qt::white);
            QString number = QString::number(i);
            auto rect = metrics.boundingRect(number);
            painter.drawText(d->m_controlPoints.at(i) + QPointF(-rect.width() / 2, rect.height() / 2 - 1.0), number);
        }
        painter.restore();
    
        /** 然后绘制贝塞尔曲线 */
        if (d->m_controlPoints.size() >= 2) {
            QPainterPath curve;
            curve.moveTo(d->m_bezierCurve.at(0));
            for (auto i = 1; i < d->m_bezierCurve.size(); i++) {;
                curve.lineTo(d->m_bezierCurve.at(i));
            }
            auto pen = painter.pen();
            pen.setColor(Qt::blue);
            pen.setWidth(2.0);
            painter.setPen(pen);
            painter.drawPath(curve);
        }
    }

1、创建一个 QPainterPath：

> QPainterPath：
> 
> 画家路径是由许多图形构造块（例如矩形，椭圆形，直线和曲线）组成的对象。
> 
> 可以在封闭的子路径中将构建块连接起来，例如以矩形或椭圆形。
> 
> 封闭的路径具有一致的起点和终点。
> 
> 或者它们可以作为未封闭的子路径（例如直线和曲线）独立存在。
> 
> QPainterPath 对象可用于填充，概述和裁剪。
> 
> 要为给定的绘制路径生成可填充的轮廓，请使用 QPainterPathStroker 类。
> 
> 与常规绘图操作相比，画家路径的主要优势在于，复杂的形状只需要创建一次即可。
> 
> 那么仅使用对 QPainter::drawPath() 函数的调用就可以绘制多次。
> 
> QPainterPath 提供了一组函数，这些函数可用于获取有关路径及其元素的信息。
> 
> 另外，可以使用 toReversed() 函数反转元素的顺序，还有一些函数可以将此绘制器路径对象转换为多边形表示。

2、使用 QPainterPath::moveTo() 移动到第一个点 ( 移动到起始点，将会开始一个新路径，关闭上一个子路径 )。

3、使用 QPainterPath::lineTo() 在到下一个点之间添加一条直线 ( 当前位置到给定的端点添加一条直线，绘制直线后，当前位置将更新为直线的终点 )。

4、使用 QPainter::drawPath() 绘制路径的轮廓。

最后，关于动态调节部分，简单讲解一下思路：

void BezierCurve::mousePressEvent(QMouseEvent *event)
    {
        if (event->buttons() & Qt::LeftButton && event->pos().y() > 50) {
            d->m_mousePressed = true;
            if (d->m_completed) {
                d->m_currentControlPointIndex = -1;
                auto pos = event->pos();
                for (auto i = 0; i < d->m_controlPoints.size(); i++) {
                    auto point = d->m_controlPoints.at(i);
                    //判断是否在控制点上
                    if (qAbs(qSqrt(qPow(pos.x() - point.x(), 2) + qPow(pos.y() - point.y(), 2))) < 10.0000) {
                        d->m_currentControlPointIndex = i;
                        break;
                    }
                }
            } else {
                d->m_controlPoints.append(event->pos());
                //控制点增加了，需要更新
                createNBezierCurve(d->m_controlPoints, d->m_bezierCurve, d->m_precision);
                update();
            }
        } else if (event->buttons() & Qt::RightButton) {
            d->m_completed = true;
        }
    }
    
    void BezierCurve::mouseMoveEvent(QMouseEvent *event)
    {
        if (event->buttons() & Qt::LeftButton
                && d->m_mousePressed
                && d->m_currentControlPointIndex != -1
                && event->pos().y() > 50) {
            if (d->m_currentControlPointIndex < d->m_controlPoints.size()) {
                d->m_controlPoints[d->m_currentControlPointIndex] = event->pos();
                createNBezierCurve(d->m_controlPoints, d->m_bezierCurve, d->m_precision);
                update();
            }
        }
    }
    
    void BezierCurve::mouseReleaseEvent(QMouseEvent *event)
    {
        d->m_currentControlPointIndex = -1;
        if (event->buttons() & Qt::LeftButton) {
            d->m_mousePressed = false;
        }
    }
    
    void BezierCurve::keyPressEvent(QKeyEvent *event)
    {
        if (event->key() == Qt::Key_Escape) {
            d->m_completed = false;
            QList<QPointF>().swap(d->m_controlPoints);
            QList<QPointF>().swap(d->m_bezierCurve);
            update();
        }
    }

\- 如果鼠标在控制点上点击了 ( 通过判断是否在圆内确定 )，则找到点击的控制点索引。

\- 如果不在控制点上点击，则添加到控制点中，然后重新生成曲线。

\- 通过移动点击的控制点，然后重新生成曲线，即可实现动态调节的效果。

--------------------

### **【结语】** ###

这次简单写的例子，需要的可以自己慢慢调整和优化。

如果有其他问题 & 错误，欢迎留言 / 评论 / 私信。

最后，附上项目链接(多多star呀..⭐\_⭐)：

CSDN的：[https://download.csdn.net/download/u011283226/16431697][https_download.csdn.net_download_u011283226_16431697]

Github的：[https://github.com/mengps/QtExamples][https_github.com_mengps_QtExamples]

[20210404003559215.gif]: /images/20221022/5d542e8a33f74be6be697a1c146986fe.png
[https_blog.csdn.net_zhulichen_article_details_82888295]: https://blog.csdn.net/zhulichen/article/details/82888295
[https_download.csdn.net_download_u011283226_16431697]: https://download.csdn.net/download/u011283226/16431697
[https_github.com_mengps_QtExamples]: https://github.com/mengps/QtExamples