首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在KonvaJS中水平和垂直居中文本

在KonvaJS中,可以使用文本节点(Text Node)来实现水平和垂直居中文本的效果。

要实现水平居中,可以通过设置文本节点的对齐方式(align)为"center",并将文本节点的x坐标设置为画布宽度的一半。示例代码如下:

代码语言:txt
复制
var stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

var layer = new Konva.Layer();
stage.add(layer);

var text = new Konva.Text({
  x: stage.width() / 2,
  y: 100,
  text: 'Hello World',
  fontSize: 20,
  align: 'center',
  width: stage.width()
});

layer.add(text);
layer.draw();

要实现垂直居中,可以通过设置文本节点的垂直对齐方式(verticalAlign)为"middle",并将文本节点的y坐标设置为画布高度的一半。示例代码如下:

代码语言:txt
复制
var stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

var layer = new Konva.Layer();
stage.add(layer);

var text = new Konva.Text({
  x: 100,
  y: stage.height() / 2,
  text: 'Hello World',
  fontSize: 20,
  verticalAlign: 'middle',
  height: stage.height()
});

layer.add(text);
layer.draw();

通过组合以上两种方式,可以实现水平和垂直居中文本的效果。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券