【问题标题】:Center text horizontally and vertically in KonvaJS在 KonvaJS 中水平和垂直居中文本
【发布时间】:2018-08-23 12:51:30
【问题描述】:

我有这样的事情:

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

文本居中对齐,但我需要垂直对齐。我怎样才能做到这一点?

我知道使用普通画布你可以做到 textBaseline="center",但 Konva 的等价物是什么?

【问题讨论】:

    标签: javascript reactjs canvas konvajs


    【解决方案1】:

    Konva v2.3.0 你可以使用verticalAlign 属性:

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

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

    【讨论】: