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

本文主要是介绍Qt 中实现任意阶贝塞尔曲线绘制 动态调节，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

【写在前面】

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

        例如贝塞尔曲线的 API：

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

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

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

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

---

【正文开始】

        先来看看效果图：

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

        接下来，讲解其实现：

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

/*** @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);}
}

        关于贝塞尔曲线的公式原理，这里给一篇文章链接：          。

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

        既然生成了曲线点 ( 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的：Qt中实现任意阶贝塞尔曲线绘制&动态调节_qtquadto-C++文档类资源-CSDN下载

        Github的：https://github.com/mengps/QtExamples

这篇关于Qt 中实现任意阶贝塞尔曲线绘制 动态调节的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---