javascript - 在 KineticJs Text() 上显示值

Question

我想使用 jquery 中的 keyup 事件更改我的容器中的文本以用于动力学 js，但它不显示。我尝试获取该值，然后将其显示在 span 元素上，它工作正常。这是我的代码：

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();