FabricJS: Vertical Align text center

Question

I am using fabricjs 1.5 and I am stuck on aligning the text in the middle of the line vertically. I am using this code to set the line height

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

It changes the line height of text on canvas but text always remains at the top. I want it to be in the vertically middle. Please help.

milahu · Answer 1 · 2019-12-10T15:14:05.040

set text origin to 'center'
set text position to box center

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)

fiddle

score 3 · Accepted Answer · answered Jun 04 '18 at 07:46

3

You need to use newer versions of fabricjs. 1.5 is too old. For alignment use fabric.Textbox textAlign property.

DEMO

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://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="canvas" width=400 height=400></canvas>

answered Jun 04 '18 at 07:46

Durga

15,263
2
28
52

3

It aligns the text horizontally center. I want it to be centered vertically. – Ashish Jun 04 '18 at 10:37
@Ashish can you show a sample image, what you want to achieve? – Durga Jun 05 '18 at 06:27
you can refer this question on stackoverflow. This is the same thing I am looking for. https://stackoverflow.com/questions/49110454/fabric-js-text-vertical-align-to-center – Ashish Jun 05 '18 at 06:35
@Ashish You can produce the same using this demo, remove all the letters, then it will align to center. And height is calculated from number of lines of text. – Durga Jun 05 '18 at 06:41
It does not work if I set the line height using fabricJS lineHeight property. Text stays on the top. – Ashish Jun 05 '18 at 07:36
@Ashish lineHeight is for difference between two lines of text, it wont affect to start. – Durga Jun 05 '18 at 07:55

score 0 · Answer 3 · answered Dec 09 '21 at 06:47

I fixed the vertical align text center by calculating and adding line breaks, Below is the lines of code.

            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;
            }

FabricJS: Vertical Align text center

3 Answers3

Linked