Qt鼠标/触屏绘制平滑曲线(支持矢量/非矢量方式)-创新互联

前言

Qt通过鼠标或者触屏，实时绘制平滑曲线，通常有两种方式实现：矢量绘图和非矢量绘图，这两种画线方式从实现上有些不同，其原理也不太一样，稍后会做详细介绍。而鼠标或者触屏画线也不大一样，通常如果只实现鼠标画线的话，那么只需要重新实现鼠标事件即可（mousePressEvent、mouseMoveEvent、mouseReleaseEvent)，而要在触控屏上画线，如果需要支持多点画线的话，就必须处理QTouchEvent事件才行，但是如果触屏上只支持单点画线，那也可以直接实现鼠标事件，因为第一个触点的事件会同时进入到QTouchEvent和Mouse事件中。QTouchEvent中可以区分出多点时每个触点的id，通过id进行区分每个点的数据。

通常情况下，为了提升绘图效率，要实现这种绘图的功能，都是用QGraphics体系来完成，因为QGraphics刷新机制和QWidget不太一样，它可以做区域刷新，这样能保证效率更高，特别是针对一些分辨率较高的设备，就很明显了。具体这两个体系间的区别就不在这里进行描述。

所以，接下来为了演示矢量和非矢量画图方式，我们在QGraphics体系中实现一个简单的画板程序。注重画线效率，保证线条平滑无折线，无锯齿，支持多点画线。

效果图

先开看看非矢量绘图的效果：

再看矢量绘图效果：

二者区别

通过上面的两个图对比，相信大家已经看出了一些区别。我们再详细介绍一下这两者的区别。

非矢量绘图

• 优点：速度快。非矢量绘图原理是直接在一张图片上进行绘制，其渲染速度很快，即便是画了很多线条， 也不会有卡顿的效果，擦除时同样很快。
• 缺点：缩放失真。由于非矢量绘图是在图片上渲染，当缩放图片时，会导致线条模糊不清晰，如果只是小范围的缩放还能接受，无限缩放的话就会很明显了。

矢量绘图

• 优点：无限缩放，不失真。矢量绘图是将点数据绘制生成一个单独的对象，当进行缩放的时候，会重新进行渲染，所以矢量绘图的方式不会导致图像失真。
• 缺点：线条多时会卡顿，擦除尤其明显。由于矢量绘图是生成一个单独的对象，所以当画线多的情况下，会触发所有有交集的对象进行刷新，擦除的时候，会去计算线条之间的交集并做删减，这个过程会很慢，并且会将整个对象item进行刷新，所以卡顿明显（上述效果图就可以看出来了）。

通过以上两者的优缺点对比，根据实际需要进行选择实际的画线模式。

解决实时绘图折线问题

折线效果：

可以看到上述画线有很明显的折线，线条不平滑。

通常绘制这种线条，第一反应想到的是讲两个点直接连接起来行成一条直线，但是，由于两点之间距离比较大，特别是触控屏，点与点之间并不是很密集，因为上层应用在主线程渲染的时候，系统会自动丢弃一些数据点，即便是底层上报的点很多，上层应用接收到的点也会减少，所以不能直接用连接两点的方式来实现。

那么，该怎么解决呢？
绘制贝塞尔曲线。

在move的过程中实时生成贝塞尔曲线path，这样就能保证线条无折线。QPainterPath支持贝塞尔曲线绘制，参加以下函数：

void QPainterPath::quadTo(const QPointF &c, const QPointF &endPoint)

Adds a quadratic Bezier curve between the current position and the given endPoint with the control point specified by c.
After the curve is added, the current point is updated to be at the end point of the curve.

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。