5

javascriptバインディングを使用して、単純なcairo描画をクラッターウィンドウに描画しようとしています。私の問題は、関数の半分の名前が少し異なることを除けば、何を試してもカイロの描画が表示されないことです。私は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の使用も存在しません。実際、deleteを使用すると、警告が表示されます

WARNING: 'applying the 'delete' operator to an unqualified name is deprecated'

これはまったく役に立ちません。gjsに関係する開発者の何人かがそれについて投稿したことによると、nullに割り当てると、ガベージコレクションされるため、同じ効果が得られるはずです。舞台裏で収集するものがあるかどうか疑問に思っています。

これが本当かどうか誰かが言うことができれば、私はこれを答えとして受け入れます。

アップデート：

問題のある領域をimports.gi.Clutterに絞り込みました。別の例を試しましたが、今回はClutterの代わりにGtkを使用しており、次のコードは実際に機能します

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実装にあるのではなく、ClutterCairo実装のgjsイントロスペクションメソッドにあると私は信じています。clutter.CairoTexture.newまたはclutter.CairoTexture.createが正しく実装されていないと思います。問題の原因はclutter.CairoTexture.createだと思います。

4

1 に答える 1

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 ();
于 2013-06-13T15:48:02.010 に答える