Qt 用图片绘制背景

一 场景

UI 提供一张背景图片，而窗口控件大小不固定，如何实现效果？

例如，背景图片如下：

 (.png  22*34)

实现背景效果如下：

二 实现

1. 思路

首先，直接将背景图片缩放到窗口控件大小是不合适的，图片变形、像素模糊，体验差。

优化方案是局部缩放，增强体验：将背景图片拆分（例如井字格），分别绘制到窗口控件的相应部分。

主要借助 QPainter 的 drawImage 重载函数：

void drawImage(int x, int y, const QImage &image, int sx = 0, int sy = 0, int sw = -1, 
               int sh = -1, Qt::ImageConversionFlags flags = Qt::AutoColor)

2. 背景图片拆分

typedef unsigned int _uint;
// 拆分"模具"
struct _uint_rect
{
	_uint_rect(_uint l, _uint t, _uint r, _uint b)
		: left(l), top(t), right(r), bottom(b) {}
	_uint left, top, right, bottom;
};

// 可以理解为井字格的左上右下数值
// 拆分原则是尽量将背景图片拆分为规则图案和非规则图案
// 尽量缩放背景图片规则部分，不规则部分不缩放

对于   (.png，22*34)，拆分模具选择为：

_uint_rect rPadding(8, 13, 10, 8); // 拆分为9部分

而对于  （.png，25*5, 两头为半弧形），则拆分模具选择为：

_uint_rect rPadding(6, 0, 6, 0); // 拆分为3部分

3. paint逻辑

void drawPixmap(QPainter& painter, const QPixmap& pixmap, 
                const QRect& rect, const _uint_rect& scaleGrid)
{
	int cxPixmap = pixmap.width();
	int cyPixmap = pixmap.height();
	int cxMidSrc = cxPixmap - scaleGrid.left - scaleGrid.right;
	int cyMidSrc = cyPixmap - scaleGrid.top - scaleGrid.bottom;
	int cxMidDest = rect.right() - rect.left() - scaleGrid.left - scaleGrid.right;
	int cyMidDest = rect.bottom() - rect.top() - scaleGrid.top - scaleGrid.bottom;

	// middle
	painter.drawPixmap(rect.left() + scaleGrid.left, rect.top() + scaleGrid.top,
	                   cxMidDest, cyMidDest, pixmap, 
                       scaleGrid.left, scaleGrid.top, cxMidSrc, cyMidSrc);

	// left-top
	if( scaleGrid.left > 0 && scaleGrid.top > 0 )
	{
		painter.drawPixmap(rect.left(), rect.top(), scaleGrid.left, scaleGrid.top,
		                   pixmap, 0, 0, scaleGrid.left, scaleGrid.top);
	}

	// top
	if( scaleGrid.top > 0 )
	{
		painter.drawPixmap(rect.left() + scaleGrid.left, rect.top(), cxMidDest, scaleGrid.top,
		                   pixmap, scaleGrid.left, 0, cxMidSrc, scaleGrid.top);
	}

	// right-top
	if( scaleGrid.right > 0 && scaleGrid.top > 0 )
	{
		painter.drawPixmap(rect.right() - scaleGrid.right, rect.top(), scaleGrid.right, scaleGrid.top,
		                   pixmap, cxPixmap - scaleGrid.right, 0, scaleGrid.right, scaleGrid.top);
	}

	// right
	if( scaleGrid.right > 0 )
	{
		painter.drawPixmap(rect.right() - scaleGrid.right, rect.top() + scaleGrid.top, scaleGrid.right, cyMidDest, 
        pixmap, cxPixmap - scaleGrid.right, scaleGrid.top, scaleGrid.right, cyMidSrc);
	}

	// right-bottom
	if( scaleGrid.right > 0 && scaleGrid.bottom > 0 )
	{
		painter.drawPixmap(rect.right() - scaleGrid.right, rect.bottom() - scaleGrid.bottom,
		scaleGrid.right, scaleGrid.bottom, pixmap, 
        cxPixmap - scaleGrid.right, cyPixmap - scaleGrid.bottom, scaleGrid.right, scaleGrid.bottom);
	}

	// bottom
	if( scaleGrid.bottom > 0 )
	{
		painter.drawPixmap(rect.left() + scaleGrid.left, rect.bottom() - scaleGrid.bottom, cxMidDest, scaleGrid.bottom,
        pixmap, scaleGrid.left, cyPixmap - scaleGrid.bottom, cxMidSrc, scaleGrid.bottom);
	}

	// left-bottom
	if( scaleGrid.left > 0 && scaleGrid.bottom > 0 )
	{
		painter.drawPixmap(rect.left(), rect.bottom() - scaleGrid.bottom, scaleGrid.left,
		                   scaleGrid.bottom, pixmap, 
                           0, cyPixmap - scaleGrid.bottom, scaleGrid.left, scaleGrid.bottom);
	}

	// left
	if( scaleGrid.left > 0 )
	{
		painter.drawPixmap(rect.left(), rect.top() + scaleGrid.top, scaleGrid.left, cyMidDest,
		                   pixmap, 0, scaleGrid.top, scaleGrid.left, cyMidSrc);
	}
}