前言

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