代码之家 › 专栏 › 技术社区 › Littlee

Konva:如何垂直居中文本

konvajs

2

Littlee · 技术社区 · 6 年前

我试图构建一个以内容垂直居中的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'
});

我找到了排列属性,但只能使文本水平居中。如何垂直居中?

1 回复 | 直到 6 年前

1

lavrton 6 年前

可以从 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

推荐文章

Arslan Tariq · 无法使用react konva为线条提供渐变

7 年前

Tierna D. Jack Lawless · 尝试构建时出现“无法从“…/react-konva/src/react-konva.js”中解析模块“react/lib/react”

7 年前

Jay · 将konvajs画布转换为图像,并将这些图像加载到另一个画布

7 年前

Robin Savinsky · konvajs序列化包含图像的阶段

7 年前