카이로와 시드 -3.2 자바 스크립트에서 gtk3으로 그리기

Question

시드 -3에서 간단한 카이로 드로잉을 만드는 방법을 찾으려고 노력했습니다. gtk3가 이벤트 메소드를 expose-event에서 draw로 변경했다는 것을 알고 있습니다.
내 작은 테스트 샘플에서는 콜백이 제대로 작동하지만 카이로 개체를 보유 할 수 있는지 알지 못합니다.
나는 콜백 함수의 인자가 있음을 볼 수 있습니다
[객체 GtkDrawingArea]
[객체 seed_struct]

나는 seed_stuct은 카이로 핸들러의 경우 모르는 액세스 할 수 있습니다.

참고. seed-example의 cairo.js는 gtk + 2.0입니다.

코드 샘플.

#!/usr/bin/env seed 

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

const WINDOW_WIDTH=300; 
const WINDOW_HEIGHT=300; 

function MIN(x,y) { 
    if (x<y) return x; 
    return y; 
} 

function draw_cb(drea, cr, data){ 
// var cr = new cairo.Context.from_drawable(drawing_area.window); 
    Seed.print(drea); 
    Seed.print(cr); 
    Seed.print(data); 

    var width=drea.get_allocated_width(); 
    var height=drea.get_allocated_height(); 
    Seed.print("width="+width+" height="+height); 
// var cr = Gdk.cairo_create(drea.window); 
// Seed.print(cr); 
    var context=drea.get_style_context(); 
    Seed.print(context); 
    var PAD=50; 
    var extent=MIN(width-2*PAD, height-2*PAD); 
    var x=PAD; 
    var y=PAD; 
// From here I don't know what to do 

// Seed.printf(Seed.stringify(context)); 

// context.render_arrow(cr, Math.PI/2.0,x,y,extent); 
// cr.arc(width/2.0, height/2.0, 
//  MIN(width,height)/2.0, 
//  0, 2.0*Math.PI); 
    /* Set color for background */ 
    cr.storke(); 
    cairo.set_line_width(cr, 2); 
    cairo.set_source_rgb(cr, 1, 1, 1); 
// cr.operator=cairo.Operator.CLEAR; 
    /* fill in the background color*/ 
// Seed.print("Before paint"); 
// cr.paint(); 
// Seed.print("After paint"); 
// cr.operator=cairo.Operator.OVER; 

    /* set color for rectangle */ 
// cr.set_source_rgb(0.42, 0.65, 0.80); 
    /* set the line width */ 
// cr.set_line_width(6); 
    /* draw the rectangle's path beginning at 3,3 */ 
// cr.rectangle (3, 3, 100, 100); 
    /* stroke the rectangle's path with the chosen color so it's actually visible */ 
// cr.stroke(); 

    /* draw circle */ 
/* 
    cr.set_source_rgb(0.17, 0.63, 0.12); 
    cr.set_line_width(cr,2); 
    cr.arc(150, 210, 20, 0, 2*G_PI); 
    cr.stroke(); 
*/ 
    /* draw horizontal line */ 
/* 
    cr.set_source_rgb(0.77, 0.16, 0.13); 
    cr.set_line_width(6); 
    cr.move_to(80,160); 
    cr.line_to(200, 160); 
    cr.stroke(); 
*/ 
    /* free cr and all associated resources */ 
/* 
    cr.destroy(cr); 
*/ 
    return false; 
} 

Gtk.init(Seed.argv); 

var w = new Gtk.Window(); 
w.signal["destroy"].connect(Gtk.main_quit); 
var da = new Gtk.DrawingArea(); 
da.set_size_request(WINDOW_WIDTH, WINDOW_HEIGHT); 
da.signal["draw"].connect(draw_cb); 
w.add(da); 
//da.show(); 
//w.show(); 

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

Answer 1

나는 조금 찔렀다.
당신은 기능을 사용하여 창 위젯의 카이로 텍스를 얻을 수 있습니다 :

var cr = new cairo.Context.from_window(drea.get_window()); 

이 gtk3에서 올바른 방법이지만 작동하는지 모르겠어요.

(콜백 함수 draw_cb의) 두 번째 매개 변수가 사용 된 것을 알지 못합니다. I는이

#!/usr/bin/env seed 
/* Simple cairo example using gtk3 */ 

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

const WINDOW_WIDTH=300; 
const WINDOW_HEIGHT=300; 

function MIN(x,y) { 
    if (x<y) return x; 
    return y; 
} 

function draw_cb(drea, crx, data){ 
    var cr = new cairo.Context.from_window(drea.get_window()); 
    Seed.print("drea="+drea); 
    Seed.print("cr="+cr); 
    Seed.print("data="+data); 
    for(prop in cr) { 
    Seed.print("cr.prop="+prop); 
    } 
    /* Get the size of the window */ 
    var width=drea.get_allocated_width(); 
    var height=drea.get_allocated_height(); 
    Seed.print("width="+width+" height="+height); 

    var context=drea.get_style_context(); 
    Seed.print(context); 
    var PAD=50; 
    var extent=MIN(width-2*PAD, height-2*PAD); 
    var x=PAD; 
    var y=PAD; 
    // Cairo drawing from here 
    cr.set_source_rgba(0.88, 0.20, 0.40, 0.6); 
    cr.arc(width/2.0, height/2.0, 
     MIN(width,height)/2.0, 
     0, 2.0*Math.PI); 
    cr.stroke(); 
    /* set color for rectangle */ 
    cr.set_source_rgba(0.42, 0.65, 0.80, 1.0); 
    cr.rectangle (width*0.1, height*0.1, width*0.8, height*0.8); 
    cr.stroke(); 
    /* draw line */ 
    cr.set_source_rgba(0.00, 0.88, 0.13,0.6); 
    // cr.set_line_width(6); 
    cr.move_to(width*0.9,height*0.1); 
    cr.line_to(width*0.1,height*0.9); 
    cr.stroke(); 
    /* free cr and all associated resources */ 
    cr.destroy(); 
    return false; 
} 

Gtk.init(Seed.argv); 

var w = new Gtk.Window(); 
w.signal["destroy"].connect(Gtk.main_quit); 
var da = new Gtk.DrawingArea(); 
da.set_size_request(WINDOW_WIDTH, WINDOW_HEIGHT); 
da.signal["draw"].connect(draw_cb); 
w.add(da); 

//da.show(); 
//w.show(); 

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

참고 일

어쨌든이 코드 샘플 보인다 C.
에 해당하는 기능에 따라 카이로 컨텍스트 있어야한다고 생각합니다. 창 크기를 조정할 때 창이 다시 그려지는 것을 볼 수 있습니다.