qt客戶端程序使用svg圖片資源的幾種方法

直接使用svg格式文件資源的情況

1. 直接在UI控件屬性面板中選擇部分支持icon圖標的控件的icon來源，這樣圖標可以顯示

2.給toolbutton添加樣式

 qproperty-icon: url(:/new/prefix1/resource/ball.svg); qproperty-iconSize: 300px 56px;

 

3.自定義一個qwidget 重寫paintevent方法

void svgrenderwidget::paintEvent(QPaintEvent *event)
{
    QPainter qPainter(this);
    QSvgRenderer m_svgRender;
   m_svgRender.load(QString(":/new/prefix1/resource/ball.svg"));
   m_svgRender.render(&qPainter ,QRectF(0,0,this->size().width() ,this->size().height()));
}

 

使用svg轉的矢量字體庫的情況

使用https://www.iconfont.cn網站先建立圖標項目，圖標整理完以后，下載項目，找到css中對圖標的編號

在QT資源中導入該ttf字體庫資源。

1. 給pushbutton設置font和text。

    int fontId = QFontDatabase::addApplicationFont(":/new/prefix1/resource/font/iconfont.ttf");
    QStringList fontFamilies = QFontDatabase::applicationFontFamilies(fontId);
    QFont font;
    font.setFamily(fontFamilies.at(0));
    font.setPointSize(10);
    ui->pushButton->setFont(font);
    QString str = QString("%1%2").arg(QChar(0xe6f3)).arg("代碼");
    ui->pushButton->setText(str);

如有必要的話可以修改圖標顏色

    ui->pushButton_3->setStyleSheet("color: rgb(200 , 167 , 0);");

2. 在qwidget上顯示圖標序列，即繪制矢量文本顯示出圖片

void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);
    painter.setPen(QColor("#000000"));
    painter.setFont(this->font);

    painter.drawText(10,30, FontAwesomeIcons::Instance().getIconChar(FontAwesomeIcons::IconIdentity::icon_component));
    painter.drawText(30,30, "component");

    painter.drawText(200,30, FontAwesomeIcons::Instance().getIconChar(FontAwesomeIcons::IconIdentity::icon_code));
    painter.drawText(230,30, "code");


}

 

注意：

qwidget的qss中使用svg格式的圖片設置樣式，並不能顯示，我也沒搞懂。在qwidget的樣式表總輸入background-image: url(:/new/prefix1/resource/ball.svg);

 

最終的測試效果

 

 可運行demo程序的工程如下 （qt5.10 +windows）

鏈接：https://pan.baidu.com/s/1u4zVsYHg9tF_E7LbtWmUBA
提取碼：jce9