在Clutter.Canvas/St.DrawingArea用Cairo绘制SVG/PNG无显示，求解决方法

原代码的核心问题 #

• SVG加载方式不对：GdkPixbuf对SVG的支持依赖额外加载器，且兼容性差，复杂SVG无法正常渲染，更可靠的方式是用Rsvg.Handle直接渲染SVG到Cairo上下文。
• 坐标与尺寸未适配：平移到画布中心后直接绘制图片，未做缩放适配，若图片尺寸超出画布会被完全裁剪，导致看不到内容。
• 缺少错误检查：未判断图片是否加载成功，若文件路径错误会直接无输出，无法排查问题。

针对Clutter.Canvas的修正代码 #

绘制PNG（用GdkPixbuf） #

draw_stuff(canvas, cr, width, height) {
    this.lineW = 10;
    let r = width/2 - this.lineW/2;

    // 清空画布
    cr.setOperator(Cairo.Operator.CLEAR);
    cr.paint();
    cr.setOperator(Cairo.Operator.OVER);

    // 平移到画布中心
    cr.translate(width/2, height/2);

    // 加载PNG并做错误捕获
    let img;
    try {
        img = GdkPixbuf.Pixbuf.new_from_file('arch.png');
    } catch (e) {
        log(`加载图片失败: ${e.message}`);
        // 绘制错误提示色块
        cr.setSourceRGBA(1, 0, 0, 1);
        cr.rectangle(-50, -50, 100, 100);
        cr.fill();
        return true;
    }

    // 计算缩放比例，让图片适配画布（保留比例并留边距）
    const imgW = img.get_width();
    const imgH = img.get_height();
    const scale = Math.min(width / imgW, height / imgH) * 0.8;

    // 平移到图片中心后缩放
    cr.translate(-(imgW * scale)/2, -(imgH * scale)/2);
    cr.scale(scale, scale);

    // 绘制图片
    Gdk.cairo_set_source_pixbuf(cr, img, 0, 0);
    cr.paint();

    // 重置变换，绘制圆环
    cr.identityMatrix();
    cr.translate(width/2, height/2);
    cr.setSourceRGBA(1,1,1,0.3);
    cr.setLineWidth(this.lineW);
    cr.arc(0,0,r,0,2 * Math.PI);
    cr.stroke();

    return true;
}

绘制SVG（用Rsvg.Handle） #

SVG推荐用Rsvg库渲染，这是GNOME环境下处理SVG的标准方式：

draw_stuff(canvas, cr, width, height) {
    this.lineW = 10;
    let r = width/2 - this.lineW/2;

    cr.setOperator(Cairo.Operator.CLEAR);
    cr.paint();
    cr.setOperator(Cairo.Operator.OVER);
    cr.translate(width/2, height/2);

    // 加载SVG并做错误捕获
    let svgHandle;
    try {
        svgHandle = Rsvg.Handle.new_from_file('arch.svg');
    } catch (e) {
        log(`加载SVG失败: ${e.message}`);
        cr.setSourceRGBA(1,0,0,1);
        cr.rectangle(-50,-50,100,100);
        cr.fill();
        return true;
    }

    // 获取SVG固有尺寸，计算适配缩放比例
    const svgDim = svgHandle.get_dimensions();
    const scale = Math.min(width / svgDim.width, height / svgDim.height) * 0.8;

    // 平移到SVG中心并缩放
    cr.translate(-(svgDim.width * scale)/2, -(svgDim.height * scale)/2);
    cr.scale(scale, scale);

    // 渲染SVG到Cairo上下文
    svgHandle.render_cairo(cr);

    // 重置变换绘制圆环
    cr.identityMatrix();
    cr.translate(width/2, height/2);
    cr.setSourceRGBA(1,1,1,0.3);
    cr.setLineWidth(this.lineW);
    cr.arc(0,0,r,0,2 * Math.PI);
    cr.stroke();

    return true;
}

针对St.DrawingArea的实现逻辑 #

St.DrawingArea的绘图逻辑和Clutter.Canvas一致，仅回调设置方式不同：

// 创建St.DrawingArea实例
const drawingArea = new St.DrawingArea({ width: 300, height: 300 });
drawingArea.connect('repaint', (area) => {
    const cr = area.get_context();
    const [width, height] = area.get_surface_size();

    // 清空画布
    cr.setOperator(Cairo.Operator.CLEAR);
    cr.paint();
    cr.setOperator(Cairo.Operator.OVER);
    cr.translate(width/2, height/2);

    // 加载SVG
    let svgHandle;
    try {
        svgHandle = Rsvg.Handle.new_from_file('arch.svg');
    } catch (e) {
        log(`加载SVG失败: ${e.message}`);
        cr.setSourceRGBA(1,0,0,1);
        cr.rectangle(-50,-50,100,100);
        cr.fill();
        cr.$dispose();
        return;
    }

    // 适配尺寸并渲染
    const svgDim = svgHandle.get_dimensions();
    const scale = Math.min(width / svgDim.width, height / svgDim.height) * 0.8;
    cr.translate(-(svgDim.width * scale)/2, -(svgDim.height * scale)/2);
    cr.scale(scale, scale);
    svgHandle.render_cairo(cr);

    // 绘制圆环
    cr.identityMatrix();
    cr.translate(width/2, height/2);
    cr.setSourceRGBA(1,1,1,0.3);
    cr.setLineWidth(10);
    cr.arc(0,0, width/2 -5, 0, 2*Math.PI);
    cr.stroke();

    // 释放Cairo上下文资源
    cr.$dispose();
});

关键注意事项 #

• 路径正确性：若在GNOME Shell扩展中使用，不要用相对路径，需通过Me.dir.get_child('arch.svg').get_path()获取扩展内文件的绝对路径。
• 依赖声明：使用Rsvg时，需在扩展的metadata.json中添加依赖"librsvg-2.0"。
• 资源释放：St.DrawingArea中使用完Cairo上下文后必须调用cr.$dispose()，避免内存泄漏。
• 尺寸适配：必须根据画布尺寸缩放图片，避免图片超出可视区域或显示过小。

内容的提问来源于stack exchange，提问作者Raihan Ahamed