我正在尝试使用javascript绑定将一个简单的开罗绘图绘制到一个混乱的窗口。我的问题是,除了命名略有不同的函数的一半,无论我尝试什么,都没有显示开罗绘图。我使用了python的一个例子,它可以工作,并将它移植到javascript。我也在使用内省来获取Clutter模块实例。我也在使用gjs版本0.7.14。谁能告诉我出了什么问题。
以下是我正在使用的示例代码。
const cairo = imports.cairo;
const clutter = imports.gi.Clutter;
function on_button_press_event (stage, event) {
clutter.main_quit();
}
function draw(cairo_tex) {
var context = cairo_tex.create();
context.scale(200, 200);
context.setLineWidth(0.1);
var colour2 = new clutter.Color();
colour2.from_string('#dd000088');
clutter.cairo_set_source_color(context, colour2);
context.translate(0.5, 0.5);
context.arc(0, 0, 0.4, 0, Math.PI * 2);
context.stroke();
}
function main () {
clutter.init(0, null);
var stage = new clutter.Stage();
var colour = new clutter.Color();
colour.from_string("#ffccccff");
stage.set_color(colour);
stage.set_size(400, 300);
stage.connect('button-press-event', on_button_press_event);
stage.connect('destroy', clutter.main_quit);
var cairo_tex = new clutter.CairoTexture.new(200, 200);
cairo_tex.set_position((stage.get_width() - 200) / 2,
(stage.get_height() - 200) / 2);
draw(cairo_tex);
var center_x = cairo_tex.get_width() / 2;
var center_z = cairo_tex.get_height() / 2;
cairo_tex.set_rotation(clutter.AlignAxis.Y_AXIS, 45.0, center_x, 0, center_z);
stage.add_actor(cairo_tex);
cairo_tex.show();
stage.show();
clutter.main();
}
main();
我认为这不起作用的原因与在javascript中删除cairo上下文有关。 context.destroy不存在,并且使用delete也不存在。事实上如果我使用删除然后我得到警告
WARNING: 'applying the 'delete' operator to an unqualified name is deprecated'
完全没有帮助。根据参与gjs的一些开发人员发布的内容,分配给null应该具有相同的效果,因为它被垃圾收集。我怀疑幕后是否有任何东西需要收集。
如果有人可以说这是否属实,那么我会接受这个作为答案。
更新:
我已将问题区域缩小为imports.gi.Clutter。我尝试了另一个例子,但这次使用的是Gtk而不是Clutter,以下代码实际上可以正常工作
cairo = imports.cairo;
Gtk = imports.gi.Gtk;
Gdk = imports.gi.Gdk;
function draw_arc(drawing_area){
var cr = Gdk.cairo_create(drawing_area.get_window());
cr.scale(2, 2);
cr.operator = cairo.Operator.CLEAR;
cr.paint();
cr.operator = cairo.Operator.OVER;
cr.setSourceRGB(0,255,0);
cr.arc(128, 128, 76.8, 0, 2*Math.PI);
cr.fill();
return false;
}
Gtk.init(0, null);
var w = new Gtk.Window();
w.connect('delete-event', Gtk.main_quit);
var d = new Gtk.DrawingArea();
w.add(d);
w.resize(500,600);
w.decorated = false;
d.connect('draw', draw_arc);
w.show_all();
Gtk.main();
这让我相信问题不在于cairo的gjs实现,而在于Clutter Cairo实现的gjs内省方法。我认为clutter.CairoTexture.new或clutter.CairoTexture.create没有正确实现。我怀疑它是导致问题的clutter.CairoTexture.create。
答案 0 :(得分:4)
使用Clutter和Cairo之间的新集成,特别是Clutter.Canvas
,这将在屏幕上绘制一个圆圈:
const Clutter = imports.gi.Clutter;
const Cairo = imports.cairo;
const draw_stuff = function (canvas, cr, width, height) {
cr.save ();
cr.setOperator (Cairo.Operator.CLEAR);
cr.paint ();
cr.restore ();
cr.setOperator (Cairo.Operator.OVER);
cr.scale (width, height);
cr.setLineCap (Cairo.LineCap.ROUND);
cr.setLineWidth (0.1);
cr.translate (0.5, 0.5);
cr.arc (0, 0, 0.4, 0, Math.PI * 2);
cr.stroke ();
return true;
};
const test = function () {
Clutter.init(null);
let stage = new Clutter.Stage();
stage.set_title ("Circle!");
let color = new Clutter.Color({
red : 255,
green : 0,
blue : 0,
alpha : 128 // Just for the heck of it.
});
stage.set_background_color(color);
stage.set_size(300, 300);
let canvas = new Clutter.Canvas ();
canvas.set_size (155, 155);
let dummy = new Clutter.Actor ();
dummy.set_content (canvas);
dummy.set_size(155, 155);
stage.add_child (dummy);
stage.connect ("destroy", Clutter.main_quit);
canvas.connect ("draw", draw_stuff);
canvas.invalidate ();
stage.show_all();
Clutter.main ();
};
test ();