IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    [原]Qt中绘制蚂蚁线

    qp120291570发表于 2014-12-03 17:14:47
    love 0

    提要

    如果有用过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⊥ 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);
    }


    打完收工。


    感谢 大自在 大神的指点!



沪ICP备19023445号-2号
友情链接