Qt QML解决SVG图片显示模糊的问题
前言
在QML中直接使用SVG图片,使用Image控件加载资源,显示出来图片是模糊的,很影响使用体验。本文介绍重新绘制SVG图片,然后注册到QML中使用。
效果图:
左边是直接使用Image加载资源显示的效果
右边是重绘后的效果
正文
为了能在QML中注册使用,将继承于QQuickPaintedItem进行重绘。
关键代码
#include "svgimage.h"
#include <QPointF>
SvgImage::SvgImage(QQuickItem *parent) : QQuickPaintedItem(parent)
{
m_pSvgRenderer = new QSvgRenderer(this);
}
void SvgImage::declareQML()
{
qmlRegisterType<SvgImage>("SvgImage", 1, 0, "SvgImage");
}
void SvgImage::writeSource(QString sourcePath) {
if(sourcePath.isEmpty()){
return;
}
m_source = sourcePath;
m_source.replace("qrc", "");
m_pSvgRenderer->load(m_source);
emit sourceChanged();
update();
}
void SvgImage::paint(QPainter *painter)
{
QRectF rect = QRectF(QPointF(0,0), QSizeF(width(), height()));
m_pSvgRenderer->render(painter, rect);
}
本文demo提供了在QML中使用的完整流程.
Demo 下载