博客

提要

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

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

先看下最终的结果:

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

分析

输入

一个QRect

输出

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

解决方案

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

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

代码实现

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

int borderOffset;
bool isBlackStart;
QTimer *repaintTimer;

计时器的初始化

repaintTimer = new QTimer();
repaintTimer->setInterval(380);
repaintTimer->start();
connect(repaintTimer, SIGNAL(timeout()), this, SLOT(updateSelectionBorder()));

对应的槽函数

void Canvas::updateSelectionBorder()
{
	borderOffset++;
	if (borderOffset > 4)
	{
		borderOffset = 0;
		isBlackStart = !isBlackStart;
	}
	this->repaint();
}

最最重要的绘制边框函数

void Canvas::paintSelectionBorder(QPainter &painter)
{
	int startX = selectionRect.startPoint().x();
	int startY = selectionRect.startPoint().y();

	//Init a transparent QImage.
	QSize scaledSize = m_scaleFactor * m_image.size();
	QImage transparentImage(scaledSize, QImage::Format_ARGB32);

	QColor transparent(0, 0, 0, 0);
	QColor black(0, 0, 0);
	QColor white(255, 255, 255);

	for (int i = 0; i < scaledSize.width(); i++)
		for (int j = 0; j < scaledSize.height(); j++)
		{
			transparentImage.setPixel(i, j, transparent.rgba());
		}

	bool isDrawBlack = true;
	
	//Draw left&right border.
	for (int i = 0; i < selectionRect.height(); i++)
	{	
		if (i <=  borderOffset)
		{
			transparentImage.setPixel(startX + selectionRect.width(), startY + i, isBlackStart ? black.rgb() : white.rgb());
			transparentImage.setPixel(startX, startY + i, isBlackStart ? black.rgb() : white.rgb());
			isDrawBlack = !isBlackStart;
		}
		else 
		{
			transparentImage.setPixel(startX + selectionRect.width(), startY + i, \
				isDrawBlack ? black.rgb() : white.rgb());
			transparentImage.setPixel(startX, startY + i, \
				isDrawBlack ? black.rgb() : white.rgb());
			if ((i - borderOffset) % 5 == 0)
			{
				isDrawBlack = !isDrawBlack;
			}
		}
	}

	//Draw top&bottom border;
	for (int i = 0; i < selectionRect.width(); i++)
	{
		if (i <= borderOffset)
		{
			transparentImage.setPixel(startX+i, startY, isBlackStart ? black.rgb() : white.rgb());
			transparentImage.setPixel(startX + i, startY + selectionRect.height(), isBlackStart ? black.rgb() : white.rgb());

			isDrawBlack = !isBlackStart;
		}
		else
		{
			transparentImage.setPixel(startX + i, startY, \
				isDrawBlack ? black.rgb() : white.rgb());
			transparentImage.setPixel(startX + i, startY + selectionRect.height(), \
				isDrawBlack ? black.rgb() : white.rgb());
			if ((i - borderOffset) % 5 == 0)
			{
				isDrawBlack = !isDrawBlack;
			}
		}
	}

	painter.drawImage(0, 0, transparentImage);
}

打完收工。

感谢 大自在 大神的指点！