0

我正在做我的第一个 gnome-shell 扩展(gnome shell 41.3),我似乎遇到了最常见的问题,找到了正确的手册......

我试图达到的是......

  • 桌面上显示的小部件(高于一切)......
  • 在小部件中绘制一些东西......
  • 向小部件写入一些文本...

我已经完成的是...

  • 使用 DrawingArea 和 Cairo(我假设)我可以使用 .moveTo ()、.lineTo () 等...、.stroke() 在我的小部件中绘制一些东西...
  • 当小部件显示在其他所有内容之上时......
  • 我的扩展程序有一个设置小部件来配置...

我缺少的是...

  • 有关如何将除绘图内容之外的文本放置到绘图区域的任何线索...

我做了1.5天的duckducking,但是,再一次,我在圈子里跑,没有一个关于如何进行的想法......

谁能指出我正确的方向,请...???

伪代码是这样的

const {St, GLib} = imports.gi;

var area = new St.DrawingArea({
        style_class : 'bg-color',
        reactive : true,
        can_focus : true,
        track_hover : true,
        width: myWidth,
        height: myHeight
    });

area.connect('repaint', (area) => drawMyStuff(area));

Main.layoutManager.addChrome(area, {
    affectsInputRegion : false,
    affectsStruts : false,
    trackFullscreen : false,
    });

timeout = GLib.timeout_add(0, 500, () => {
    this.area.queue_repaint();
    return true;
    });

function drawMyStuff(area) {
    let cr = area.get_context();

    cr.translate(area.width / 2, area.height / 2);
    cr.scale(area.width / 2, area.height / 2);

    cr.setSourceRGBA (1, 1, 1, 1);
    cr.arc(0.0, 0.0, 1.0 - 0.05, 0, 2 * Math.PI);
    cr.fill();

    /*
     * Would like to print some text here but obviously I am to stupid to do so...
     * Help me StackExchangeCommunity, you're my only hope...
     *
     * Obviously it is not that easy:
     * cr.setSourceRGBA (1, 0, 0, 1);
     * cr.write(0.0, 0.0, "Not a moon")
     * cr.fill();
     *
     */ 
    
    cr.$dispose();
    return true;
}
4

1 回答 1

0

有点难以找到,我没有找到任何相关文档,但是在深入研究 GJS 代码之后(https://gitlab.gnome.org/GNOME/gjs/-/blob/HEAD/modules/cairo-context .cpp )我能够从 GJS了解更多关于如何做这样的 cairo 事情(https://www.cairographics.org/manual/ )......

我上面提到的问题的解决方案是这样的:

function drawMyStuff(area) {
    let cr = area.get_context();

    cr.translate(area.width / 2, area.height / 2);
    cr.scale(area.width / 2, area.height / 2);

    cr.setSourceRGBA (1, 1, 1, 1);
    cr.arc(0.0, 0.0, 1.0 - 0.05, 0, 2 * Math.PI);
    cr.fill();

    /*
     * Thank me, I'm my only hope...
     *
     * Obviously it is that easy:
     *
     */ 

    cr.moveTo(-0.5,-0.5);
    cr.setSourceRGBA (1, 0, 0, 1);
    cr.setFontSize(0.125);
    cr.showText('No Moon');

    cr.$dispose();
    return true;
}
于 2022-01-30T17:03:59.100 回答