Отображение значения в KineticJs Text()

Question

Я хочу изменить текст в контейнере для кинетических js, используя событие keyup в jquery, но оно не отображается. Я попытался получить значение, а затем отобразить его на элементе 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

После добавления или изменения кинетический объект, убедитесь, что вы называете 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();