html5 - fabricJS text with uniform lineheight for each line -


i want text lines have same lineheights first line doesn't have line height

please check fiddle https://jsfiddle.net/fahadnabbasi/zukc6pvc/1/

var canvas = new fabric.canvas('c'); 

var text_temp = new fabric.itext("one 2 three\nfour 5 six\nseven 8 nine", { left: 20, top: 20, fontsize: 48,

        fill: "#000000",         lineheight : 2     });      canvas.add(text_temp) 

i want attached image

enter image description here

var canvas = new fabric.canvas('c');    // override full line height  fabric.text.prototype.calctextheight = function() {        var lineheight, height = 0;        (var = 0, len = this._textlines.length; < len; i++) {          lineheight = this.getheightofline(i);          height += lineheight;        }        return height;      };        fabric.text.prototype._gettopoffset = function() {    return -this.height / 2 + this.getheightofline(0) / this.lineheight;  };    var text_temp = new fabric.itext("one 2 three\nfour 5 six\nseven 8 nine", {              left: 20,              top: 20,              fontsize: 48,              textbackgroundcolor: 'red',              backgroundcolor: 'yellow',              fill: "#000000",              lineheight : 2          });                    canvas.add(text_temp)                    
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>  <canvas id="c" width="600" height="600"></canvas>

i'm not sure complete solution, nor want go deeper in modifying core behaviour of library. snippet can helpyou can fail in more advanced use cases.


Comments

Popular posts from this blog

javascript - Create a stacked percentage column -

Optimising Firebase database by automatically overwriting data -

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -