CODEWITHSUNDEEP
javascriptreactjscanvaskonvajs
Colin Ricardo
Colin Ricardo

Reputation: 17269

Center text horizontally and vertically in KonvaJS

I have something like this:

<Stage>
  <Layer>
    <Rect />
      <Text
        ref={this.text}
        draggable 
        align="center"
      />
  </Layer>
</Stage>

The text is aligned in the center, but I need to align it vertically. How can I do this?

I know with plain canvas you can do textBaseline="center", but what's the equivalent for Konva?

Upvotes: 2

Views: 2405

Answers (1)

lavrton
lavrton

Reputation: 20363

From Konva v2.3.0 you can use verticalAlign property:

<Text
  x={20}
  y={20}
  width={150}
  height={50}
  text="vertical align"
  verticalAlign="middle"
/>

https://codesandbox.io/s/4xorl71m77

Upvotes: 2

Related Questions