Рисование с помощью cairo в javascript seed-3.2 с gtk3

Я попытался выяснить, как сделать простой рисунок каира в 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();

linux javascript gtk3 seed cairo
person CBR    schedule 16.07.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я немного поковырялся.
Вы можете получить контекст cairo для оконного виджета, используя функцию:

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

Я не знаю, правильно ли это в gtk3, но это работает.

Я не знаю, для чего используется второй параметр (в функции обратного вызова draw_cb). Я думаю, что это должен быть контекст cairo в соответствии с эквивалентной функцией в 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();

Примечание. Вы можете видеть, что окно перерисовывается при изменении размера окна.

person CBR    schedule 17.07.2012
comment
Я думаю, что важно обозначить, что такое Seed, тем более, что это имя используется для многих целей в сети. wiki.gnome.org/action/show/Projects/ - person Volomike; 14.09.2015