Как изменить, чтобы обновить атрибут в KonvaJS

Question

У меня есть следующий фрагмент кода Konva, и я пытаюсь обновить атрибут текста

var lifePoint = new Konva.Text({
    x: 50,
    y: 50,
    id: 'P1',
    text: 'Player Lifepoint: 100',
    fontSize: 30
});

После прочтения документации я попробовал:

// find and change text
const test = layer.find('#P1')[0];
test.setAttr('text', 'changed');

Может ли кто-нибудь сказать мне, что я не так делаю?

Answer 1

Согласно комментарию @lavrton, вам нужно снова нарисовать слой, чтобы увидеть изменения. Смотрите рабочий фрагмент ниже - я добавил кнопку для удовольствия.

var pts = 100;

// Set up the stage
var stage = new Konva.Stage({
  container: 'container',
  width: 650,
  height: 300
});

// Make a layer and add to the stage
var layer = new Konva.Layer();
stage.add(layer);

// Make a text node and add to stage
var lifePoint = new Konva.Text({
    x: 50,
    y: 30,
    id: 'P1',
    text: 'Player Lifepoint: ' + pts,
    fontSize: 30
});
layer.add( lifePoint);

layer.draw(); // My favorite to forget !
  
// When the user gets more life points add them on.
$('#addlife').on('click', function(e){
  // find and change text
  var text = layer.find('#P1')[0];
  pts = pts + 10;
  text.setAttr('text', 'Player Lifepoint: ' + pts);
  layer.draw(); // remember to redraw the layer to see the change !
})

#container
{
width: 400px;
height: 100px;
border: 1px solid lime;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.4.2/konva.min.js"></script>
<p><button id='addlife'>Add life</button></p>
<div id='container'></div>