如何在Gnome Shell扩展中将文本打印到绘图区域

Question

我正在进行我的第一个gnome shell扩展(gnome shell 41.3(，我似乎遇到了最常见的问题，找到了正确的手册。。。

我试图实现的是…

• 桌面上显示的小工具(高于一切(
• 在小部件中绘制一些内容
• 给小部件写一些文本

我已经完成的是…

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

我缺少的是…

• 关于如何在绘图区域中添加除绘图内容之外的文本的任何线索

我花了1.5天的时间，但我又一次绕圈子跑，对如何继续没有任何想法。。。

有人能给我指正确的方向吗。。。？？？

伪代码类似于

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;
}

Answer 1

这有点难找到，我也没有找到任何关于这方面的文档，但在这里深入研究了GJS代码之后(https://gitlab.gnome.org/GNOME/gjs/-/blob/HEAD/modules/cairo-context.cpp)我对如何做开罗的事情有了更多的了解(https://www.cairographics.org/manual/)来自GJS。。。

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

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;
}