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

1 个答案: