本文主要是介绍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 中实现任意阶贝塞尔曲线绘制 动态调节的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!