用種子-3.2開發繪圖與gtk3的開發工具javascript

Question

我試圖找出如何在種子3.2中製作簡單的開羅繪圖。 我知道gtk3已經將事件方法從expose事件更改爲繪製。
回調在我的小測試樣本中正常工作，但我不知道要抓住cairo對象。
我可以看到，回調函數的參數是：
[對象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

我捅了一下。
您可以通過使用該功能獲取的窗口小部件開羅CONTEX：

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

我不知道這是在gtk3正確的方式，但它的工作原理。

我不知道第二個參數（在回調函數draw_cb中）用於什麼。我認爲應根據C.

但無論如何，此代碼示例似乎同等功能的工作

#!/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(); 

注意是開羅上下文。您可以在調整窗口大小時看到窗口重新繪製。