Konva: how to vertical centering text

Question

I'm try to build a Konva Text container with vertical centering of it's content;

var infoText = new Konva.Text({
  x: 0,
  y: 0,
  text: `my long long ... text`,
  fontSize: 18,
  fontFamily: 'Arial',
  width: 50,
  height: 50,
  align: 'center'
});

I found the align property in the docs, but it can only make text centered horizontally. How can I center vertically?

Updated my answer. It is much simpler to do it from v2.3.0. – lavrton Aug 30 '18 at 12:28 — lavrton, Aug 30 '18 at 12:28

lavrton · Accepted Answer · 2018-08-30T12:28:23.243

It is possible to do from Konva v2.3.0:

const text = new Konva.Text({
  text: 'vertical align',
  x: 20,
  height: rect.height(),
  verticalAlign: 'middle'
});

Demo: http://jsbin.com/budekuhopi/edit?html,js,output

Old answer:

At the current moment (v2.2.2), Konva can't do this automatically. You have to make manual adjustment:

const text = new Konva.Text({
  text: 'vertical align',
  x: 20,
});
layer.add(text);

text.y(containerHeight / 2 - text.getHeight() / 2);

http://jsbin.com/yakuwozaxi/2/edit?js,output

Konva: how to vertical centering text

1 Answers1