Konva：如何垂直居中文本

Question

我正在尝试构建一个内容垂直居中的 Konva 文本容器；

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

我在文档中找到了align 属性，但它只能使文本水平居中。如何垂直居中？

Answer 1

可以从 Konva v2.3.0:

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

演示：http://jsbin.com/budekuhopi/edit?html,js,output

旧答案：

目前 (v2.2.2)，Konva 无法自动执行此操作。您必须进行手动调整：

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：如何垂直居中文本

Konva: how to vertical centering text

konvajs