Qt触屏画线平滑：从采样点到贝塞尔曲线与位图绘制

简介这份资源面向使用 Qt 进行绘图开发的工程师与学习者聚焦鼠标与触屏实时绘制平滑曲线这一常见需求系统讲解矢量与非矢量两种实现路径的差异与取舍。压缩包内为 1 个 PDF 文档约 87KB内容围绕 QGraphics 体系展开涵盖 QTouchEvent 多点触点 id 区分、mousePressEvent 等鼠标事件处理以及用 QPainterPath::quadTo 生成二次贝塞尔曲线消除折线的思路。文中还对比了矢量绘图无限缩放不失真但线条多时易卡顿、非矢量绘图速度快却缩放模糊的优缺点并给出双缓冲绘制的折中方案press 时建 path、move 中动态追加并在临时层非矢量绘制、release 后生成完整矢量 path。已有 883 人学习适合希望提升画线效率与平滑度的开发者参考。1. 触屏画线为什么总像折线从采样点到平滑曲线的距离在 Qt 里做鼠标或触屏绘制很多人第一次跑通之后都会遇到同一个尴尬手指划过去明明是一条弧线松手一看却是一段一段的折线拐点生硬放大之后更明显。这不是 Qt 的锅而是我们把「采样点」直接当成了「曲线」——鼠标和触屏事件给到的是一串离散坐标相邻两点之间用drawLine连起来本质上就是折线。想让笔迹顺滑中间必须补一层曲线拟合或插值。这个标题要解决的就是这件事在 Qt 的QWidget或QGraphicsScene上把鼠标/触屏的原始点列变成视觉上平滑的曲线并且区分两种落地方式——矢量方式保留可缩放的路径数据适合白板、标注、签名和非矢量方式直接往位图上画适合涂鸦、笔刷、性能优先的场景。适合谁正在做电子白板、手写批注、画板类工具或者单纯被触屏折线折磨过的 Qt 开发者。下面按「先能画、再画顺、再画对」的顺序拆开讲。2. 先把点收对鼠标与触屏事件的采样与去噪2.1 事件从哪来坐标怎么拿Qt 里鼠标和触屏走的是两套事件但最终都能归一到「一个带位置的按下/移动/抬起」序列。鼠标是mousePressEvent/mouseMoveEvent/mouseReleaseEvent触屏在 Qt 5.15 之后推荐用QTouchEvent或者干脆开启Qt::WA_AcceptTouchEvents后统一处理。我一般会写一个内部结构体存点避免直接操作事件对象struct StrokePoint { QPointF pos; // 逻辑坐标已经过 widget 变换 qint64 t; // 时间戳用于后续速度/压感估算 }; // 在 widget 构造函数里 setAttribute(Qt::WA_AcceptTouchEvents, true); setMouseTracking(true); // 鼠标不按下也能收到 move方便悬停预览逻辑说明pos存的是经过mapToScene或自身坐标系转换后的点不要存屏幕全局坐标否则窗口一移动整条线就错位。t用QDateTime::currentMSecsSinceEpoch()或QElapsedTimer取后面做速度相关的笔宽变化会用到。参数上setMouseTracking(true)只在需要悬停反馈时开纯绘制场景可以不开省一点事件开销。触屏事件里要特别注意一点QTouchEvent的touchPoints()可能一次给你多个点多指做单笔绘制时只取id稳定的那一个否则多指同时按会画出鬼画符。常见做法是记录第一个按下的 touch id后续只认它抬起时清空。2.2 去噪别让抖动点毁掉整条曲线原始点列里有两类噪声必须处理。第一类是重复点或极近点触屏在手指几乎不动时会疯狂上报同一个坐标这些点进拟合会算出零长度切线导致曲线局部打结。第二类是抖动点手抖或触控采样噪声让点在小范围内跳。处理方式很简单在收点阶段就过滤void addPoint(const QPointF p, qint64 t) { const qreal minDist 1.5; // 逻辑像素按 DPI 可调 if (!pts.isEmpty()) { QPointF d p - pts.last().pos; if (QLineF(pts.last().pos, p).length() minDist) return; // 太近丢弃 } pts.append({p, t}); }逻辑说明minDist是去噪阈值太小起不到作用太大会让快速划过的短笔画丢细节。经验值在 1.02.5 逻辑像素之间高 DPI 屏可以适当放大。注意这个过滤只针对「收点」不要拿去改已经画出来的历史否则重绘时点列和显示不一致。如果做的是签名类应用阈值要更保守宁可留噪也不能丢笔锋。提示去噪阈值和后面平滑算法的窗口大小是两回事别用一个参数同时管两件事调起来会互相打架。3. 矢量方式用 QPainterPath 和贝塞尔把点连成曲线3.1 为什么矢量方式值得优先考虑矢量方式的核心是不直接画线而是把点列拟合成一条QPainterPath路径里存的是贝塞尔控制点。好处有三个——缩放不糊、可以随时改笔宽和颜色重绘、能做撤销重做存路径比存位图省内存。代价是每次移动都要重建路径点多了会有性能压力所以适合「一笔一笔存、按需重绘」的白板/标注场景不适合每秒几千点的密集涂鸦。拟合的常见做法是二次贝塞尔平滑把每个采样点当作控制点取相邻两点的中点作为曲线端点这样曲线会自然穿过中点附近视觉上非常顺。这是很多画板工具在用的经典套路实现短、效果好。3.2 二次贝塞尔平滑的最小实现QPainterPath buildSmoothPath(const QVectorStrokePoint pts) { QPainterPath path; if (pts.size() 2) return path; path.moveTo(pts[0].pos); if (pts.size() 2) { path.lineTo(pts[1].pos); return path; } // 以相邻点中点为端点原始点为控制点 for (int i 1; i pts.size() - 1; i) { QPointF mid (pts[i].pos pts[i 1].pos) * 0.5; path.quadTo(pts[i].pos, mid); } // 收尾最后一段直接连到最后一个点 path.lineTo(pts.last().pos); return path; }逻辑说明quadTo(control, end)是二次贝塞尔控制点用当前采样点终点用当前点和下一点的中点。这样每一段曲线都平滑衔接不会出现折角。收尾用lineTo是因为最后一个点没有「下一点」来算中点直接连过去视觉上几乎看不出来。参数上这段代码没有可调参数但点的密度直接影响效果——点太稀比如快速划动时事件丢帧中点法会显得圆钝点太密则计算量上升。可以在收点时按最小距离过滤天然控制密度。如果要更高质量可以升级到三次贝塞尔cubicTo用 Catmull-Rom 转 Bezier 的方式算控制点曲线更贴合原始轨迹但代码量和调参成本都上一个台阶。多数白板场景二次足够。3.3 矢量路径的重绘与性能边界矢量方式的重绘策略很关键。不要每次mouseMoveEvent都update()整个 widget那样点一多就卡。常见做法是分层已完成的笔画画在一个离屏QPixmap缓存里当前正在画的这一笔单独在paintEvent里实时构建路径绘制。松手时把当前笔画「烘焙」进缓存然后清空当前路径。void paintEvent(QPaintEvent*) { QPainter p(this); p.drawPixmap(0, 0, cachePixmap); // 历史笔画 if (currentPts.size() 2) { QPainterPath path buildSmoothPath(currentPts); QPen pen(Qt::black, 3, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin); p.setRenderHint(QPainter::Antialiasing, true); p.setPen(pen); p.drawPath(path); } }逻辑说明cachePixmap是历史笔画的位图缓存当前笔画用矢量路径实时画兼顾流畅和清晰。RoundCap和RoundJoin必须开否则笔画端点和拐角是方的平滑感大打折扣。Antialiasing也要开不然曲线边缘有锯齿。性能边界大概在单笔几千点以内没问题超过之后buildSmoothPath的循环会成为瓶颈这时要么降采样要么改用非矢量方式。4. 非矢量方式直接往位图上画与笔刷平滑4.1 什么场景该放弃矢量非矢量方式就是直接在QImage或QPixmap上用QPainter画线不保留路径数据。它的优势是快、内存可控、实现简单适合涂鸦板、笔刷类工具、需要实时滤镜的场景。缺点也明显缩放会糊、无法无损改笔宽、撤销重做要靠存快照或差分位图。判断标准很简单——如果你的应用需要「画完之后还能选中某条线改颜色」走矢量如果只是「画上去就完事」非矢量更省心。4.2 位图绘制的平滑技巧非矢量方式下平滑主要靠两件事一是插值补点二是笔刷本身的圆滑。插值补点是在两个采样点之间按固定步长插入中间点让drawLine的段足够短视觉上就连续了。更讲究的做法是用QPainterPath构建路径后drawPath到位图上等于借用了矢量拟合的平滑效果只是不保留路径。void drawToImage(QImage img, const QPointF from, const QPointF to, qreal width) { QPainter p(img); p.setRenderHint(QPainter::Antialiasing, true); QPen pen(Qt::black, width, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin); p.setPen(pen); p.drawLine(from, to); } // 插值补点在 from 到 to 之间按 step 插入 void interpolateAndDraw(QImage img, const QPointF from, const QPointF to, qreal width, qreal step) { qreal len QLineF(from, to).length(); if (len step) { drawToImage(img, from, to, width); return; } int n static_castint(len / step); QPointF prev from; for (int i 1; i n; i) { QPointF cur from (to - from) * (qreal(i) / n); drawToImage(img, prev, cur, width); prev cur; } }逻辑说明step是插值步长越小越平滑但越慢经验值 13 逻辑像素。width是笔宽配合RoundCap让相邻线段衔接处圆润。注意每段都新建QPainter开销不小实际项目里应该把QPainter提到外层复用这里为了讲清楚逻辑才拆开写。位图方式还有个坑QImage的格式要选Format_ARGB32_Premultiplied否则半透明笔刷叠加时边缘会出现黑边。4.3 笔宽随速度变化的实现思路很多手写工具会让笔宽随划动速度变化快则细、慢则粗模拟真实笔触。这在非矢量方式里很好做因为每段独立绘制。速度用相邻点的时间戳算qreal speed QLineF(prev.pos, cur.pos).length() / qMaxqint64(1, cur.t - prev.t); // 像素/毫秒 qreal width qBound(1.0, 6.0 - speed * 2.0, 6.0);逻辑说明speed越大笔越细qBound把笔宽限制在 16 之间避免极端值。系数 2.0 需要按实际手感调不同设备采样率不一样。这个技巧在矢量方式里也能用但要在构建路径时按段设置不同笔宽得拆成多段路径分别绘制复杂度高不少。5. 避坑与排查平滑曲线落地时最容易翻车的五件事5.1 曲线在拐弯处打结或自交现象快速画一个锐角曲线在拐点处出现小圈或交叉。原因中点法在相邻点距离差异很大时控制点离中点太远贝塞尔曲线会过冲。解决在收点阶段限制相邻点最大距离超过就插入中间点或者改用 Catmull-Rom 这类更稳定的拟合。我一般会在addPoint里加一个最大距离判断超过阈值就线性插几个点进去。5.2 触屏上画出来的线和手指位置有偏移现象手指按在 A 点线却从 A 旁边开始。原因高 DPI 屏下逻辑坐标和物理坐标没对齐或者QTouchEvent的坐标没经过mapFromGlobal转换。解决统一在 widget 坐标系里处理触屏点用event-touchPoints().first().pos()后不要再做二次变换同时检查devicePixelRatio位图缓存要按比例放大否则会糊。5.3 画久了越来越卡现象前几十笔流畅后面每画一笔都卡顿。原因矢量方式下每次重绘都重建所有历史路径或者位图方式下每帧全图重绘。解决矢量方式用离屏缓存烘焙历史笔画位图方式只重绘脏区域update(rect)传局部矩形。另外检查有没有在paintEvent里做QImage拷贝那是性能杀手。5.4 撤销之后曲线和点列对不上现象撤销一步画面回退了但再画一笔时接上了被撤销的点。原因撤销只清了显示缓存没清点列或路径栈。解决把「点列/路径」和「显示缓存」当成同一份状态的两个视图撤销时同步回退。常见做法是维护一个QVectorStroke每笔存点列或路径撤销就是pop_back后整体重绘。5.5 半透明笔刷叠加出现黑边现象用带透明度的笔刷画重叠处发黑。原因QImage格式不是预乘 alpha或者QPainter合成模式不对。解决位图用Format_ARGB32_Premultiplied绘制时setCompositionMode(QPainter::CompositionMode_SourceOver)。如果做橡皮擦用CompositionMode_Clear或DestinationOut别用白色画笔糊弄。6. 进阶把平滑曲线做成可复用的绘制引擎走到这里基本能画出顺滑的线了。但如果你要做的是一个长期维护的绘制模块我建议再往前一步把「采样、去噪、拟合、渲染、缓存、撤销」拆成独立职责用一个StrokeEngine类统一管理。这样矢量/非矢量只是渲染策略的差异上层逻辑不用改。一个我常用的验证方法是准备一组固定的测试点列比如一个圆、一个 S 形、一个锐角分别用矢量和非矢量方式渲染截图对比。圆看有没有棱角S 形看曲率连不连续锐角看有没有过冲。这比肉眼随手画靠谱得多也方便回归测试。参数上我一般会暴露这几个给上层调去噪最小距离1.02.5、插值步长13、笔宽范围16、平滑开关。默认值按触屏笔记本调换到数位板或手机再微调。别小看这几个参数它们直接决定手感而手感这东西用户说不出来但一摸就知道。血泪经验是不要一开始就追求「完美拟合」先把采样和去噪做扎实平滑算法用最朴素的中点法跑通之后再按场景升级。我见过太多项目在拟合算法上反复折腾最后发现卡顿的根源是每帧全图重绘。先让线能画、不卡、不丢点再谈曲线优不优雅。希望帮到你。本文还有配套的精品资源点击获取