gjs cairo bối cảnh vẽ không hiển thị trong cửa sổ lộn xộn

Question

Tôi đang cố gắng để có được một bản vẽ cairo đơn giản rút ra một cửa sổ lộn xộn bằng cách sử dụng các ràng buộc javascript. Vấn đề của tôi là, ngoài một nửa các chức năng được đặt tên hơi khác nhau, không có vấn đề gì tôi cố gắng, bản vẽ cairo không hiển thị. Tôi đã sử dụng một ví dụ từ python, mà không làm việc, và chuyển nó vào javascript. Tôi cũng đang sử dụng nội tâm để có được cá thể mô-đun Clutter. Tôi cũng đang sử dụng gjs phiên bản 0.7.14. Bất cứ ai có thể cho tôi biết những gì đang xảy ra sai.

Dưới đây là mã ví dụ tôi đang sử dụng.

---

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

---

Tôi nghĩ lý do này không được làm việc đã làm với việc xoá bối cảnh cairo trong javascript. context.destroy không tồn tại và sử dụng xóa cũng không. Infact nếu tôi sử dụng xóa sau đó tôi nhận được cảnh báo

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

không có ích chút nào. Theo những gì một số nhà phát triển tham gia vào các gjs đã đăng về nó, gán cho null sẽ có tác dụng tương tự, do nó được thu gom rác. Tôi đang có những nghi ngờ về việc liệu có bất cứ điều gì để thu thập đằng sau hậu trường hay không.

Nếu ai đó có thể nói nếu điều này là đúng hay không, thì tôi sẽ chấp nhận điều này như một câu trả lời.

CẬP NHẬT:

Tôi đã thu hẹp khu vực sự cố thành import.gi.Clutter. Tôi cố gắng một ví dụ khác, nhưng lần này sử dụng Gtk thay vì Clutter, và đoạn mã sau thực sự hoạt động

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

Điều này dẫn tôi để tin rằng vấn đề là không phải với việc thực hiện gjs của cairo, nhưng với các phương pháp gjs mẫn để thực hiện Clutter Cairo. Tôi nghĩ rằng clutter.CairoTexture.new hoặc clutter.CairoTexture.create không được triển khai đúng cách. Tôi nghi ngờ nó là clutter.CairoTexture.create gây ra vấn đề.

Answer 1

Sử dụng tích hợp mới giữa Clutter, và Cairo, đặc biệt là Clutter.Canvas này sẽ vẽ một vòng tròn để màn hình:

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