Fabric.js: Как сделать текст в форме для рендеринга новой строки?

Question

Я пытаюсь создать текстовое поле на холсте с помощью fabricJS. Я нашел демо на Fabric official website.

Я создал новый класс для этого, и это мой код:

fabric.Writebox = fabric.util.createClass(fabric.Rect, { 
     type: 'writebox', 
     initialize: function(element, options) { 
      this.callSuper('initialize', element, options); 
      options && this.set('lockUniScaling', options.lockUniScaling); 
      options && this.set('label', options.label || ''); 
     }, 
     toObject: function() { 
      return fabric.util.object.extend(this.callSuper('toObject'), { 
       label: this.label, 
       lockUniScaling: this.lockUniScaling 
      }); 
     }, 
     _render: function(ctx) { 
      this.callSuper('_render', ctx); 
      ctx.font = '20px Times'; 
      ctx.fillStyle = '#333'; 
      ctx.fillText(this.label, -this.width/2 + 4, -this.height/2 + 20); 
     } 
    }); 

и это, как я сделать/добавить на холсте:

var theString="Testing the text \n And This is a new line"; 
$("#textlen").html(theString); 
var theWidth = $("#textlen").width(); 
alert(theWidth); 
    var labeledRect = new fabric.Writebox({ 
     width: 300, 
     height: 50, 
     left: 300, 
     top: 100, 
     label: theString, 
     fill: '#faa', 
     stroke: 1 
    }); 

Но когда labeledRect оказывается на холсте текст внутри прямоугольника не будет отображаться в двух строках. У кого-нибудь есть решение? Благодаря!

Answer 1

Я видел некоторый код, где текст вмененный с «\ п» Вы можете попробовать это