34——Concentric Circles Example
最后更新于：2022-04-01 07:22:22
本系列所有文章可以在这里查看[http://blog.csdn.net/cloud_castle/article/category/2123873](http://blog.csdn.net/cloud_castle/article/category/2123873)
接上文[](http://blog.csdn.net/cloud_castle/article/details/39251931)[Qt5官方demo解析集33——Qt Quick Examples - Window and Screen](http://blog.csdn.net/cloud_castle/article/details/39291069)
好像有一段时间没有更新这个系列了，一方面是很多的事掺杂着一起来了，稍微比原来忙了一些；但时间哪有挤不出来的呢，所以更重要的一个原因其实是很难找到一个特别合适的Demo来做这个主题。有的Demo内容很偏很少项目在做，有的Demo又过于基础，我总希望能挑出一些大家经常能接触得到又需要了解的知识点~
因为Qt的每一个官方Demo都有一个关注的点，每次把所有的代码都贴出来可能这个系列的重复部分会越来越多。。。所以从本文开始，我们只把关键代码挑出来浓墨重彩地介绍一下(*^__^*)
好了，废话少说，进入今天的正题吧：Concentric Circles Example
大家都知道在Qt里面绘制一个椭圆可以在paintEvent()中使用
~~~
painter.drawEllipse(QRect(-diameter / 2, -diameter / 2, diameter, diameter));
~~~
那么我们这样绘制多个同心圆的效果大概像下面这样：
（在放大镜效果下对Demo运行效果的截图）
首先让我们将这及其不圆润的边缘放在一边，细心的你可能会发现，这些同心圆总是两两之间挨得特别近，而我们明明是绘制的等距的同心圆？其实答案很简单，它就是对整型坐标值进行计算后四舍五入得到的结果。知道问题的来源后，解决起来就容易了。
Qt很贴心地为我们提供了另一个接受QRectF()参数的drawEllipse():
~~~
painter.drawEllipse(QRectF(-diameter / 2.0, -diameter / 2.0, diameter, diameter));
~~~
看看有没有好一点？一方面我们确实得到了等距的同心圆，另一方面也显得圆润了些，上图中那么显眼的直线也没那么长了。
如果想要进一步得到更加圆润的圆，我们可以设置painter的抗锯齿效果QPainter::Antialiasing，简单点说它是通过采样算法将在图形边缘会造成锯齿的像素与周围的像素作一个平均的运算，并增加像素的数目，这样来形成区域像素点的平滑过渡的效果。不过，这样做的副作用是图像会显得有些模糊。
drawEllipse(QRect()) + 抗锯齿：
~~~
painter.setRenderHint(QPainter::Antialiasing);
painter.drawEllipse(QRect(-diameter / 2, -diameter / 2, diameter, diameter));
~~~
drawEllipse(QRectF()) + 抗锯齿：
~~~
painter.setRenderHint(QPainter::Antialiasing);
painter.drawEllipse(QRectF(-diameter / 2.0, -diameter / 2.0, diameter, diameter));
~~~
最后我们还是看下整个程序的界面吧：
