如何在GTK DrawingArea中无损缩放显示SVG图像？

问题根源在于你使用的PixbufLoader会将SVG矢量图转换为光栅位图，缩放时自然会出现像素化。要实现任意缩放不失真，需要直接保留SVG的矢量数据并在绘制时实时渲染。

解决方案步骤： #

1. 添加依赖
   在Cargo.toml中添加rsvg库（用于处理SVG矢量渲染）及相关依赖：

[dependencies]
gtk = { version = "0.18", features = ["v4_10"] }
rsvg = "0.18"
cairo-rs = "0.18"

2. 修改代码实现矢量渲染
   使用rsvg::Handle加载SVG并在draw回调中实时矢量渲染，每次窗口缩放时都会重新计算尺寸并绘制矢量图形：

use gtk::prelude::*;
use gtk::{Application, ApplicationWindow, DrawingArea};
use rsvg::Handle;
use cairo::{Context, RectangleInt};

const WIDTH: i32 = 400;
const HEIGHT: i32 = 400;

fn build_ui(application: &Application) {
    let window = ApplicationWindow::new(application);
    window.set_default_size(WIDTH, HEIGHT);
    
    let drawing_area = DrawingArea::new();
    window.add(&drawing_area);

    // 加载SVG文件（嵌入或从路径加载均可）
    let svg_data = include_bytes!("../file.svg");
    let svg_handle = Handle::from_data(svg_data).expect("加载SVG失败");
    
    // 获取SVG原始尺寸
    let svg_dimensions = svg_handle.intrinsic_size().expect("SVG无有效尺寸");
    let svg_width = svg_dimensions.width as f64;
    let svg_height = svg_dimensions.height as f64;

    drawing_area.connect_draw(move |_, cr: &Context| {
        // 获取当前绘制区域尺寸
        let alloc = drawing_area.allocation();
        let target_width = alloc.width as f64;
        let target_height = alloc.height as f64;

        // 计算等比例缩放系数
        let scale_x = target_width / svg_width;
        let scale_y = target_height / svg_height;
        let scale = scale_x.min(scale_y);

        // 计算居中偏移量
        let offset_x = (target_width - svg_width * scale) / 2.0;
        let offset_y = (target_height - svg_height * scale) / 2.0;

        // 应用变换：先平移到居中位置，再缩放
        cr.translate(offset_x, offset_y);
        cr.scale(scale, scale);

        // 渲染SVG矢量图形
        let viewport = RectangleInt {
            x: 0,
            y: 0,
            width: svg_width as i32,
            height: svg_height as i32,
        };
        svg_handle.render_document(cr, &viewport).expect("渲染SVG失败");

        Inhibit(false)
    });

    // 窗口尺寸变化时触发重绘
    drawing_area.connect_size_allocate(|area, _| {
        area.queue_draw();
    });

    window.show_all();
}

fn main() {
    let application = Application::new(Some("com.example.svgviewer"), Default::default())
        .expect("创建GTK应用失败");

    application.connect_activate(build_ui);

    application.run();
}

关键说明： #

• rsvg::Handle会保留SVG的矢量数据，不会提前转换为位图
• 每次绘制时根据当前DrawingArea的尺寸实时计算缩放比例，保持SVG的宽高比
• 通过Cairo上下文的变换实现居中缩放，渲染时直接输出矢量图形，任意缩放都不会失真
• 监听size_allocate信号，确保窗口缩放时立即重绘，适配新尺寸

内容的提问来源于stack exchange，提问作者Владимир