如何对QSvgWidget中显示的SVG图片执行放大、缩小操作？

实现QSvgWidget的缩放功能有两种常用方案，可根据业务场景选择：

方案1：调整组件尺寸实现缩放 #

原理是QSvgWidget的显示内容会自动适配组件自身尺寸，通过按比例修改组件宽高即可实现缩放。
适用场景：QSvgWidget未受布局约束、只需简单缩放的场景

实现步骤 #

1. 头文件定义成员变量存储原始SVG尺寸和当前缩放系数

QSize m_originalSvgSize;
qreal m_currentScale = 1.0;
const qreal SCALE_STEP = 0.1; // 单次缩放步长

2. 加载SVG时获取原始尺寸

QString svgPath = "你的SVG文件路径";
svgWidget->load(svgPath);
m_originalSvgSize = svgWidget->renderer()->defaultSize();

3. 实现放大/缩小逻辑

// 放大
void zoomIn() {
    m_currentScale += SCALE_STEP;
    svgWidget->resize(m_originalSvgSize * m_currentScale);
}

// 缩小
void zoomOut() {
    if (m_currentScale <= SCALE_STEP) return; // 避免缩到0
    m_currentScale -= SCALE_STEP;
    svgWidget->resize(m_originalSvgSize * m_currentScale);
}

注意事项 #

如果需要滚动查看放大后的内容，可将QSvgWidget放入QScrollArea容器中使用。

方案2：自定义组件重写绘制实现缩放 #

通过继承QSvgWidget自定义类，重写绘制事件和交互事件实现缩放，灵活性更高。
适用场景：需要滚轮缩放、嵌入布局使用、后续要扩展平移等交互的场景

实现步骤 #

1. 自定义类头文件定义

#include <QSvgWidget>
#include <QWheelEvent>
#include <QPainter>

class ZoomableSvgWidget : public QSvgWidget
{
    Q_OBJECT
public:
    explicit ZoomableSvgWidget(QWidget *parent = nullptr) : QSvgWidget(parent) {}

protected:
    void paintEvent(QPaintEvent *event) override;
    void wheelEvent(QWheelEvent *event) override;

private:
    qreal m_scale = 1.0;
    const qreal SCALE_STEP = 0.1;
    const qreal MIN_SCALE = 0.1; // 最小缩放比例
    const qreal MAX_SCALE = 5.0; // 最大缩放比例
};

2. 类实现逻辑

void ZoomableSvgWidget::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    // 计算居中的绘制区域
    QSizeF renderSize = renderer()->defaultSize() * m_scale;
    QRectF renderRect(
        QPointF((width() - renderSize.width()) / 2, (height() - renderSize.height()) / 2),
        renderSize
    );
    renderer()->render(&painter, renderRect);
}

void ZoomableSvgWidget::wheelEvent(QWheelEvent *event)
{
    // 滚轮向上放大，向下缩小
    if (event->angleDelta().y() > 0) {
        m_scale = qMin(m_scale + SCALE_STEP, MAX_SCALE);
    } else {
        m_scale = qMax(m_scale - SCALE_STEP, MIN_SCALE);
    }
    update();
    event->accept();
}

扩展说明 #

如果需要支持拖拽平移，可新增鼠标事件处理逻辑记录偏移量，调整paintEvent中renderRect的坐标即可。

内容的提问来源于stack exchange，提问作者Flying Jay