konvajs - 康瓦 : how to vertical centering text

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