CODEWITHSUNDEEP
javascriptcanvasfabricjs
Ashish
Ashish

Reputation: 498

FabricJS: Vertical Align text center

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.

Upvotes: 4

Views: 7200

Answers (3)

Durga
Durga

Reputation: 15614

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://cdn.jsdelivr.net/npm/[email protected]/dist/fabric.min.js"></script>
<canvas id="canvas" width=400 height=400></canvas>

Upvotes: 2

Frederic Anand
Frederic Anand

Reputation: 66

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

Upvotes: 0

milahu
milahu

Reputation: 3609

  • 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

Upvotes: 5

Related Questions