QT中修改图标(图片)颜色

背景：有时候在工程中需要根据不同的背景修改图标等颜色。

先介绍简单的，修改svg图标样式，可以直接用VS Code等工具打开相应的svg文件，然后修改里面的颜色数值即可：

svg原本的数据：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
]>
<svg version="1.1" id="图层_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
	 enable-background="new 0 0 24 24" xml:space="preserve">
<metadata>
	<sfw  xmlns="&ns_sfw;">
		<slices></slices>
		<sliceSourceBounds  bottomLeftOrigin="true" height="1298" width="1504" x="-206" y="-620"></sliceSourceBounds>
	</sfw>
</metadata>
<path fill="none" stroke="#808080" stroke-width="2" stroke-miterlimit="10" d="M3.9,12.7c4.5-4.6,11.7-4.6,16.1,0"/>
<path fill="none" stroke="#A9A9A9" stroke-width="2" stroke-miterlimit="10" d="M23,9.7c-6.1-6.2-15.9-6.2-22,0"/>
<path fill="none" stroke="#808080" stroke-width="2" stroke-miterlimit="10" d="M17.1,15.7c-2.8-2.9-7.4-2.9-10.3,0"/>
<path fill="#808080" d="M9.8,18.7L12,21l2.2-2.3C13,17.5,11,17.5,9.8,18.7z"/>
</svg>

修改第22和第24行的颜色数值，改为红色和蓝色：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
]>
<svg version="1.1" id="图层_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
	 enable-background="new 0 0 24 24" xml:space="preserve">
<metadata>
	<sfw  xmlns="&ns_sfw;">
		<slices></slices>
		<sliceSourceBounds  bottomLeftOrigin="true" height="1298" width="1504" x="-206" y="-620"></sliceSourceBounds>
	</sfw>
</metadata>
<path fill="none" stroke="#FF0000" stroke-width="2" stroke-miterlimit="10" d="M3.9,12.7c4.5-4.6,11.7-4.6,16.1,0"/>
<path fill="none" stroke="#A9A9A9" stroke-width="2" stroke-miterlimit="10" d="M23,9.7c-6.1-6.2-15.9-6.2-22,0"/>
<path fill="none" stroke="#4169E1" stroke-width="2" stroke-miterlimit="10" d="M17.1,15.7c-2.8-2.9-7.4-2.9-10.3,0"/>
<path fill="#808080" d="M9.8,18.7L12,21l2.2-2.3C13,17.5,11,17.5,9.8,18.7z"/>
</svg>

效果：

然后就可以在软件当中根据不同的条件选择不同的svg图片即可。

 

QT代码实现如下：

mainwindow.cpp：

    ui->setupUi(this);
    this->setWindowTitle("Icon 颜色修改");
    QPixmap pixBlack  = ChangeImage::loadSvg(":/wifi.svg", "black", 30);
    QPixmap pixBlue   = ChangeImage::loadSvg(":/wifi.svg", "blue", 30);
    QPixmap pixWhite  = ChangeImage::loadSvg(":/wifi.svg", "white", 30);
    QPixmap pixGray   = ChangeImage::loadSvg(":/wifi.svg", "gray", 30);
    QPixmap pixWhiteOp= ChangeImage::loadSvg(":/wifi.svg", "whiteOp", 30);
    QPixmap pixOrigin = ChangeImage::loadSvg(":/wifi.svg", "Origin", 30);

    QLabel *labelBlack  = new QLabel(this);
    QLabel *labelBlue   = new QLabel(this);
    QLabel *labelWhite  = new QLabel(this);
    QLabel *labelGray   = new QLabel(this);
    QLabel *labelWhiteOp= new QLabel(this);
    QLabel *labelOrigin = new QLabel(this);

    labelBlack  ->setPixmap(pixBlack);
    labelBlue   ->setPixmap(pixBlue);
    labelWhite  ->setPixmap(pixWhite);
    labelGray   ->setPixmap(pixGray);
    labelWhiteOp->setPixmap(pixWhiteOp);
    labelOrigin ->setPixmap(pixOrigin);

    ui->layoutBlack  ->addWidget(labelBlack);
    ui->layoutBLue   ->addWidget(labelBlue);
    ui->layoutWhite  ->addWidget(labelWhite);
    ui->layoutGray   ->addWidget(labelGray);
    ui->layoutWhiteOp->addWidget(labelWhiteOp);
    ui->layoutOrigin ->addWidget(labelOrigin);

 

ChangeImage.cpp:

#include "ChangeImage.h"
#include <QPainter>

const QPixmap ChangeImage::loadSvg(const QString &path, const QString color, int size)
{
    int origSize = size;
    const auto ratio = qApp->devicePixelRatio();
    if ( 2 == ratio) {
        size += origSize;
    } else if (3 == ratio) {
        size += origSize;
    }
    QPixmap pixmap(size, size);
    QSvgRenderer renderer(path);
    pixmap.fill(Qt::transparent);

    QPainter painter;
    painter.begin(&pixmap);
    renderer.render(&painter);
    painter.end();

    pixmap.setDevicePixelRatio(ratio);
    return drawSymbolicColoredPixmap(pixmap, color);
}

QPixmap ChangeImage::drawSymbolicColoredPixmap(const QPixmap &source, QString cgColor)
{
    QImage img = source.toImage();
    for (int x = 0; x < img.width(); x++) {
        for (int y = 0; y < img.height(); y++) {
            auto color = img.pixelColor(x, y);
            if (color.alpha() > 0) {
                if ( "white" == cgColor) {
                    color.setRed(255);
                    color.setGreen(255);
                    color.setBlue(255);
                    img.setPixelColor(x, y, color);
                } else if( "black" == cgColor) {
                    color.setRed(0);
                    color.setGreen(0);
                    color.setBlue(0);
                    img.setPixelColor(x, y, color);
                } else if ("gray"== cgColor) {
                    color.setRed(152);
                    color.setGreen(163);
                    color.setBlue(164);
                    img.setPixelColor(x, y, color);
                } else if ("blue" == cgColor){
                    color.setRed(61);
                    color.setGreen(107);
                    color.setBlue(229);
                    img.setPixelColor(x, y, color);
                } else if ("whiteOp" == cgColor){      //注:彩色反白计算不一样
                    color.setRed(255 - color.red());
                    color.setGreen(255 - color.green());
                    color.setBlue(255 - color.blue());
                    img.setPixelColor(x, y, color);
                }

                else {
                    return source;
                }
            }
        }
    }
    return QPixmap::fromImage(img);
}

效果如下：

 

完整的代码资源：https://download.csdn.net/download/IT8343/15875198