gjs cairo 문맥 그림이 불규칙 창에 표시되지 않습니다.

Question

자바 스크립트 바인딩을 사용하여 복잡한 창에 그리는 간단한 카이로 그리기를 얻으려고합니다. 내 문제는 기능의 절반이 약간 다르게 명명 된 것 외에는 내가 시도한 것에 상관없이 카이로 도면이 나타나지 않는다는 것입니다. 나는 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(); 

---

---

나는이 작동하지 않는 이유는 자바 스크립트에서 카이로 컨텍스트의 삭제와 관련이있다 생각합니다. context.destroy는 존재하지 않으며 delete를 사용하지도 않습니다. 실제로 삭제를 사용하면 경고 메시지가 나타납니다.

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

전혀 도움이되지 않습니다. gj 관련 개발자 중 일부가 게시 한 내용에 따르면 null 할당은 가비지 수집으로 인해 동일한 효과를 가져야합니다. 나는 무대 뒤에서 수집 할 것이 있는지 여부에 대해 의심하고있다.

누군가가 이것이 사실인지 아닌지를 말할 수 있다면 대답으로 받아 들일 것입니다.

업데이트 : imports.gi.Clutter에 문제 영역을 좁혀

. 나는 또 다른 예를했지만,이 시간 대신 클러은 Gtk를 사용하여, 다음과 같은 코드는 실제로이 문제는 카이로의 GJS 구현하지이라고 생각하는 날 리드하지만,

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. 문제의 원인이되는 것을 만들어라.

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