Konva：如何垂直居中文本

Question

我正在尝试构建一个 Konva Text 容器，其内容垂直居中；

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,输出