FabricJS在文本對象中添加新行

Question

據我所知，無法在TextJackBackgroundColor中添加填充（填充存在但它對textBackgroundColor沒有影響），所以我試圖破解文本的外觀給人的印象是填充。

我這樣做是通過在文本對象內的每行末尾自動添加空格來實現的。這不是優雅，但它接近。

但是我被困在1個問題上，我的代碼變得有點混亂。

現在添加一個新行（點擊返回）不能按預期工作。

遊標似乎出現在它應該出現的角色後面，並且必須返回2次才能到達新行，屆時會添加空行。

出了什麼問題，我該如何回到正軌？

我認爲解決空行錯誤只有在行中包含1個或多個字符時才添加空格是有意義的，但我無法實現這一點。

這裏是我的Fiddle

JS

var canvas = new fabric.Canvas('mycanvas'); 
var activeObject = canvas.getActiveObject(str1); 

var objects = canvas.getObjects(); 
var concatstr = ''; 
var res; 
var str; 
var str1; 
var abcd; 
canvas.on('text:changed', function() { 
    var concatstr = ''; 
    var activeObject = canvas.getActiveObject(); 
    var txtsa = jQuery.trim(activeObject.text); 
    values = txtsa.split('\n'); 

    jQuery.each(values, function(index, val) { 
    jQuery.trim(val); 
    concatstr += " " + val + " " + "\\n"; 
    }); 
    var temp = concatstr.replace(/ +/g, ' '); 
    var final = temp.replace(/\\n/g, "\n"); 

    activeObject.setText(final); 
}); 

var text1 = new fabric.IText(' Text ', { 
    top: 100, 
    left: 100, 
    textBackgroundColor: '#000', 
    fontSize: 30, 
    lineHeight: 0.9, 
    fill: 'white', 
    fontWeight: 'bold', 
    textAlign: 'center', 
    fontFamily: 'Helvetica Nue, Helvetica, Sans-Serif, Arial, Trebuchet MS', 
}); 

canvas.add(text1); 
canvas.renderAll(); 

Answer 1

我不認爲將文本添加到您的文本，以獲得一個填充是一個很好的解決方案。

即使你的問題是關於添加空格和按鍵，我向你展示了一種替代方法來將填充添加到背景顏色。

fabric.Object.prototype._renderBackground = function(ctx) { 
 
     if (!this.backgroundColor) { 
 
     return; 
 
     } 
 
     var dim = this._getNonTransformedDimensions(); 
 
     ctx.fillStyle = this.backgroundColor; 
 

 
     ctx.fillRect(
 
     -dim.x/2 - 10, 
 
     -dim.y/2 - 10, 
 
     dim.x + 20, 
 
     dim.y + 20 
 
    ); 
 
     // if there is background color no other shadows 
 
     // should be casted 
 
     this._removeShadow(ctx); 
 
    }; 
 

 
var canvas = new fabric.Canvas('mycanvas'); 
 
var activeObject = canvas.getActiveObject(str1); 
 

 
var objects = canvas.getObjects(); 
 
var concatstr = ''; 
 
var res; 
 
var str; 
 
var str1; 
 
var abcd; 
 

 
var text1 = new fabric.IText(' Text ', { 
 
    top: 100, 
 
    left: 100, 
 
    backgroundColor: '#000', 
 
    fontSize: 30, 
 
    lineHeight: 0.9, 
 
    fill: 'white', 
 
    fontWeight: 'bold', 
 
    textAlign: 'center', 
 
    fontFamily: 'Helvetica Nue, Helvetica, Sans-Serif, Arial, Trebuchet MS', 
 
}); 
 

 
canvas.add(text1); 
 
canvas.renderAll();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script> 
 

 
<canvas id="mycanvas" width="1000" height="1000"></canvas>

正如你看到的覆蓋默認的backgroundColor功能是很容易的。 雖然很難爲庫中的每個人添加選項，但通過原型更改，您可以輕鬆獲得自定義行爲。