0

I want to draw logo or image using cairo on Clutter.Canvas or on St.DrawingArea, I have tried using GdkPixbuf to load image and drawing it using cr.paint() but its not showing desired result.

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);
    let img = GdkPixbuf.Pixbuf.new_from_file('arch.svg');
    Gdk.cairo_set_source_pixbuf(cr,img,0,0);
    cr.paint();
    cr.setSourceRGBA(1,1,1,0.3);
    cr.rotate(-Math.PI/2);
    cr.save();
    cr.setLineWidth(this.lineW);
    cr.arc(0,0,r,0,2 * Math.PI);
    cr.stroke();
    cr.restore();
    return true;
}

here is the drawing function for Clutter.Canvas. Desired result nothing is showing, How can I draw images like png,svg on Clutter.Canvas or on St.DrawingArea??

Raihan Ahamed
  • 1
  • 2

1 Answers1

0

i'm also new to GJS, for canvas with cairo context, i cant see a problem. this works for me.

const Gtk        = imports.gi.Gtk,
      GtkClutter = imports.gi.GtkClutter,
      Clutter    = imports.gi.Clutter,
      cairo      = imports.gi.cairo,
      Gdk        = imports.gi.Gdk,
      GdkPixbuf  = imports.gi.GdkPixbuf;

Gtk.init(null);
GtkClutter.init(null);

const window=new Gtk.Window (),
      clutterEmbed=new GtkClutter.Embed(),
      actor=new Clutter.Actor({x:0, y:0, width:700, height:400}),
      canvas=new Clutter.Canvas({width:700, height:400});

canvas.connect('draw', function (canvas, context)
    {
    let PixBuffer=GdkPixbuf.Pixbuf.new_from_file(".."); //-- Your Path
    Gdk.cairo_set_source_pixbuf(context,PixBuffer,0,0);
    context.paint();
    });

canvas.invalidate();                        //-- to fire canvas draw signal
actor.set_content(canvas);                  //-- canvas -> actor content
clutterEmbed.get_stage().add_child(actor);  //-- actor child of embed stage
window.add(clutterEmbed);                   //-- embed child of window
window.set_title("Canvas Example");
window.connect('destroy', () => { Gtk.main_quit(); });
window.set_size_request(800, 500);
window.show_all();
Gtk.main();
Schmaehgrunza
  • 39
  • 6
  • On Gtk app It can draw any image using GdkPixbuf but in gnome-extension it is not drawing any image at all following the same way for extension code is here https://goonlinetools.com/snapshot/code/#uwk9nq4r3w7ogz2def3p – Raihan Ahamed Dec 17 '22 at 09:56