用种子-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(); 

注意是开罗上下文。您可以在调整窗口大小时看到窗口重新绘制。