Can I store custom data values on a Konva.Image() object?

Question

I have a Konva layer with some creature Image objects on it. I would like to store custom data values (hp and time) on these objects so when I serialize the container these data values would appear in the json. How can I achieve that?

var creature = new Konva.Image({
image: images[creat.id],
x: creat.x,
y: creat.y,
draggable: true,
id:creat.id,
url:creat.url,

hp:creat.hp,
time: creat.time

});

score 2 · Answer 1 · answered Apr 03 '20 at 17:49

All plain attributes (objects, array, numbers, strings) will be serialized into JSON.

You can just add a custom attribute into the constructor:

const node = new Konva.Image({
  url:creat.url,
  time: creat.time
})

Or you can use setAttr function:

node.setAttr('time', someValue);

To read the value you can do this:

const time = node.getAttr('time');

Just make sure that your custom attributes names do not overlap with build-it properties.

Can I store custom data values on a Konva.Image() object?

1 Answers1