QT 动态更改SVG的颜色

好久没有写QT了，前阵子写的控件都没时间整理和改进，一直有个想法就是想将里面的PNG改成SVG，因为png用QPixmap绘制出来的是位图，一放大就失真，之前研究的将PNG颜色更改就白忙活了，代码如下

void GaugeColorScheme::setCenterImageColor(QImage &image,QColor &color)
{
    image  = image.convertToFormat(QImage::Format_RGBA8888_Premultiplied,Qt::NoFormatConversion);
    int bmpWidth = image.width();
    int bmpHeight = image.height();
    for(int i=0;i< bmpWidth;++i)
    {
        for(int j=0;j<bmpHeight;++j)
        {
            //将灰色(0~255)全部替换成设定的颜色，全透明的不替换
            QColor tempColor = image.pixelColor(i,j);
            if(tempColor.alpha() != 0)
            {
                color.setAlpha(tempColor.alpha());
                image.setPixelColor(i,j,color);
            }
        }
    }
}


QImage image = centerPixImg.toImage();
    setCenterImageColor(image,centerImgColor);

    painter->drawImage(-image.width()/2,-image.height()/2, image);

以上代码是将png颜色替换的方法，给需要的朋友，在这里我没有用这种方法了，为了绘制出来的图标不失真，我想到了svg。

svg图标格式其实本质上是一个xml文件，我本想直接使用QT封装的SVG操作类，无耐没有找到好的方法，我想既然是xml文件，那就直接用QT的xml操作类，对文件的相关属性进行更改就可以了，我找了一个svg文件打开并研究里面的内容，在这里我给大家推荐一个图标下载库，也许有很多朋友都知道这个库，那就是“阿里图标库”，里面有大量的免费的图标下载。

以上是我打开一个svg图标的内容，是不是很简单，在根为svg,在里面描述了图标的大小等信息，在有个子标签path,描述了图标的填充颜色以及绘制路径等信息，我们所需要的就是这个填充颜色，我们只要更改它就可以了，所以我设计了以下一个函数。

void GaugeStation::SetAttrRecur(QDomElement &elem, QString strtagname, QString strattr, QString strattrval)
{
    // if it has the tagname then overwritte desired attribute
    if (elem.tagName().compare(strtagname) == 0)
    {
        elem.setAttribute(strattr, strattrval);
    }
    // loop all children
    for (int i = 0; i < elem.childNodes().count(); i++)
    {
        if (!elem.childNodes().at(i).isElement())
        {
            continue;
        }
        SetAttrRecur(elem.childNodes().at(i).toElement(), strtagname, strattr, strattrval);
    }
}

elem:DOM树的一个元素句柄 strtagname：标签名 strattr:属性名 strattrval:属性值

由以上函数可以看出，我是用的DOM的方式对svg进行解析和修改的，在函数中我用了一个递归的方式对svg中的数据进行更改。具体大家可以自己去深入研究一下QT对xml的操作方法。接下来大家看我的调用。

void GaugeStation::drawCenterPixMap(QPainter *painter)
{
    painter->save();
    int width_svg = 50;
    int height_svg = 50;

    QFile file( centerSvgPath );
    file.open(QIODevice::ReadOnly);
    QByteArray baData = file.readAll();
    // load svg contents to xml document and edit contents
    QDomDocument doc;
    doc.setContent(baData);

    file.close();
    // recurivelly change color

    if(innerCurrValue >= 0)
    {
        //正角度
        SetAttrRecur(doc.documentElement(), "path", "fill", rgb2HexStr(centerPixMapNegativeColor));
    }
    else
    {
        //负角度
        SetAttrRecur(doc.documentElement(), "path", "fill", rgb2HexStr(centerPixMapPositiveColor));
    }

    QSvgRenderer m_svgRender(doc.toByteArray());
    m_svgRender.render(painter ,QRectF(-width_svg,-height_svg/2,width_svg ,height_svg));
    painter->restore();
}

在使用这QT操作xml，以及svg时，要加入 QT += xml svg

并包含头文件：#include<QDomDocument> #include<QSvgRenderer> #include<QFile>

我们用QFile将文件打开并获取内容到QDomDocument然后调用函数，更改path标签下的fill属性,更改后将内容导入QSvgRenderer，利用painter将内容绘制出来。

另外在svg中描述颜色好像只能是：red,blue,black。。。等，以及颜色的16进制字符串格式，所以我写了一个QColor 转16进制字符串的函数，不知道QT中有没有其它好用的方法不用自己转换的，我们方法如下：

QString GaugeStation::rgb2HexStr(const QColor &color)
{
    QString redStr = QString("%1").arg(color.red(), 2, 16, QChar('0'));
    QString greenStr = QString("%1").arg(color.green(), 2, 16, QChar('0'));
    QString blueStr = QString("%1").arg(color.blue(), 2, 16, QChar('0'));
    QString key = "#" + redStr + greenStr + blueStr;
    return key;
}

方法介绍完毕，如里大家有更好的方法，可以告诉我，欢迎大家来指正，谢谢！

QT 动态更改SVG的颜色

猜你喜欢