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

Я пытаюсь создать текстовое поле на холсте с помощью FabricJS. Я нашел демоверсию на официальном сайте Fabric.

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

 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 отображается на холсте, текст внутри прямоугольника не будет отображаться в две строки. У кого-нибудь есть решение по этому поводу? Спасибо!


person PaulLing    schedule 29.11.2013    source источник
comment
Вы можете сделать jsfiddle из вашего примера? будет легче пересмотреть это   -  person Rash    schedule 25.12.2013


Ответы (1)


Я видел какой-то код, где тексту присваивается '\n'. Вы можете попробовать.

person Oleksiy    schedule 28.07.2016