javascript - KineticJs Text() に値を表示する

Question

jquery の keyup イベントを使用して、キネティック js のコンテナー内のテキストを変更したいのですが、表示されません。値を取得してからスパン要素に表示しようとしましたが、正常に動作します。これが私のコードです：

var stage = new Kinetic.Stage({
        container: 'canvasContainer',
        width: 800,
        height: 800
    });
    var layer = new Kinetic.Layer();
    var message = '';

    $(function(){
        $('#txtArea').change(function(){
            message = $(this).val();
            $('.output').text(message);

            var simpleText = new Kinetic.Text({
                x: 0,
                y: 10,
                text: message,
                fontSize: 30,
                fontFamily: 'Calibri',
                fill: 'blue'
            });
            layer.add(simpleText);
        }).keyup(function(){
            $(this).change();
        });
    });
    stage.add(layer);

Answer 1

Kinetic オブジェクトを追加または変更した後は、必ず layer.draw() を呼び出して描画を表示してください。

ところで、変更ごとに新しい simpleText を追加する代わりに、既存のテキスト オブジェクトのテキストを変更したいだけかもしれません。

// declare simpleText before .change()

var simpleText = new Kinetic.Text({
    x: 0,
    y: 10,
    text: "",
    fontSize: 30,
    fontFamily: 'Calibri',
    fill: 'blue'
});
layer.add(simpleText);

// then inside .change()

simpleText.setText(message);
layer.draw();