javascript - 使用 gtk3 在 Seed-3.2 javascript 中使用 cairo 进行绘图

Question

我试图找出如何在seed-3.2中制作简单的开罗绘图。 我知道gtk3已经将事件方法从expose-event更改为draw。
回调在我的小测试样本中工作正常，但我不知道如何获取 cairo 对象。
我可以看到回调函数参数是:
[对象GtkDrawingArea]
[对象seed_struct]

我不知道 Seed_stuct 是否是 cairo 处理程序并访问它。

注意。种子示例中的 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中)是用来做什么的。我认为根据 C 中的等效函数，应该是 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();

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