在seed-3.2中使用cairo绘制带有gtk3的javascript

Question

我试图了解如何在seed-3.2中制作一个简单的cairo绘图。我知道gtk3已经将事件方法从公开事件更改为绘制
回调在我的小测试样本中运行良好，但我不知道如何获取cairo对象
我可以看到回调函数的参数是：
[object GtkDrawingArea]
[object seed_struct]

我不知道seed_struct是否是cairo处理程序，以及访问它。

注意。seed示例中的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

我四处打听了一下
您可以使用以下函数获得窗口小部件的cairo上下文：

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

我不知道这在gtk3中是否正确，但它有效。

我不知道第二个参数（在回调函数draw_cb中）是用来做什么的。根据C中的等价函数，我认为is应该是cairo上下文。

但无论如何，这个代码示例似乎可以

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

注意。当您调整窗口的大小时，您可以看到窗口被重新绘制。