Rysowanie kontekstu gjs cairo nie wyświetla się w oknie bałaganu

Question

Próbuję uzyskać prosty rysunek cairo narysowany do okna bałaganu za pomocą powiązań javascript. Mój problem polega na tym, że poza połową funkcji nazwanych nieco inaczej, nie ma znaczenia, co próbuję, rysunek cairo się nie pojawia. Użyłem przykładu z Pythona, który działa i przeniesiono go do javascript. Używam również introspekcji, aby uzyskać instancję modułu Clutter. Używam również wersji gjs w wersji 0.7.14. Czy ktoś może mi powiedzieć, co się dzieje źle.

Poniżej znajduje się przykładowy kod, którego używam.

---

const cairo = imports.cairo; 
const clutter = imports.gi.Clutter; 

function on_button_press_event (stage, event) { 
    clutter.main_quit(); 
} 

function draw(cairo_tex) { 
    var context = cairo_tex.create(); 


    context.scale(200, 200); 
    context.setLineWidth(0.1); 
    var colour2 = new clutter.Color(); 
    colour2.from_string('#dd000088'); 
    clutter.cairo_set_source_color(context, colour2); 
    context.translate(0.5, 0.5); 
    context.arc(0, 0, 0.4, 0, Math.PI * 2); 
    context.stroke(); 
} 

function main() { 
    clutter.init(0, null); 
    var stage = new clutter.Stage(); 
    var colour = new clutter.Color(); 
    colour.from_string("#ffccccff"); 
    stage.set_color(colour); 
    stage.set_size(400, 300); 
    stage.connect('button-press-event', on_button_press_event); 
    stage.connect('destroy', clutter.main_quit); 

    var cairo_tex = new clutter.CairoTexture.new(200, 200); 
    cairo_tex.set_position((stage.get_width() - 200)/2, 
         (stage.get_height() - 200)/2); 

    draw(cairo_tex); 


    var center_x = cairo_tex.get_width()/2; 
    var center_z = cairo_tex.get_height()/2; 
    cairo_tex.set_rotation(clutter.AlignAxis.Y_AXIS, 45.0, center_x, 0, center_z); 
    stage.add_actor(cairo_tex); 
    cairo_tex.show(); 

    stage.show(); 

    clutter.main(); 
} 

main(); 

---

Myślę, że powodem nie jest to praca ma do czynienia ze skreśleniem kontekście Kairze w javascript. context.destroy nie istnieje i użycie delete też nie istnieje. Rzeczywiście, jeśli używam usunąć, otrzymuję ostrzeżenie, które nie pomaga w ogóle. Zgodnie z tym, co napisali niektórzy deweloperzy zajmujący się programem gjs, przypisanie wartości pustej powinno mieć ten sam efekt, ponieważ jest ona zbiorem śmieci. Mam wątpliwości, czy za kulisami można coś zebrać.

Jeśli ktoś mógłby powiedzieć, czy to prawda, czy nie, zaakceptowałbym to jako odpowiedź.

UPDATE:

mam zawężony obszar problemu do imports.gi.Clutter. Próbowałem jeszcze jeden przykład, ale tym razem używając Gtk zamiast bałaganu, a następujący kod faktycznie działa

cairo = imports.cairo; 
Gtk = imports.gi.Gtk; 
Gdk = imports.gi.Gdk; 

function draw_arc(drawing_area){ 
    var cr = Gdk.cairo_create(drawing_area.get_window()); 

    cr.scale(2, 2); 

    cr.operator = cairo.Operator.CLEAR; 
    cr.paint(); 
    cr.operator = cairo.Operator.OVER; 

    cr.setSourceRGB(0,255,0); 
    cr.arc(128, 128, 76.8, 0, 2*Math.PI); 
    cr.fill(); 

    return false; 
} 

Gtk.init(0, null); 

var w = new Gtk.Window(); 
w.connect('delete-event', Gtk.main_quit); 

var d = new Gtk.DrawingArea(); 
w.add(d); 

w.resize(500,600); 
w.decorated = false; 

d.connect('draw', draw_arc); 

w.show_all(); 
Gtk.main(); 

To prowadzi mnie do przekonania, że ​​problem nie jest z realizacją Gjs Kairu, ale z metodami gjs introspekcji do wdrożenia Clutter Cairo. Myślę, że bałagan.CairoTexture.new lub bałagan.CairoTexture.create nie jest poprawnie zaimplementowany. Podejrzeń, że to jest bałagan.CairoTexture.create, który jest przyczyną problemu.

Answer 1

Korzystanie z nowszą integrację pomiędzy bałagan i Kair, a konkretnie Clutter.Canvas będzie narysować okrąg na ekranie:

const Clutter = imports.gi.Clutter; 
const Cairo = imports.cairo; 

const draw_stuff = function (canvas, cr, width, height) { 
    cr.save(); 
    cr.setOperator (Cairo.Operator.CLEAR); 
    cr.paint(); 
    cr.restore(); 
    cr.setOperator (Cairo.Operator.OVER); 
    cr.scale (width, height); 
    cr.setLineCap (Cairo.LineCap.ROUND); 
    cr.setLineWidth (0.1); 

    cr.translate (0.5, 0.5); 
    cr.arc (0, 0, 0.4, 0, Math.PI * 2); 
    cr.stroke(); 

    return true; 
}; 

const test = function() { 
    Clutter.init(null); 

    let stage = new Clutter.Stage(); 
    stage.set_title ("Circle!"); 

    let color = new Clutter.Color({ 
     red : 255, 
     green : 0, 
     blue : 0, 
     alpha : 128 // Just for the heck of it. 
}); 
stage.set_background_color(color); 
stage.set_size(300, 300); 

let canvas = new Clutter.Canvas(); 
canvas.set_size (155, 155); 

let dummy = new Clutter.Actor(); 
dummy.set_content (canvas); 
dummy.set_size(155, 155); 
stage.add_child (dummy); 

stage.connect ("destroy", Clutter.main_quit); 
canvas.connect ("draw", draw_stuff); 
canvas.invalidate(); 
stage.show_all(); 

Clutter.main(); 
}; 

test();