qt客户端程序使用svg图片资源的几种方法

时间:2020-02-14 maoliangwu 人气:5

直接使用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）

链接：http://pan.baidu.com/s/1u4zVsYHg9tF_E7LbtWmUBA
提取码：jce9

加载全部内容