gjs cairoコンテキスト描画がクラッタウィンドウに表示されない

Question

JavaScriptのバインディングを使用して、クラッタウィンドウに描画された簡単なカイロ描画を取得しようとしています。私の問題は、機能の半分が少し違っていても、私が何を試しても、カイロの絵は表示されません。私はPythonの例を使っています。これはうまく動作し、javascriptに移植されています。また、クラッタモジュールインスタンスを取得するためにイントロスペクションを使用しています。私はgjsバージョン0.7.14も使用しています。誰かが間違っていることを教えてもらえますか？

以下は、私が使用しているコードの例です。

---

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(); 

---

私はこれが動作しない理由は、JavaScriptでカイロコンテキストの削除に関係していると思います。 context.destroyは存在しないし、deleteを使うこともどちらもしない。事実、私が削除を使用すると、警告が表示されます。

WARNING: 'applying the 'delete' operator to an unqualified name is deprecated' 

これはまったく役に立ちません。 gjに関係している開発者の中には、ガベージコレクションのためにnullを割り当てるのと同じ効果があるはずです。私は舞台裏で収集するものがあるかどうかについて疑問を抱いています。

誰かがこれが真実かどうかを言うことができるなら、私はこれを答えとして受け入れます。

UPDATE：私はimports.gi.Clutterに問題領域を絞り込んいる

。しかしGJSのイントロスペクション法と、私は別の例を試してみましたが、今回はGtkの代わりのクラッタを使用して、次のコードは、実際に

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(); 

に動作します。この問題は、カイロのGJS実装ではないと信じて私をリードクラッターカイロの実装のために。私は混乱していると思っています.CairoTexture.newまたはclutter.CairoTexture.createは正しく実装されていません。私はそれが問題を引き起こしている混乱していると思う.CairoTexture.create。

Answer 1

これは、画面に円を描画します、クラッタ、とカイロ間の新しい統合を、具体的Clutter.Canvas使用：

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();