FabricJS：垂直对齐文本中心

Question

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

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

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

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)

小提琴

Answer 2

您需要使用较新版本的fabricjs。 1.5太旧了。对于对齐，请使用

fabric.Textbox

textAlign 属性。

演示

var canvas = new fabric.Canvas("canvas");
canvas.add(new fabric.Textbox('FabricJS is Awsome',{width:300,textAlign:'center'}));

canvas{
 border: 1px solid #000;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fabric.min.js"></script>
<canvas id="canvas" width=400 height=400></canvas>

Answer 3

我通过计算和添加换行符修复了垂直对齐文本中心，下面是代码行。

            var text = this.fabricObject.text;
            //extract lines without line break
            var multiline = text.split(/\n\r|\n|\r/);
            var origText = '';
            for (var i = 0; i < multiline.length; i++) {         
                if(multiline[i].trim() != '' && multiline[i].trim() != '\n') {
                    if(i > 0 && origText != '')
                    origText += '\n';
                    origText += multiline[i];
                }
            }
            //add line breaks based on alignment.
            multiline = origText.split(/\n\r|\n|\r/);
            var curlines = multiline.length;
            var lineheight = this.fabricObject.fontSize * this.fabricObject.lineHeight * this.fabricObject._fontSizeMult
            var totallines = Math.floor(this.fabricObject.height / lineheight);
            var remlines = totallines - curlines;              
            
            if(align === 'bottom') {      
                var finalText = '';
                for (var i = 0; i < remlines; i++) {
                    finalText += "\n";
                }         
                finalText += origText;
                this.fabricObject.text = finalText;
            }
            if(align === 'top') {
                this.fabricObject.text = origText;
            }
            if(align === 'center') {      
                var finalText = '';
                for (var i = 0; i < remlines/2; i++) {
                    finalText += "\n";
                }         
                finalText += origText;
                this.fabricObject.text = finalText;
            }