javascript - FabricJS：垂直对齐文本中心

Question

我正在使用fabricjs 1.5，并且我坚持垂直对齐行中间的文本。我正在使用此代码来设置行高

text.setProperty('lineHeight', $scope.lineHeight.current);

它会更改画布上文本的行高，但文本始终保留在顶部。我希望它位于垂直中间。请帮忙。

标签： javascriptcanvasfabricjs

Answer 1

• 将文本原点设置为“中心”
• 将文本位置设置为框中心

const box_width = 100
const box_height = 100

// box
var rect = new fabric.Rect({
    width: box_width, height: box_height,
    fill: false, stroke: '#000',
})

// text
// vertical align = center
var text = new fabric.Text(
    'hello', {
    originX: 'center', originY: 'center',
    left: 0.5*box_width, top: 0.5*box_height,
})

// group
var group = new fabric.Group(
    [rect, text], {
    left: 50, top: 50,
})

canvas.add(group)

小提琴