Qt本身提供给我们丰富的控件资源,然而它原生态的UI外观却并不是很美观,所以在应用程序当中经常需要去定制控件以及窗口的外观。下面就来聊聊关于Qt Widget控件外观的自绘吧。Qt的图形绘制分为2D图形和3D图形,本篇章主要介绍2D绘图。
Qt控件外观的定制,一般有两种方法。简单一点的,可以通过样式表setStyleSheet来实现,这种方式比较适合初学者,简单的定义就可以得到大部分应用程序所需要的UI外观界面。如果你曾经去研究过Qt的源码,就会发现,Qt控件本身的自绘,基本上都是基于Qstyle子类drawPrimitive来实现的。如果我们想将外观做的复杂点,更具有独特性,有时候即使用上qss, 也还是无法实现,这个时候就需要用到Widget控件外观的自绘。在讲Qt基础学习视频中,我并没有重点讲解自绘,其原因就是因为对于初学者,它具有一定的难度,还有就是自绘控件前,我们需要了解控件本身的特性,只有当我们基本上熟悉了Qt的控件,你自绘控件外观才能真正入门。
所谓Qt控件自绘,就是在paintEvent事件中去完成一系列的绘图,我们可以在paintEvent中取得控件的画布,得到画布的大小,然后用我们的手,拿起笔或者是刷子,绘制出想要的图案。也许大家觉得我说的太简单了,但自绘控件确实就是如此,当你真正了解了控件本身的特性,熟悉了画笔、画刷的知识后,你一定也可以从容的定制控件你特有的控件。下面就来说说关于自绘控件需要掌握的基本知识吧。
QPainter类:
Qt中提供了强大的2D绘图系统,可以使用它的API在屏幕和绘图设备上进行绘制,它主要基于QPainter、QPaintDevice和QPaintEngine这三个类。一般我们只需要去学习QPainter类,它主要用于绘制一些基本图形元素(点、直线、圆形、矩形、曲线、文字,图片)。我们只需要在函数paintEvent中自绘前,去定义它的变量就可以使用。
![b39c70720b4232e3367e02b4af3288d2.png](https://i-blog.csdnimg.cn/blog_migrate/d699f2743ccab22d8584fe09fe17c18d.jpeg)
![3e56cf0f40f3b1bfbe66081c664e7f7b.png](https://i-blog.csdnimg.cn/blog_migrate/72f0ab8811879c07150ab17fec6c61fd.jpeg)
![bb7765c0668b6dad2e2654fb80261bf3.png](https://i-blog.csdnimg.cn/blog_migrate/316bc0821a36335aaafae59773f3c98a.jpeg)
大家看是不是特别简单,定义一个绘图的笔QPainter,我们很快就画出了一个简单的渐变矩形。当然,知道了绘图类之后,接下来就需要重点了解QPainter绘图3个主要的属性:
1) pen属性:是一个QPen对象,用于控制线条的颜色、宽度、线型
2) brush属性 :是一个QBrush对象,用于一个区域的填充特性,可以设置填充颜色、填充方式、渐变特性等
3) font属性:是一个QFont对象,用于绘制颜色的时候,设置文字的字体样式、大小属性
当然它还有叠加 旋转和缩放等其它特性,由于篇幅原因,这里就不多做叙述了。
QPen类:
QPen用于绘图时对线条的设置,主要包括线宽,颜色,线型等,QPen类的主要接口函数,通常一个设置函数都有一个对应的读取函数。通过Qpen,我们可以很轻松的设置QPainter画笔的颜色,线条粗细。
setColor(QColor &color)
设置画笔颜色 线条颜色
setWidth(int width)
设置线条宽度
setStyle(Qt::PenStyle style)
设置线条样式
例如当我们绘制控件的外边框,就可以利用QPen如下实现。
::paintEvent(QPaintEvent *e)
{
QPainter painter(this)//绘制与绘图设备关联的QPainter对象
Qpen pen; //定义画笔
pen.setColor(Qcolor(255,0,0)); //设置红色画笔
painter.setPen(pen); //关联画笔
//painter在设备的窗口上绘制边框
painter.drawRect();
}
QBrush类:
QBrush 用于绘图时填充特性:填充颜色(甚至是渐变色)、填充样式、材质填充时的材质图片,我们可以把它当着一把刷子,定义Qbrush的颜色就好比将刷子浸上不同的颜料,如果我们同样调用painter.drawRect(),那么就是填充这块区域。也就是说,画刷就是一个实心的区域,画笔就是外边框。它的用法几乎和Qpen一样。
::paintEvent(QPaintEvent *e)
{
QPainter painter(this)//绘制与绘图设备关联的QPainter对象
QBrush brush = QBrush(QColor(0,0,255)); //定义蓝色画刷
painter.setPen(Qt::NoPen); //设置关联空画笔
painter.setBrush(brush); //设置关联画刷
//painter在设备的窗口上绘制边框
painter.drawRect();
}
![481aeb18b09dfcbea73ce6071ddf14f4.png](https://i-blog.csdnimg.cn/blog_migrate/8cf0fa155f125eb418289e6b7654eff9.jpeg)
QFont类:
QFont用于绘图文本时,设置文本的字体名称(family),字体的大小,我们只需要利用“painter.setFont”把Qfont的变量设置到Qpainter中就可以使用。这里要提醒初学者,字体的颜色设置并不是在QFont中,Qpainter利用函数“drawText”绘制出文本的颜色,就是画笔(QPen)的颜色,改变画笔的颜色,文本的颜色也相应的改变。
掌握这些知识后,我们就可以开始绘制控件了。以按钮为例,当鼠标按下,在mousePressed函数中设置的变量表示鼠标按下,然后调用update函数,通知widget调用paintEvent进行外观绘制,这时候判断表示鼠标是否按下的变量,设置一个亮一点的颜色画刷,绘制一个矩形;当鼠标松开在mouseRelease函数中设置的变量表示鼠标送来,同样调用update函数,通知widget进行外观绘制,这时候在paintEvent函数中判断鼠标是否按松开,设置一个暗一点的颜色画刷,绘制一个矩形。就初步实现了简单的按钮绘制。
如果大家都有兴趣,也可以在文章下留言,我将实例剖析并绘制一个漂亮的按钮。当然,如果有不足之处,请大家多多指正。抛砖引玉,和大家一起交流学习,写的不好,也请大家不要笑。走过,路过,请留下你的足迹。喜欢的朋友帮忙点赞转发,谢谢大家。