KineticjS: Why was Kinetic.Text verticalAlign property removed? Alternatives?

Question

I'm using the KineticJS text objects with gradient fills etc to act as buttons. But now that the verticalAlign property was recently removed, how do I vertically align my text in its bounding box? Why was the property removed if there are no alternatives?

Higginson

Answer 1

According to this, support has been temporarily dropped, and will hopefully be added in the near future.

Whisker

Answer 2

verticalAlign property of a text did not make any sense to me.

Text is a not a Kinetic.Container but a Kinetic.Shape.

IMO, a Kinetic.Shape should not have vertialAlign. It's like a Circle has verticalAlign. Aligned to what? aligned to any container, layer or stage? see what I am saying?

That's why it is removed, i guess, and hopefully, those property should be added back to KineticContainer along with horizontalAlign.

If you want your text vertically aligned to a rectangle or circle. At this point, you need to set y position of your text to vertically align to your container.

If your container is 100 pixel high and your text is 30px high, then you will get y position as 35.

var newY= (box.getHeight()-text.getHeight())/2
text.setY(newY);
layer.draw();

Entopic

Changing font-size moves text in the wrong direction, for one thing. Previous versions had this option, and Kineticjs has been notorious for changing API for things that are basically the same, without upgrade guide for existing code. – Whisker