Qt中绘制蚂蚁线

提要

如果有用过PS的选区工具应该就会知道蚂蚁线是什么东西了，就是用来表示选区的一种虚线，关键还是要动态的！

Qt 中自带的一个例子就有各种描边的演示，但是最终达到的效果只能是一个静态的描边，根本不够炫酷，So.还是自己来实现以下。

先看下最终的结果:

是可以动起来的哈，只不过截图是静态的。最终实现的效果和PS中的选区工具完全一样。

分析

输入

一个QRect

输出

动态的黑白相间的蚂蚁线描边。（注意是黑色和白色，不是黑色和透明）

解决方案

创建一个画布大小的QImage，然后找到边缘的像素，挨个填充像素。最后用painter.drawImage将这个Image绘制在最上面就可以了。

动画的效果通过QTimer，设定一个计时器，然后不断repaint就可以了。

代码实现

头文件中声明一些成员变量

[cpp]  view plain copy

1. int borderOffset;  
2. bool isBlackStart;  
3. QTimer *repaintTimer;  

计时器的初始化

[cpp]  view plain copy

1. repaintTimer = new QTimer();  
2. repaintTimer->setInterval(380);  
3. repaintTimer->start();  
4. connect(repaintTimer, SIGNAL(timeout()), this, SLOT(updateSelectionBorder()));  

对应的槽函数

[cpp]  view plain copy

1. void Canvas::updateSelectionBorder()  
2. {  
3.     borderOffset++;  
4.     if (borderOffset > 4)  
5.     {  
6.         borderOffset = 0;  
7.         isBlackStart = !isBlackStart;  
8.     }  
9.     this->repaint();  
10. }  

最最重要的绘制边框函数

[cpp]  view plain copy

1. void Canvas::paintSelectionBorder(QPainter &painter)  
2. {  
3.     int startX = selectionRect.startPoint().x();  
4.     int startY = selectionRect.startPoint().y();  
5.   
6.     //Init a transparent QImage.  
7.     QSize scaledSize = m_scaleFactor * m_image.size();  
8.     QImage transparentImage(scaledSize, QImage::Format_ARGB32);  
9.   
10.     QColor transparent(0, 0, 0, 0);  
11.     QColor black(0, 0, 0);  
12.     QColor white(255, 255, 255);  
13.   
14.     for (int i = 0; i < scaledSize.width(); i++)  
15.         for (int j = 0; j < scaledSize.height(); j++)  
16.         {  
17.             transparentImage.setPixel(i, j, transparent.rgba());  
18.         }  
19.   
20.     bool isDrawBlack = true;  
21.       
22.     //Draw left&right border.  
23.     for (int i = 0; i < selectionRect.height(); i++)  
24.     {     
25.         if (i <=  borderOffset)  
26.         {  
27.             transparentImage.setPixel(startX + selectionRect.width(), startY + i, isBlackStart ? black.rgb() : white.rgb());  
28.             transparentImage.setPixel(startX, startY + i, isBlackStart ? black.rgb() : white.rgb());  
29.             isDrawBlack = !isBlackStart;  
30.         }  
31.         else   
32.         {  
33.             transparentImage.setPixel(startX + selectionRect.width(), startY + i, \  
34.                 isDrawBlack ? black.rgb() : white.rgb());  
35.             transparentImage.setPixel(startX, startY + i, \  
36.                 isDrawBlack ? black.rgb() : white.rgb());  
37.             if ((i - borderOffset) % 5 == 0)  
38.             {  
39.                 isDrawBlack = !isDrawBlack;  
40.             }  
41.         }  
42.     }  
43.   
44.     //Draw top&bottom border;  
45.     for (int i = 0; i < selectionRect.width(); i++)  
46.     {  
47.         if (i <= borderOffset)  
48.         {  
49.             transparentImage.setPixel(startX+i, startY, isBlackStart ? black.rgb() : white.rgb());  
50.             transparentImage.setPixel(startX + i, startY + selectionRect.height(), isBlackStart ? black.rgb() : white.rgb());  
51.   
52.             isDrawBlack = !isBlackStart;  
53.         }  
54.         else  
55.         {  
56.             transparentImage.setPixel(startX + i, startY, \  
57.                 isDrawBlack ? black.rgb() : white.rgb());  
58.             transparentImage.setPixel(startX + i, startY + selectionRect.height(), \  
59.                 isDrawBlack ? black.rgb() : white.rgb());  
60.             if ((i - borderOffset) % 5 == 0)  
61.             {  
62.                 isDrawBlack = !isDrawBlack;  
63.             }  
64.         }  
65.     }  
66.   
67.     painter.drawImage(0, 0, transparentImage);  
68. }