前言

在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 下载