pangocairo text in middle of the circle

Question

I am writing an extension / widgets for gnome-shell.So I want to show some information using text. Actually I want to put text in middle of the circle using pangoCairo but I can't figure out how can I put text using pangoCairo?

here is my code of drawing circles with a function to set text middle of the circles but the text is not showing in the middle.

 draw_stuff(canvas, cr, width, height) {
    cr.setSourceRGBA(1,1,1,0.2); 
    cr.save ();
    cr.setOperator (Cairo.Operator.CLEAR);
    cr.paint ();        
    cr.restore ();      
    cr.setOperator (Cairo.Operator.OVER);       
    cr.scale (width, height);       
    cr.setLineCap (Cairo.LineCap.BUTT);                 
    //test      
    cr.setLineWidth (0.08);         
    cr.translate (0.5, 0.5);        
    cr.arc (0, 0, 0.4, 0, Math.PI * 2);         
    cr.stroke ();               
    cr.setSourceRGBA(1,1,1,0.8);        
    cr.rotate(-Math.PI/2);      
    cr.save();      
    cr.arc (0,0, 0.4, 0, this.currentR /100 * 2 * Math.PI);
    cr.stroke();                
    cr.setSourceRGBA(1,1,1,0.9);        
    cr.save();      
    cr.arc (0,0, 0.25, 0, 2 * Math.PI);         
    cr.fill();          
    cr.moveTo(0, 0);    
    cr.setSourceRGBA(0,0,0,0.9);    
    cr.save();  
    this.text_show(cr, "WoW");          
    cr.restore();               
    return true; }
    
    update() { this.currentR = 60;
    this._canvas.connect ("draw", this.draw_stuff.bind(this));
    this._canvas.invalidate();}
    
    text_show(cr, showtext, font = "DejaVuSerif Bold 16") {
    let pl = PangoCairo.create_layout(cr);
    pl.set_text(showtext, -1);
    pl.set_font_description(Pango.FontDescription.from_string(font));
    PangoCairo.update_layout(cr, pl);
    let [w, h] = pl.get_pixel_size();
    cr.relMoveTo(-w / 2, 0);
    PangoCairo.show_layout(cr, pl);
    cr.relMoveTo(w / 2, 0);}

I dont know what's wrong here?

Not showing as in not show where you want it to be or not showing at all ? — mohsyn, Nov 06 '22 at 18:10

score 0 · Answer 1 · answered Nov 07 '22 at 15:52

    let [w, h] = pl.get_pixel_size();
    cr.relMoveTo(-w / 2, 0);

You are placing your text something like 1000 pixels off the screen. get_pixel_size() is documented as:

pango_layout_get_size() returns the width and height scaled by PANGO_SCALE.

and PANGO_SCALE has the value 1024:

Thus, you need to change the code above to

    let [w, h] = pl.get_pixel_size();
    cr.relMoveTo(-w / 2048, 0);

Bonus points for not hardcoding the value of PANGO_SCALE and instead getting it from your Pango API bindings. However, for that I don't know enough about gnome-shell-extensions. Is this code in Javascript? Dunno.

pangocairo text in middle of the circle

1 Answers1