Fabric.js：如何使形状中的文本呈现新行？答案

【问题标题】：Fabric.js: How to make the text in a shape to render new line?Fabric.js：如何使形状中的文本呈现新行？
【发布时间】：2013-12-15 03:34:35
【问题描述】：

我正在尝试使用 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在画布上渲染时，矩形内的文本不会显示在两行中。有人对此有解决方案吗？谢谢！

【问题讨论】：

你能把你的例子变成 jsfiddle 吗？审查会更容易

标签： javascript canvas fabricjs

【解决方案1】：

我看过一些代码，其中文本用 '\n' 估算你可以试试

【讨论】：