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

Question

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

1

У меня есть следующий код 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');

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

Luke Braithwaite 22 окт. 2018, в 17:31

Источник

1

Код выглядит хорошо. Вам нужно обновить слой, если вы хотите увидеть изменения. layer.draw() .
lavrton 22 окт. 2018, в 15:43

Теги:

javascript

konvajs

1 ответ

Ещё вопросы

Код выглядит хорошо. Вам нужно обновить слой, если вы хотите увидеть изменения. layer.draw() .

Vanquished Wombat · Answer 1 · 2018-10-22T17-14-00.000Z

Согласно комментарию от @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>